highcharts（多圈仪表图）活动图

highcharts仪表-活动图

if (!Highcharts.theme) {
        Highcharts.setOptions({
          chart: {
            backgroundColor: '#3d3947'
          },
          colors: ["#29D8B5", "#0095E9", "#F3822F","#FF4B4C","#FF0000"],
          title: {
            style: {
              color: 'silver'
            }
          },
          tooltip: {
            style: {
              color: 'silver'
            }
          }
        });
      }
      Highcharts.chart('responed-speed-pie', {
        chart: {
          type: 'solidgauge',
          marginTop: 0,
        },
        //官网链接
        credits: {
          enabled: false,
        },
        title: {
          text: '',
          style: {
            fontSize: '24px'
          }
        },
        tooltip: {
          borderWidth: 0,
          backgroundColor: 'none',
          shadow: false,
          style: {
            fontSize: '16px'
          },
          pointFormat: '{series.name}:<span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}个</span>',
          positioner: function (labelWidth) {
            return {
              x: 200 - labelWidth / 2,
              y: 80
            };
          }
        },
        pane: {
          startAngle: 0,
          endAngle: 360,
          background: [
            {
              outerRadius: "105%",
              innerRadius: "95%",
              backgroundColor: Highcharts.Color(
                Highcharts.getOptions().colors[0]
              ).setOpacity(0.2).get(),
              borderWidth: 0,
            },
            {
              outerRadius: "85%",
              innerRadius: "75%",
              backgroundColor: Highcharts.Color(
                Highcharts.getOptions().colors[1]
              ).setOpacity(0.2).get(),
              borderWidth: 0,
            },
            {
              outerRadius: "65%",
              innerRadius: "55%",
              backgroundColor: Highcharts.Color(
                Highcharts.getOptions().colors[2]
              ).setOpacity(0.2).get(),
              borderWidth: 0,
            },
            {
              outerRadius: "45%",
              innerRadius: "35%",
              backgroundColor: Highcharts.Color(
                Highcharts.getOptions().colors[3]
              ).setOpacity(0.2).get(),
              borderWidth: 0,
            },
            {
              outerRadius: "25%",
              innerRadius: "15%",
              backgroundColor: Highcharts.Color(
                Highcharts.getOptions().colors[4]
              ).setOpacity(0.2).get(),
              borderWidth: 0,
            }
          ]
        },
        yAxis: {
          min: 0,
          max: 100,
          lineWidth: 0,
          tickPositions: []
        },
        plotOptions: {
          solidgauge: {
            borderWidth: '10px',
            dataLabels: {
              enabled: false
            },
            linecap: 'round',
            stickyTracking: false,
            size: 180,
          }
        },
        series: [
          {
            name: "0-50ms",
            borderColor: Highcharts.getOptions().colors[0],
            // borderColor: "red",
            data: [
              {
                color: Highcharts.getOptions().colors[0],
                // color:'red',
                radius: "100%",
                innerRadius: "100%",
                y: this.responseSolidgauge[0].count,
              },
            ],
          },
          {
            name: "50-150ms",
            borderColor: Highcharts.getOptions().colors[1],
            data: [
              {
                color: Highcharts.getOptions().colors[1],
                radius: "80%",
                innerRadius: "80%",
                y: this.responseSolidgauge[1].count,
              },
            ],
          },
          {
            name: "150-300ms",
            borderColor: Highcharts.getOptions().colors[2],
            data: [
              {
                color: Highcharts.getOptions().colors[2],
                radius: "60%",
                innerRadius: "60%",
                y: this.responseSolidgauge[2].count,
              },
            ],
          },
          {
            name: "300-500ms",
            borderColor: Highcharts.getOptions().colors[3],
            data: [
              {
                color: Highcharts.getOptions().colors[3],
                radius: "40%",
                innerRadius: "40%",
                y: this.responseSolidgauge[3].count,
              },
            ],
          },
          {
            name: ">500ms",
            borderColor: Highcharts.getOptions().colors[4],
            data: [
              {
                color: Highcharts.getOptions().colors[4],
                radius: "20%",
                innerRadius: "20%",
                y: this.responseSolidgauge[4].count,
              },
            ],
          },
        ]
      },
      function callback() {
      });