描述: 图中有4个序列,序列1和序列2在同一个x轴下,显示不同的颜色.(如,在-40到-30,序列一是红色,而序列2是黑色)
关键: VisualMap中的seriesIndex属性(根据不同的系列,制定不同的颜色规则).
下面是代码,可以直接复制到 echart实例 中进行调试
var symbolSize = 20;
var data = [[0, 10.1], [-10, 10.001], [-20, 10.0001], [-30, 10.01], [-40, 10.001]];
var data2 = [[0, 20], [-10, 20], [-20, 20], [-30, 20], [-50, 20]];
var data3 = [[0, 30], [-10, 30], [-20, 30], [-30, 30], [-40, 30]];
var data4 = [[0, 40], [-10, 40], [-20, 40], [-30, 40], [-40, 40]];
var points = [];option = {title: {text: 'Click to Add Points'},tooltip: {formatter: function (params) {var data = params.data || [0, 0];return data[0].toFixed(2) + ', ' + data[1].toFixed(2);}},grid: {left: '5%',right: '4%',bottom: '3%',containLabel: true},xAxis: {min: -60,max: 20,type: 'value',axisLine: {onZero: false}},yAxis: {show:false,min: 0,max: 40,type: 'value',axisLine: {onZero: false}},visualMap:[{show: false,dimension: 0,seriesIndex:0,pieces:[{gte:-50,lt:-30,color:'red'},{gte:-30,lt:-10,color:'blue'}]},{show:false,dimension:0,seriesIndex:1,pieces:[{gte:-50,lt:-30,color:'black'},{gte:-30,lt:-10,color:'#aff'}]}],series: [{id: 'a',type: 'line',lineStyle:{width:20},smooth: true,symbolSize: symbolSize,data: data},{id: 'b',type: 'line',lineStyle:{width:20},smooth: true,symbolSize: symbolSize,data: data2},{id: 'c',type: 'line',smooth: true,symbolSize: symbolSize,data: data3,markLine:{data:[{symbol: 'none',label: {normal: {position: 'start',formatter: '序列2'}},lineStyle:{color:'black'},yAxis: '20'}]}},{id: 'd',type: 'line',smooth: true,symbolSize: symbolSize,data: data4,markPoint:{data:[{value:'标记点1',xAxis:-35, yAxis:10},{value:'标记点2',xAxis:-30, yAxis:10,color:'black'},]},markLine:{data:[{symbol: 'none',label: {normal: {position: 'start',formatter: '序列1'}},lineStyle:{color:'black'},yAxis: '10'}]}},]
};
)
