【echarts仪表盘改写】使分割线和刻度线与轴线的颜色对应

实现效果

实现方式

先说一下标题中提到的使分割线和刻度线与轴线的颜色对应，只需要给分割线和刻度线添加 lineStyle 属性设置color为auto即可，具体代码见下：

options: {
  tooltip: {
    formatter: "{b} : {c}%"
  },
  series: [
    {
      type: "gauge",
      radius: "90%",
      detail: {
          formatter: "{value}",
          offsetCenter:[0, '58%']
      },
      data: [{ value: 0.00, name: "安全度" }],
      // 仪表盘轴线(轮廓线)相关配置。
      axisLine: {
        show: true, // 是否显示仪表盘轴线(轮廓线),默认true
        lineStyle: {
          color: [[0.2, "#86B379"], [0.8, "#68A54A"], [1, "#408829"]],
          width: 8
        }
      },
      // 分割线
      splitLine: { 
        show: true,
        length: 15,
        lineStyle: {
          color: "auto"
        }
      },
      // 刻度线
      axisTick: {
        show: true,
        length: 13,
        splitNumber: 10,
        lineStyle: {
          color: "auto"
        }
      }
    }
  ]
}

以上。