vue使用highcharts3D饼图

1.安装highcharts

npm install vue-highcharts --save
npm install highcharts --save

2.main.js

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

3.使用highcharts的页面

<div class="net-chart" :id="id" :option="option"></div>

import HighCharts from 'highcharts'

mounted(){
    HighCharts.chart(this.id, this.option) // HighCharts图例
}

created(){
    this.$nextTick(() => {
        this.netHighcharts()
    }
}

data(){
    return{
        id: 'test',
        option:{},
    }
}

netHighcharts(){
    this.option = {
                chart: {
                    backgroundColor:'',
                    type: 'pie',//饼图
                     options3d: {
                         enabled: true,//使用3d功能
                         alpha: 65,//延y轴向内的倾斜角度
                         beta: 0,   
                     }
                },
                // title: {
                //     text: '测试用'//图表的标题文字
                // },
                tooltip:{
                    borderColor:'#ffffff', //边框颜色
                    backgroundColor: "#06182E",
                    enabled:false,
                },
                colors:[
                    // {linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, //颜色渐变
                    //         stops: [
                    //             [0, 'rgba(0, 168, 255, 1)'],
                    //             [1, 'rgba(143, 223, 254, 1)']
                    //         ]
                    //     },
                    '#76baf2',
                    '#00D7E9',
                ],
                subtitle: {
                    text: ''//副标题文字
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,//每个扇块能否选中
                        cursor: 'pointer',//鼠标指针
                        depth: 20,//饼图的厚度
                        dataLabels: {
                            enabled: true,//是否显示饼图的线形tip
                            format: '{point.percentage:.1f}%',
                            style: {
                                color: 'white'
                            }
                        },
                    }
                },
                series: [
                    {
                        type: 'pie',
                        name: '',//统一的前置词,非必须
                        data: [
                            //模块名和所占比，也可以{name: '测试1',y: 12}
                            {name:'已入网’,y:100,sliced: true,selected: true},//为选中分裂状态
                            // ['已入网’,100],
                            ['未入网’,200],
                        ],
                        sliced:true,
                        events: {//点击事件
                            click: function (e) {
                                // console.log(e);
                            }
                        }
                    }
                ]
            }
            HighCharts.chart(this.id,this.option)
}