echarts扇形仪表盘

效果展示

options代码

{
        series: [
          {
            type: "gauge",
            max: 20,
            splitNumber: 16,
            axisLine: {
              lineStyle: {
                width: 15,
                //仪表盘背景颜色
                color: this.axisLineBg,
              },
            },
            pointer: {
              show: false,
            },
            axisTick: {
              show: true,
              length: 10,
              //   小指针数量
              splitNumber: 2,
              lineStyle: {
                color: "#21FFE5",
                width: 2,
              },
            },
            splitLine: {
              distance: -20,
              length: 50,
              lineStyle: separateBg,
            },
            axisLabel: {
              color: "auto",
              distance: 10,
              fontSize: 0,
              show: false,
            },
            detail: {
              valueAnimation: false,
              formatter: "{value}%",
              color: "#21FFE5",
              fontSize: "28px",
              offsetCenter: ["5%", "10%"],
            },
            center: ["46%", "60%"],
            radius:'100%',
            data: [
              {
                value: 80,
              },
            ],
          },
        ],
      }

axisLineBg代码

[
        [
            //动态值
            0.8,
            new echarts.graphic.LinearGradient(
                0,
                1,
                1,
                0, [{
                        offset: 0.1,
                        color: "#1B535D",
                    },
                    {
                        offset: 0.3,
                        color: "#21CBBD",
                    },
                ],
                false
            ),
        ],
        [
            1,
            new echarts.graphic.LinearGradient(
                0,
                1,
                1,
                0, [{
                        offset: 0.1,
                        color: "#1A3745",
                    },
                    {
                        offset: 0.3,
                        color: "#254554",
                    },
                ],
                false
            ),
        ],
    ]