模拟echarts仪表盘进度条

模拟echarts仪表盘进度条

需求：仪表盘的进度条达到不同的角度使用不同的颜色，且颜色是渐变的。某一时刻的静态图如下；

实现思路
在一个容器中画两个图，一个在上作为进度条，另一个在下作为轴线，通过’Z’属性可以控制图的层级。通过动态控制上方图形轴线的endAngle（结束角度）达到进度条的效果。

options

{
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          z: 2,
          type: "gauge",
          axisLabel: false,
          detail: {
            formatter: "{value}",
          },
          splitLine: {
            show: false,
          },
          data: [
            {
              value: 50,
              detail: {
                show: false,
              },
            },
          ],
          center: ["50%", "55%"],
          radius: "100%",
          startAngle: -180,
          splitNumber: 10,
          endAngle: -360,
          clockwise: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: [
      [
        1,
        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 1,
            color: "#35C78C",
          },
        ]),
      ],
    ],
              width: 35,
            },
          },
          pointer: {
            show: false,
            length: "80%",
            width: 10,
            offsetCenter: ["0", "-20"],
            itemStyle: {
              color: "#fff",
            },
          },
          progress: {
            show: false,
            width: true,
          },
          axisTick: {
            show: false,
            splitNumber: 0,
            distance: 0,
          },
        },
        {
          z: 1,
          type: "gauge",
          axisLabel: false,
          detail: {
            formatter: "{value}",
          },
          splitLine: {
            show: false,
          },
          data: [
            {
              value: 60,
              detail: {
                show: false,
              },
            },
          ],
          center: ["50%", "55%"],
          radius: "100%",
          startAngle: -180,
          splitNumber: 10,
          endAngle: -360,
          clockwise: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: 35,
            },
          },
          pointer: {
            show: false,
            length: "80%",
            width: 10,
            offsetCenter: ["0", "-20"],
            itemStyle: {
              color: "#fff",
            },
          },
          progress: {
            show: false,
            width: true,
          },
          axisTick: {
            show: false,
            splitNumber: 0,
            distance: 0,
          },
        },
      ],
    };