echarts 疊狀條形圖, Y軸顯示百分比, 每一個之上顯示總數

  以前羣裏的小夥伴他們公司的一個需求, Y軸顯示百分比, 每條柱子上都有總數

  以前使用 echarts 主要就是去官網扒個實例, 改下數據, 深刻點的也只是才接觸哈, 百度了數次才勉強作出來.

  其中遇到了幾個問題, 好比, option.series.data 的數據, 應該怎麼傳, 以前一維數組就能知足工做需求, 也沒有深刻研究過, 這個須要須要二位數組, 每一個數組的第一個元素的值對於的是 X 軸, 第二個數值, 若是是 數據(不是百分比)的話, Y 軸作不到顯示百分比(至少我作不到), 也就是說, 這個數組須要三個元素, 第一個元素對應 X 軸, 第二個元素是百分比, 第三個元素是數值.

  這個數據結構就遇到了一個問題, tooltip 顯示的是第二個值, 但是需求是顯示具體數值, 經過百度和文檔找到了一個解決方法, tooltip.formatter 給它賦值個方法, 它獲取的參數是包含了當前柱子上全部數據, 由於我這個是疊狀圖, 它是個數組, 別的我沒試過, 因此經過拼串的方式來動態顯示數據, 雖然不優雅, 不過總算實現了效果.

  每一個之上顯示總數, 只須要給 option.series 多添加一個數組, data 中的元素都爲 0 便可, 這樣就不會又高度, 在給 label.normal.formatter 賦值一個方法, 它接收的參數中有當前 X 軸的索引, 經過循環動態計算總數.

  由於我能力有限, 其中還有不少不完美的地方, 好比, 我想經過父元素輸入 name 和 週一至週日的數據, 就能動態改變圖形, 這時候就須要計算天天所佔當天的比例, 但是我只會雙重循環, 求大佬指點怎麼才能優化.

代碼地址: github.com/mingju0421/…

第一次寫😥