[筆記] 善用 ECharts 中的 MarkArea 和 MarkLine 來製作出圖表上區域色塊

章節連結

ECharts 中在製作長條圖、折線圖時,往往會需要標示一些色塊區域來代表如「超過警戒」、「涵蓋範圍」… 等意義。這篇筆記下 ECharts 中的 MarkArea 和 MarkLine 的用法和注意事項。
apache echarts logo


說明

1. markArea 是區域的概念,所以其資料來源會是一個二維的陣列 [[{A},{B}],[{C},{D}],…],裡頭會包含一個起始點和結束點物件
2. markLine 會依附在 series 的某一組資料下。在 markLine 的設定中,你可以在一組資料下放置多條線。不過預設情況下,僅有靠近資料的 markLine 會顯示。

程式碼


參考資料

1. lineChart的markLine与markArea案例
2. echarts 折线图 markLine 不显示的解决方案

按讚加入粉絲團

延伸閱讀