如何基於 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

最後

有更好思路或想法的，請聯繫我，很是歡迎找我探討喲（✨🌜）。