HighChart速度仪表样式

效果图如下

88aad04318b6c13a0d11d5f3ff3b4f1.png

代码如下

 setGuage() {
        const labelColor= {
          yellow: '#FFCC50',
          red: '#FD576F',
          green: '#0BC187'
        }

        $('#gaugeView').highcharts({
          chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
          },
          title: {
            text: null
          },
          pane: {
            startAngle: -120,
            endAngle: 120,
            background: [{
              backgroundColor: '#ffffff',
              borderWidth: 0,
              outerRadius: '100%',
              innerRadius: '0%'
            }]
          },
          // the value axis
          yAxis: {
            min: 0,
            max: 100,
            minorTickInterval: 'auto',
            minorTickWidth: 0, // 刻度线
            lineWidth: 0, // 边框
            tickPixelInterval: 30,
            tickWidth: 0, // 刻度线
            labels: {
              step: 2,
              rotation: '0',
              formatter: function () {
                // 格式化文字颜色
                let _color = labelColor.red
                if ( parseFloat(this.value) <= 20) { _color = labelColor.red  }
                if ( parseFloat(this.value) > 20 && parseFloat(this.value) < 80 ) { _color = labelColor.yellow  }
                if ( parseFloat(this.value) >= 80) { _color = labelColor.green  }
                return `<span style="color: ${_color}"> ${this.value} </span>`;
              }
            },
            title: {
              text: '达成率',
              align: 'low',
              style: { 'color': '#232323', 'letter-spacing': '1px' },
              y: 74,
              x: -20
            },
            plotBands: [{ // 三个颜色区域
              from: 0,
              to: 20,
              color: labelColor.red, // red
            }, {
              from: 20,
              to: 80,
              color: labelColor.yellow // yellow
            }, {
              from: 80,
              to: 100,
              color: labelColor.green // green
            }]
          },
          series: [{ // 达成率 数据
            name: 'Speed',
            data: [80],
            dataLabels: {
              borderWidth: 0,
              y: 25,
              x: -8,
              style: { "fontWeight": "400" ,"fontSize": "25px"},
              formatter: function () {
                // 格式化文字颜色
                let _color = labelColor.red
                if ( parseFloat(this.y) <= 20) { _color = labelColor.red  }
                if ( parseFloat(this.y) > 20 && parseFloat(this.y) < 80 ) { _color = labelColor.yellow  }
                if ( parseFloat(this.y) >= 80  && parseFloat(this.y) <= 100) { _color = labelColor.green  }
                return `<span style="color: ${_color}"> ${this.y}%</span>`;
              }
            },
            tooltip: {
              valueSuffix: ''
            }
          }],
          credits: {//去除水印
            enabled: false
          },
          exporting: { //去除导出
            enabled: false
          },
          plotOptions: {
            gauge: {
              dial: {
                radius: '60%',
                backgroundColor: '#C8C8C8',
                borderWidth: 0,
                baseWidth: 7,
                topWidth: 1,
                baseLength: '96.8%', // 指针圆度
                rearLength: '35%'
              },
              pivot: {  // 指针中心点
                backgroundColor: '#C8C8C8',
                radius: 7
              }
            }
          }

        }, function (c) {
          this.chart = c
          if (!this.chart.renderer.forExport) {
            setInterval( () => {
              var point =  this.chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5) * 20);
              newVal = point.y + inc;
              if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
              }
              point.update(newVal);
            }, 3000);
          }
        })
      }