美文网首页
HighChart速度仪表样式

HighChart速度仪表样式

作者: 22岁的程序员 | 来源:发表于2020-06-22 18:05 被阅读0次

    效果图如下


    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);
              }
            })
          }
    

    相关文章

      网友评论

          本文标题:HighChart速度仪表样式

          本文链接:https://www.haomeiwen.com/subject/kerffktx.html