vue单页面中使用 highcharts 绘制3D饼图

原本是使用echarts在弄3D饼图，但小女子不才~ 只要放进真数据，那个图就会变得不3d了，咋弄都不行，有知道咋弄的铁铁，可以告诉我一下吗 ? 谢谢啦~

综上原因，我就把大刀对准 highcharts 啦，好了，废话不说了，看下我的这个效果图：

安装下所需要的依赖：

// 首先安装vue-highcharts
npm install vue-highcharts --save

// 由于vue-highcharts依赖于highcharts，我们还需要安装后者
npm install highcharts --save

在main.js中引入：

import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)

在需要使用该饼图的页面中局部引入：

import HighCharts from 'highcharts'

用法（可直接copy使用）：

html中：

<div :id="id"> </div>

js中

<script>
import HighCharts from 'highcharts'
export default {
  components: {
    monitor
  },
  data() {
    return {
      id: 'DispatchProportion',
      option: {
        chart: {
          type: 'pie', //饼图
          backgroundColor: 'rgba(0, 0, 0, 0)', //去掉白色背景
          options3d: {
            enabled: true, //使用3d功能
            alpha: 50, //延y轴向内的倾斜角度
            beta: 0 //图表视图旋转角度
          }
        },
        title: {
          text: '' //图表的标题文字 这个得加上，不然头部会默认有字
        },
        subtitle: {
          text: '' //副标题文字
        },
        tooltip: {
          formatter: function () {
            return (
              this.point.name +
              '<br/><span style="color:' +
              this.color +
              '">\u25CF</span>占比：<b>' +
              this.percentage.toFixed(2) +
              '%</b>'
            )
          },
          style: {
            color: '#000',
            fontSize: 10
          }
        },
        // 去掉右底部的文字
        credits: {
          enabled: false
        },
        // 更改图例文字颜色
        legend: {
          itemStyle: { color: '#cfcfcf' }
        },
        plotOptions: {
          pie: {
            borderColor: '#000',
            borderWidth: 1,
            allowPointSelect: true, //每个扇块能否选中
            cursor: 'pointer', //鼠标指针
            colors: [
              '#bfde43',
              '#d8009d',
              '#9cf6fe',
              '#f47979',
              '#fcf897',
              '#df99fc',
              '#44ff98',
              '#ff7044',
              '#95e0ff',
              '#c419fc',
              '#fcaa19',
              '#2ed72e',
              '#ff44cc',
              '#649ce9',
              '#2896fc',
              '#9344ff',
              '#44f0ff',
              '#fff444'
            ],
            depth: 35, //饼图的厚度
            showInLegend: true, //显示图例

            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              format: '{point.name}',
              style: {
                //样式配置
                textOutline: 'none', //去掉文字白边
                color: '#dfe9f9',
                fontSize: 11
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            data: []
          }
        ]
      }
    }
  },
  mounted() {
  // 你们只需要把这个数据更换成你们的就好啦
      let data = [
      ['aa', 111],
      ['bb', 65],
      ['cc', 99],
      ['yy', 111],
      ['mm', 65],
      ['kk', 99]
    ]
    this.option.series[0].data = data
    HighCharts.chart(this.id, this.option)
  }
}
</script>