Vue2和HightCharts

做大数据屏幕展示数据，3D图算是一种毕竟有冲击力的展示方式了。所有这次说一说在Vue2项目里如何使用HighCharts

• 这次主要绘制2种3D饼图
  • 高度一致的3D饼图
  • 高度不一致的3D饼图

1 Vue引入HighCharts

    npm install highcharts
    npm install vue-highcharts

1.1 在main.js中引入

    import highcharts from 'highcharts'
    import VueHighCharts from 'vue-highcharts'
    import highcharts3d from 'highcharts/highcharts-3d'

    // 引入3d组件
    highcharts3d(highcharts)

1.2 在Vue中的基本使用

• 相关代码：

    <div class="pie" ref="domPie" id="domPie"></div>
  

    import Highcharts from 'highcharts'
  
    let optionPie = {
       
        chart: {
       
          type: 'pie', // 饼图
          backgroundColor: 'transparent',
          height: 200,
          animation: false,
          options3d: {
       
            enabled: true,
            alpha: 60,
            beta: 0
          }
        },
        colors: [
          '#336EFF',
          '#5DD28A',
          '#69FCFF',
          '#6536FC'
        ],
        title: {
       
          text: '',
        },
        subtitle: {
       
          text: ''
        },
        credits: {
       
          enabled: false
        },
        plotOptions: {
       
          pie: {
       
            allowPointSelect: true,//每个扇块能否选中
            cursor: 'pointer',//鼠标指针
            depth: 20,//饼图的厚度
            dataLabels: {
       
              enabled: false,//是否显示饼图的线形tip
            }
          }
        },
        series: [
          {
       
            type: 'pie',
            name: '',
            data: data
          }
        ]
    }
      let that = this
      that.$nextTick((