echarts-gauge-bar

let option = {
        grid: {
          show: false,
          containLabel: true,
        },
        angleAxis: {
          show: false,
          max: 200, //-45度到225度，二者偏移值是270度除360度
          type: "value",
          startAngle: 180, //极坐标初始角度
          splitLine: {
            show: false,
          },
        },
        barMaxWidth: 7, //圆环宽度
        radiusAxis: {
          show: false,
          type: "category",
        },
        //圆环位置和大小
        polar: {
          center: ["50%", "50%"],
          radius: "180%",
        },
        series: [
          {
            type: "bar",
            data: [
              {
                //上层圆环，显示数据
                value: 50,
                itemStyle: {
                  color: data.isBig ? 'red' : "green",
                },
              },
            ],
            coordinateSystem: "polar",
            roundCap: true, //顶端圆角
            z: 2, //圆环层级，同zindex
          },
          {
            //下层圆环，显示最大值
            type: "bar",
            data: [
              {
                value: 100,
                itemStyle: {
                  color: data.isBig ? 'green' : "red",
                },
              },
            ],
            barGap: "-100%",
            coordinateSystem: "polar",
            roundCap: true,
            z: 1,
          },
          {
            type: "gauge",
            startAngle: 180, //起始角度，同极坐标
            endAngle: 0, //终止角度，同极坐标
            radius: "100%",
            splitNumber: 2,
            max: 1,
            center: ["50%", "57%"],
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
              length: 5,
              distance: 1,
              lineStyle: {
                color: "#eee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: "#ffffff",
              fontSize: 6,
            },
            pointer: {
              show: true,
              length: "50%",
              width: 3,
              offsetCenter: [0, 0],
            },
            itemStyle: {
              color: "#CCCCCC",
            },
            detail: {
              color: "rgba(4, 228, 199, 1)",
              fontSize: 14,
              offsetCenter: [0, 18],
              borderRadius: 8,
            },
            data: [
              {
                value: data.value,
              },
            ],
          },
        ],
      };