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