Echarts 五彩折線圖
[英]Echarts multicolored line chart
問題描述
是否可以用不同的 colors 繪制 1 條線來制作echarts折線圖？ 例如，如果值 <= 0 顏色為紅色，如果 > 0 顏色為綠色？
2 個解決方案
解決方案1
1 2022-04-21 09:28:11
Echarts 有一個名為visualMap的選項，它可以完全滿足您的需求。
- 視覺地圖文檔
- visualMap 代碼示例（我選擇了最合適的示例，但還有其他示例）
在您的情況下，您將擁有類似的東西：
visualMap: {
show: false, // Wether to show the legend or not (default: true)
pieces: [
{
min: -9999, // Normally not needed but doesn't work without that (1)
max: 0,
color: '#F35E07' // Red
},
{
min: 0,
color: '#93CE07' // Green
},
],
outOfRange: {
color: '#F35E07'
}
},
它會把你的線分成兩部分：
- below 0 (written
max: 0): 紅色 - 高於 0（寫為
min: 0）：綠色
此外， visualMap選項提供了更多功能：您可以擁有 2 個以上的部分（如本 例中），具有平滑的漸變而不是部分（使用type: 'continuous' ，如本例中），以及許多其他東西在其 文檔中進行了解釋。
(1) 關於錯誤的說明：通常如果您不指定
min或max，則將其設置為-Infinity或Infinity。 但是在這里你必須在兩個部分之一中指定min和max（我不知道為什么）。
解決方案2
0 2022-04-14 15:46:40
如果您考慮繪制兩個圖表並使用'-'忽略其中的某些點，則可以獲得與彩色折線圖相同的視覺效果。
盡管該文檔沒有提供如何為折線圖的特定部分着色的直接示例，但它實際上指導了如何使用空數據，
當有空元素時，折線圖會忽略那個點而不經過它——空元素不會被接下來的點連接起來。 在ECharts中，我們用
'-'來表示null條數據，適用於其他系列的數據。
考慮到這一點，通過疊加兩個相等的圖表並清空一些點，您實際上可以構建一個多彩圖表的邏輯。 請注意，如果您可以編程方式執行此操作會更好，這樣您就可以改變要着色的線段的數量。
var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { xAxis: {}, yAxis: {}, series: [ { data: [ [-20, -20], [-10, 30], [0, 40], ['-', '-'], ['-', '-'] ], type: 'line', lineStyle: { color: "red" } }, { data: [ ['-', '-'], ['-', '-'], [0, 40], [10, 100], [20, 60] ], type: 'line', lineStyle: { color: "green" } } ] }; option && myChart.setOption(option);
.as-console-wrapper { max-heght: 100% !important }
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script> <body> <div id="main" style="width: 225px;height:225px;"></div> </body>
Echarts 多折線圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.