3d饼图 vue_vue 引入3D饼图---highCharts

1、npm install --save highcharts

2、main.js

import highcharts from 'highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(highcharts)

3、组件中使用

import HighCharts from 'highcharts'

html

js

mounted () {

this.getPie()

},

methods: {

getPie () {

HighCharts.chart('container', {

chart: {

type: 'pie',

options3d: {

enabled: true,

alpha: 45

}

},

plotOptions: {

pie: {

innerSize: 120,

depth: 80,

dataLabels: {

enabled: false

}

}

},

series: [

{

name: '数量',

data: [

['香蕉', 8],

['猕猴桃', 3],

['桃子', 1],

['橘子', 6],

['苹果', 8],

['梨', 4]

],

colors: ['#3F7CFF', '#9660E5', '#FBC61F',

'#3FC9CB', '#FA5728', '#29F217']

}

]

})

}

}