3d饼图 vue_在Vue中使用highCharts绘制3d饼图

highcharts是国外知名基于javascript的图表库。由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖，所以弃用。

接下来，给各位伙伴简要的讲叙下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)

OK，到此为止已经在vue中配置好highcharts,接下来根据API绘制一份3d饼图

新建一个饼图的组件：

import HighCharts from 'highcharts'

export default {

props: {

id: {

type: String

},

//option 是图表的配置数据

option: {

type: Object

}

},

mounted() {

HighCharts.chart(this.id, this.option)

}

}

/* 容器 */

.container {

width: 1000px;

height: 550px;

}

在需要使用饼图的页面里配置option数据

import Pie from '../components/Pie'

export default {

components: {

Pie,

},

data() {

return {

id: 'test',

option: {

chart: {

type: 'pie',//饼图

options3d: {

enabled: true,//使用3d功能

alpha: 60,//延y轴向内的倾斜角度

beta: 0,

}

},

title: {

text: '测试用'//图表的标题文字

},

subtitle: {

text: ''//副标题文字

},

plotOptions: {

pie: {

allowPointSelect: true,//每个扇块能否选中

cursor: 'pointer',//鼠标指针

depth: 35,//饼图的厚度

dataLabels: {

enabled: true,//是否显示饼图的线形tip

}

}

},

series: [

{

type: 'pie',

name: '测试用1',//统一的前置词,非必须

data: [

['测试1',12],//模块名和所占比，也可以{name: '测试1',y: 12}

['测试2',23],

['测试3',19],

['测试4',29]

]

}

]

}

}

},

}

看下效果。