highcharts 3D饼图

编程入门行业动态更新时间:2024-10-23 10:24:02

highcharts 3D饼图

详细介绍highcharts在vue中的使用和配置方法。首先需要说明的是这个插件并不是开源的，如果是商业用途的，最好还是获取授权！

第一步：
首先使用 npm在你的项目中安装vue-highcharts

npm install vue-highcharts --save

由于vue-highcharts依赖于highcharts，我们还需要安装后者

npm install highcharts --save

第二步：

安装完成后，进入项目main.js进行配置：

import highcharts from 'highcharts'

引入以上两项之后，因为我们需要使用3d图表，还需要引入：

 import highcharts3d from 'highcharts/highcharts-3d'

调用3d图表：（注意这一点，一定要加上不然会报错）

highcharts3d(highcharts)

已经在vue中配置好highcharts。同时需要在package.json里面检查是不是有 当前插件的版本号。

我使用时：在package.json的“dependencies”里加版本号：“highcharts”："^9.3.1"

第三步：
新建一个饼图的子组件：

<template><div class="container"><div :id="id" :option="option"></div></div>
</template><script>
import HighCharts from 'highcharts'
export default {props: {id: {type: String},//option 是图表的配置数据option: {type: Object}},mounted() {HighCharts.chart(this.id, this.option)}
}
</script><style scoped>
/* 容器 */    
.container {
width: 1000px;
height: 550px;
}
</style>

在需要使用饼图的页面（父组件）里配置option数据:

<template><div class="charts"><Pie :id="id" :option="option"></Pie></div>
</template><script>
import Pie from '../components/Pie'
export default {components: {Pie,},data() {return {id: 'test',option: {credits:{enabled: false, //去掉右下角的""的所有权},label:{style:{fontWeight: 'normal'}},color:['red','green','pink','blue','white'],chart: {type: 'pie',//饼图backgroundColor:'transparent',options3d: {enabled: true,//使用3d功能alpha: 60,//延y轴向内的倾斜角度beta: 0,   },spacingTop: -155, //调整饼图在页面中的位置},title: {text: '测试用'//图表的标题文字，不显示标题的话属性值为null},subtitle: {text: ''//副标题文字},tooltip:{//悬浮框中的文字pointFormat:'{point.name}:<b> {point.y}({point.percentage:.2f}%)</b>',headerFormat:'{series.name}<br>'},slicedOffset:20,//选中的时候有个滑动的效果plotOptions: {pie: {allowPointSelect: true,//每个扇块能否选中cursor: 'pointer',//鼠标指针depth: 35,//饼图的厚度dataLabels: {enabled: true,//是否显示饼图的线形tipformat:'{point.name}{point.percentage:.2f}%',//牵引线上的文字style：{//样式调整color: '#fff',fontSize: '12'}},events:{click:funtion(e){//绑定的事件+传参：我绑的事件pieClickpieClick(e.point)}}}},series: [{type: 'pie',name: '测试用1',//统一的前置词,非必须data: [['测试1',12],//模块名和所占比，也可以{name: '测试1',y: 12}['测试2',23],['测试3',19],['测试4',29]]}]}}},}
</script><style scoped></style>

附上官网网址：，图表主要组成 | Highcharts 使用教程