描述: 圖中有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'}]}},]
};
總結
以上是生活随笔為你收集整理的echarts --- 多折线图按段显示颜色规则订制的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
