echarts 折线图曲线图分段用不同颜色显示,Y 轴超过某一数值变色,
echarts 曲线改变颜色例子,x 轴和 y 轴数据可以自己定义,曲线默认显
示黑色(black),400 以上 900 以下显示成金色(gold)。
核心代码
visualMap: {
show: false,
dimension: 1,
pieces: [], //pieces 的值由动态数据决定
outOfRange: {
color: 'black'
}
//上面是按官方文档固定格式,主要是配置样式布局,实际的 x 轴和
y 轴数据可以通过 ajax 在后台取得
//x 轴数据
var datax = ['1 月', '2 月', '3 月', '4 月', '5 月','6 月', '7 月', '8 月', '9
月','10 月']; //模拟动态数据
option.xAxis.data = datax;
//y 轴数据
var datay = [160, 280, 350, 500, 200, 250, 800, 600, 550, 200];
option.series[0].data = datay;
//400 以上,900 以下显示成金色(gold)
option.visualMap.pieces[0] = {gte: 400, lte: 900, color: 'gold'};
折线分条件改变颜色例子效果图