【HightCharts】Vue2.0 引入 HightCharts

最近在项目中需要制作一个3d的环形图，找了d3和echarts都没有做3d的，最后发现highcharts有3d图标的饼图。

推荐链接：Highcharts 教程 | 菜鸟教程

第一步：npm安装

npm install highcharts --save

第二步： main.js中引入

import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

第三步：index.vue中使用 

<div id="container" style="height: 240px; width: 100%"></div>

var Highcharts = require("highcharts/highstock");
export default {
  data() {
    return {};
  },
  mounted(){
    this.$nextTick(()=>{
        this.init()
    })
  }
  methods: {
    init() {
      Highcharts.chart('container', {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45
          }
        },
        title: {
          text: '简数科技每周水果消耗量'
        },
        subtitle: {
          text: 'Highcharts 中的3D环形图'
        },
        credits: {
          //去掉右下角网址链接
          enabled: false,
        },
        plotOptions: {
          pie: {
            innerSize: 100,
            depth: 45
          }
        },
        series: [{
          name: '货物金额',
          data: [
            ['香蕉', 8],
            ['猕猴桃', 3],
            ['桃子', 1],
            ['橘子', 6],
            ['苹果', 8],
            ['梨', 4],
            ['柑橘', 4],
            ['橙子', 1],
            ['葡萄 (串)', 1]
          ]
        }]
      });
    }
  }
}