VUE中使用highcharts

安装 $npm install highcharts-vue

引入（可全局或局部引入，我这里是局部引入）
import { Chart } from ‘highcharts-vue’
components: {
 highcharts: Chart
}

<highcharts ref="chart" :options="chartOptions" :updateArgs="[true, false]" class="statistics-chart-box" :callback="chartCallback"></highcharts>

参数说明：
chartOptions ：图标配置
updateArgs：[redraw, // 是否重绘
      oneToOne, // 是否对X,Y轴集合一对一更新
      animation] // 是否应用动画
chartCallback：图标加载完后的回调函数

chartOptions: {
        chart: {
          // renderTo: 'container', 
          spacing: [0, 0, 0, 0]  // 内边距
        },
        title: {
          floating: true,
          useHTML: true,
          text: '',
          x: -50,
          y: 67
        },
        colors: ['#36ce90', '#ff952c', '#fe0b0f'],
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: false
            },
            showInLegend: true
          }
        },
        legend: {
          layout: 'vertical',
          verticalAlign: 'middle',
          align: 'right',
          labelFormatter: function () {   // 图例格式化
            return this.name + '\t' + this.y
          }
        },
        series: [{
          type: 'pie',
          innerSize: '80%',  // 饼图内径的大小，大于0呈现圆环图
          name: '',
          data: [
            ['录像完整', 0],
            ['录像丢失', 0],
            ['巡检失败', 0]
          ]
        }],
        credits: {
          enabled: false
        }
      },

官方文档https://www.highcharts.com.cn/docs/highcharts-vue