echarts轴数值分割线多色

前言

刻度线分割线不同颜色表示警戒线

固定分割线数量

options.yAxis.splitNumber设置该属性y轴的数值展示数量会固定设置值，故分割线固定

let option = {
	yAxis: {
    	type: 'value',
    	// 分割七段
    	splitNumber: 7,
  	},
}

固定数量设置分割线颜色

yAxis.splitLine.lineStyle.color

分隔线颜色，可以设置成单个颜色。

也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。

设置数组长度同分割端长度一致，通过index去设置特定颜色

let option = {
	yAxis: {
	    type: 'value',
	    // 分割七段
	    splitNumber: 7,
	    splitLine: {
			lineStyle: {
				color: ['#ccc', '#ccc', '#ccc', '#ccc', '#ccc', 'blue', 'green', 'red']
			}
	    }
  	},
}

设置数值轴颜色同分割线一致

使用formatter回调函数渲染自定义内容，接收两个参数value和index

value就是数值，index故第几个刻度

使用rich设置单独的颜色，rich教程，类似css选择器

{red|content} 表示创建一个red的选择器，他展示的内容是content

通过rich也可以设置图片图标,可自行探索

let option = {
	yAxis: {
	    type: 'value',
	    // 分割七段
	    splitNumber: 7,
	    splitLine: {
			lineStyle: {
				color: ['#ccc', '#ccc', '#ccc', '#ccc', '#ccc', 'blue', 'green', 'red']
			}
	    },
		axisLabel: {
			color: '#333',
			formatter: (v,i) => {
				let map = {
					7:`{red|警告${v}}`,
					6:`{green|警戒${v}}`,
					5:`{blue|预警${v}}`,
				}
				return map[i] ?? v;
			},
			rich: {
				red: {
					color: 'red'
				},
				green: {
					color: 'green'
				},
				blue: {
					color: 'blue'
				}
			}
		},
  	},
}

完整代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#333',
      formatter: (v,i) => {
        let map = {
          7:`{red|警告${v}}`,
          6:`{green|警戒${v}}`,
          5:`{blue|预警${v}}`,
        }
        return map[i] ?? v;
      },
      rich: {
        red: {
          color: 'red'
        },
        green: {
          color: 'green'
        },
        blue: {
          color: 'blue'
        }
      }
    },
    // 分割七段
    splitNumber: 7,
    splitLine: {
      lineStyle: {
        color: ['#ccc', '#ccc', '#ccc', '#ccc', '#ccc', 'blue', 'green', 'red']
      }
    }
  },
  color:['#9671fe'],
  backgroundColor:"#fff",
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth:'15%'
    },
  ]
};