vue 引入3D餅圖---highCharts
阿新 • • 發佈:2020-12-14
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
<div id="container" style="height: 400px"></div>
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']
}
]
})
}
}