圖表，如何使用數據系列切換線條顏色
[英]Echarts, how to use data series to switch color of line
問題描述
我想使用數據字段來更改特定顏色的線條的顏色。 就像它為1時一樣，它應該是綠色，而當它為2時它應該是黃色。 此代碼段僅更改數據點的顏色，而不更改線的顏色？ 有機會用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
試試這個例子
1）您應該使用正確的尺寸（xAxis，yAxis），有關更多信息，請閱讀文檔
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>
如何點擊echarts上的heatmap系列數據？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.