vue+highCharts---仪表盘图

在highcharts组件中引入红框部分的js：

效果图：

注意！！分数变化后，图表使用update更新，（Highcharts中更新series的5种方法，同理可知其他配置项的更新方法）

        //this.gradeChart = Highcharts.chart('gradeCharts', this.gradeOption)
        const point = this.gradeChart.series[0].points[0]
        const newVal = 新的分数
        point.update(newVal)

动画效果才会在上一个分数的基础上 进行增加或者减少，如图上图效果。如果使用HighCharts.chart(this.id, this.option)方法重新绘制图表，那么动画会永远从0分处开始动。

参考option：

gradeOption: {
        chart: {
          backgroundColor: 'rgba(250, 252, 255, 0)',
          type: 'solidgauge'
        },
        title: null,
        pane: {
          center: ['50%', '95%'],
          size: '190%',
          startAngle: -90,
          endAngle: 90,
          background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#555d6c',
            borderWidth: 0,
            innerRadius: '80%',
            outerRadius: '100%',
            shape: 'arc'
          }
        },
        tooltip: {
          enabled: false
        },
        yAxis: {
          min: 0,
          max: 100,
          stops: [
            [0.2, '#ff0000'], // red
            [0.8, '#ffab00'], // yellow
            [0.9, '#55BF3B'] // green
            // [0.9, '#55BF3B'] // green
          ],
          // plotBands: [
          //   {
          //     from: 0,
          //     to: 30,
          //     thickness: '20%',
          //     color: {
          //       linearGradient: { x1: 0, x2: 1, y1: 0, y2: 0 },
          //       stops: [[0, 'red'], [1, 'orange']]
          //     }
          //   },
          //   {
          //     from: 30,
          //     to: 70,
          //     thickness: '20%',
          //     color: {
          //       linearGradient: { x1: 0, x2: 1, y1: 0, y2: 0 },
          //       stops: [[0, 'orange'], [1, 'yellow']]
          //     }
          //   },
          //   {
          //     from: 69,
          //     to: 100,
          //     thickness: '20%',
          //     color: {
          //       linearGradient: { x1: 0, x2: 1, y1: 0, y2: 0 },
          //       stops: [[0, 'yellow'], [1, 'green']]
          //     }
          //   }
          // ],
          lineWidth: 0,
          minorTickInterval: null,
          tickPixelInterval: 150,
          tickWidth: 1,
          tickPosition: 'outside',
          labels: {
            y: 16,
            distance: -45,
            style: {
              color: '#555d6c',
              fontSize: '15px'
            }
          }
        },
        plotOptions: {
          solidgauge: {
            dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true
            }
          }
        },
        credits: {
          enabled: false
        },
        series: [{
          name: '速度',
          data: [0],
          innerRadius: 80,
          dataLabels: {
            useHTML: true,
            formatter: function() {
              const color = that.h5gecEquipmentState == -1 ? 'red' : that.h5gecEquipmentState == 0 ? 'orange' : 'white'
              return '<div style="text-align:center"><span style="font-family:homeGrade ;font-size:65px;color: ' + color + '">' + this.y + '</span><br/>' +
                  '<span style="font-size:16px;color:white">-设备健康度评分-</span></div>'
            }
          },
          tooltip: {
            valueSuffix: ' '
          }
        }]
      }