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