图表，如何使用数据系列切换线条颜色
[英]Echarts, how to use data series to switch color of line
问题描述
I want to use the data field to change the color of the line for a certain pice. 
我想使用数据字段来更改特定颜色的线条的颜色。 Like when it is 1, it should be green, and when it is 2 it should be yellow. 就像它为1时一样，它应该是绿色，而当它为2时它应该是黄色。 This snippet is only changing the color of the data point, not the line? 此代码段仅更改数据点的颜色，而不更改线的颜色？ Is there any chance to archive that with echarts? 有机会用echarts存档吗？
<html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script> </head> <body> <div id="main_chart" style="width: 1200px;height:600px;"></div> <script type="text/javascript"> // based on prepared DOM, initialize echarts instance var myChart = echarts.init(document.getElementById('main_chart')); var app = {}; option = null; option = { xAxis: { type: 'category', data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11'] }, yAxis: { type: 'value' }, visualMap: { show: false, dimension: 2, pieces: [ { lt: 2, gt: 0, color: 'green' }, { gte: 2, color: 'red' } ] }, series: [{ data: [[1,37,1],[2,36,1],[3,36,2]], type: 'line', areaStyle: {} }] }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
1 个解决方案
解决方案1
3 2018-10-26 19:57:31
Try this example 试试这个例子
1) You should use the right dimension (xAxis, yAxis), for more info read documentation 1）您应该使用正确的尺寸（xAxis，yAxis），有关更多信息，请阅读文档
2) If you want to color full area, please remove color: "aquamarine" from areaStyle, then it will be colorizate by pieces configs 2）如果要对整个区域进行着色，请从areaStyle中删除颜色：“海蓝宝石”，然后将其按部件配置进行着色
<html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script> </head> <body> <div id="main_chart" style="width: 1200px;height:600px;"></div> <script type="text/javascript"> // based on prepared DOM, initialize echarts instance var myChart = echarts.init(document.getElementById('main_chart')); var app = {}; option = null; option = { xAxis: { type: 'category', data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11'] }, yAxis: { type: 'value' }, visualMap: { show: false, dimension: 0, pieces: [ { lt: 2, gt: 0, color: 'green' }, { gt: 2, lt: 3, color: 'red' }, { gte: 3, color: 'yellow' } ] }, series: [{ data: [[1,37,1],[2,36,1],[3,36,2],[4,38,2]], type: 'line', areaStyle: {color: "aquamarine"} }] }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.