echarts指标盘属性概括

echarts指标盘属性概括

代码

有模拟数据可以直接使用

const options = {
  animation: true,
  title: {
    top: "35%",
    left: "center",
    // text: "单元测试覆盖度", // 主标题
    itemGap: 15,
    textStyle: {
      // 主标题样式
      color: "#666666",
      fontSize: 16,
      fontWeight: 400,
      fontFamily: "HYXJ",
    },
    subtext: '123' + "%", // 副标题
    subtextStyle: {
      // 副标题样式
      color: "#262626",
      fontSize: 45,
      fontWeight: "bold",
      fontFamily: "HYXJ",
    },
  },
  series: [
    {
      type: "gauge", // 仪表盘图
      startAngle: 220,//左环圈深度
      endAngle: 320,  //右环圈深度
      min: 0,
      max: 100,    //进度最大值
      radius: "100%",
      center: ["50%", "50%"],
      progress: {
        // 进度环
        roundCap: "true",
        show: true,
        width: 15,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                //进度环的渐变色
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(96, 150, 224, 1)", // 100% 处的颜色
              },
            ],
          },
        },
      },
      axisLine: {
        // 背景环
        roundCap: "true",
        lineStyle: {
          width: 15,
          color: [
            // [0, "rgba(112, 137, 171, 0.10)"],
            [1, "#123"],
          ],
        },
      },
      pointer: { show: false },   //是否显示指针
      axisTick: { show: false },   //是否显示小刻度
      splitLine: { show: false },   //是否显示大刻度
      axisLabel: { show: false },    //是否显示刻度数值
      detail: { show: false },      //是否显示百分比
      data: [
        {
          value: 50,
          name: 'SCORE',
          title: {
            offsetCenter: ['0%', '80%']
          },
        }
      ]
    }
  ]
};

效果图