Echarts折線圖如何補全斷點以及如何隱藏斷點的title 做報表的時候,尤其是做圖表的時候時常會碰到某一記錄的值中缺少某個時間段(比如月份或季度)的值,導致圖表顯示殘缺不全,for example: 如果照實顯示的話確實不太美觀(除非貴公司確實需要特別準確的數據除外~),當然我們的客戶是做信托的 ...
Echarts折線圖如何補全斷點以及如何隱藏斷點的title
做報表的時候,尤其是做圖表的時候時常會碰到某一記錄的值中缺少某個時間段(比如月份或季度)的值,導致圖表顯示殘缺不全,for example:
如果照實顯示的話確實不太美觀(除非貴公司確實需要特別準確的數據除外~),當然我們的客戶是做信托的,算錢的系統和時常開會追KPI的時候看報表系統~;給領導寫報告圖表當然不能太另類~\(≧▽≦)/~,遂業務部門的同學要求我們儘可能在數據準確的情況下將圖表做的更美觀些些,...吾以為這個貌似難難滴欸。。。。,怎麼辦。。。。,研究來研究去,之後我們將報表做成了這樣紙>>>
感覺挺好的,不知業務的妹紙是否滿意(✿◡‿◡)
且細看....細看,比如圖中34個月與35個月是沒有數據滴,哈哈,成功!!
一下分享下我的思路:
A>首先要取得所有部門的期限內的所有數據(當然這個過程你需要自己碼代碼獲得一份完整的月份數據,要不然你怎麼知道記錄的斷點位置呢,是不?)
B>然~,整理你的數據,分層是必要的(如果資料庫能按按部門分層月份,幹嘛還要這麼累啊(=@__@=))
C>再~,兩層遍歷,等等乾什麼呢?-->這是要找出斷點,並用統一的mark以標示
(具體就是外層迴圈月份List,然後遍歷所有的按部門歸類的部門的月份找出此部門再哪個期限缺值)
D>然~,看似以上已經找出了斷點了,但試想下如果這些斷點都是以‘—’補全,圖還是會斷啊~~~,怎麼辦;
啊哈 so easy~ 將此斷點補上前後兩個值的平均值不就是一條直線啦,啦啦啦~
E>啦啦啦,搞定\(^o^)/YES! 。。。。,瀏覽器打開頁面~ (⊙﹏⊙)b 為什麼為什麼為什麼還會顯示title呢,
這樣會暴露程式猿的審美····,haw? 官方API搞定....
....=========欲知代碼何解,且聽下回分曉~( ̄▽ ̄~)(~ ̄▽ ̄)~=========....
(明日明日。。。再續)