如何基於 echarts 實現區間柱狀圖（包括橫向）？

目錄

• 需求
• 借鑑 echarts 的 demo
• 最終實現思路
  • 實現效果
• 遇到的問題：
• 程式碼對映
• 原始碼
• 最後

始終如一

需求

需要利用 echarts 實現區間柱狀圖，效果如下：

效果來源於：g2-柱狀圖

借鑑 echarts 的 demo

1. 柱狀圖-深圳月最低生活費組成
2. 柱狀圖-階梯瀑布圖

demo 區間實現思路（視覺欺騙）

1. 通過 bar 的 series 的 stack （堆疊）屬性，實現柱子堆疊。
2. 再通過 bar 的 series 的 itemStyle 設定作為輔助的柱子隱藏（透明度為 0）。

demo 不滿足的點

1. bar 的 label 顯示：未區間
2. bar 的 tooltip 顯示：未區間
3. 不支援多資料項

最終實現思路

1. 通過 bar 的 series 的 stack （堆疊）屬性，實現柱子堆疊。
2. 通過 bar 的 series 的 itemStyle 設定作為輔助的柱子隱藏（透明度為 0）。
3. 通過 bar 的 series 的 markPoint 用於顯示區間範圍的最小值。
4. 通過將區間資料放入 data, 處理 tooltip 顯示區間數值。
5. 考慮到區間[負值，正值]的情況，需要再利用 series 的一個 item 來顯示負值的部分。

實現效果

1. 基於最終思路實現效果

2. 最終思路縮減版-沒處理負值的效果，即沒有最終實現思路的第 5 步

3. 基礎思路實現 - 利用一個新的 series item 的 label 顯示區間範圍的最小值。
   

4. name + 值為時間 - 利用 type: custom 自定義實現效果
   

遇到的問題：

1. bar stack 堆疊屬性 遇上 軸 type："time" 時會失效，因此有了 其他方案實現2 探索
2. 提供的區間資料含 負值 時，也會異常，無法正常顯示負值的柱子（需要再特殊處理）。如溫度區間，效果來源highcharts-columnrange

程式碼對映

1. 最終思路實現：demo1-bar-range-negative.html
2. 最終思路縮減版實現：demo1-bar-range-optimize.html
3. 基礎思路實現：demo1-bar-range.html
4. name + 值為時間：demo2-custom-range-status.html

原始碼

實踐程式碼哦 ?

github

最後

有更好思路或想法的，請聯絡我，非常歡迎找我探討喲（✨?）。