[筆記] Echarts 利用 visualMap 讓折線圖實現分段不同顏色

ECharts 中的 visualMap,可以讓折線圖用較為輕易的方式,呈現「分段不同顏色」的數據。你從頭到尾的 dataSet 都僅需要一組,其餘的就交給 visualMap 負責。不過,這個參數也是很容易出現錯誤的地方,需要詳加注意。
apache echarts logo


關鍵

1. visualMap 中的 pieces,決定了分段顯示的邏輯。gt 為起始值;lte 為終值,然後必須大於 gt;color 為顏色色碼
2. ECharts 的 DOM 是需要預先給定寬高的 px,否則會出現錯誤無法顯示

程式碼


參考資料

1. Echarts折线图分段用不同颜色显示
2. echarts折线图分段用不同颜色显示

按讚加入粉絲團

延伸閱讀