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

论坛 期权论坛 脚本     
匿名技术用户   2021-1-7 09:04   682   0

实现效果

实现方式

先说一下标题中提到的使分割线和刻度线与轴线的颜色对应,只需要给分割线和刻度线添加 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"
        }
      }
    }
  ]
}

以上。

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP