echarts --- 多折线图按段显示颜色规则订制

描述: 图中有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 --- 多折线图按段显示颜色规则订制相关推荐

echarts折线图各段设置不同颜色
echarts折线图各段设置不同颜色可以通过设置 visualMap 属性,来控制不同线段的颜色: 文档连接: https://echarts.apache.org/zh/option.html#v ...
echarts 折线图线条粗细_ECharts 折线图设置平滑和颜色
设置折线图平滑以及线条颜色可以到 ECharts页面把下面内容替换到里面看实际效果或调整各个属性(替换series部分) series : [ { name:'最高气温', type:'line' ...
echarts formatter_手把手教你玩转echarts(二)折线图
茫茫人海中与你相遇相信未来的你不会很差作者:婷酱Yaaa 来源:https://juejin.im/post/5f0292d35188252e5a5dbed0 前言哈喽,everybody,我又 ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录最后样式代码 <!DOCTYPE html> <html style="height: 100%">&l ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts动态折线图拉扯变形问题
echarts动态折线图拉扯变形问题在使用echarts折线图做动态数据展示时,发现一个bug 当折线图的一个数值较高点紧挨着一个数值为零的点,guyong时图形会被拉扯,应该是echart的bu ...
使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑小帅小白,也能改变浪花的方向,公众号:51reboot运维开发介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...

echarts --- 多折线图按段显示颜色规则订制

echarts --- 多折线图按段显示颜色规则订制相关推荐

最新文章

热门文章