1. 程式人生 > 實用技巧 >vue 引入3D餅圖---highCharts

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

<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']
}
]
})
}
}