Stories

Detail Return Return

echart優化總結 - Stories Detail

折線ecahrt通用優化配置

1.滾動條,tooltip(標懸浮在圖例時展示的tooltip文案樣式)
image.png

2.橫座標軸的處理, 第一個座標和最後一個座標位置往裏面縮進, 不要被截斷
image.png

3.y軸的最大值最小值自適應(按需選擇):
image.png
image.png
image.png

4.折線不帶原點注意處理只有一個橫座標的情況
image.png
image.png

熱力圖ecahrt通用優化配置

1.熱力圖的最大最小值(決定熱力圖的顏色是不是太深,最大值*1.1後要處理全0的情況)
image.png
image.png

柱狀圖ecahrt

1.柱狀圖的柱子寬度和間距優化

拖拽ecahrt的zoom控制,獲取當前的x軸段(一定用round四捨五入,而不是ceil/floor)

image.png
image.png

坑點1:橫座標的換行破環了ecahrt的自適應

解決方案:數據先用\n換行好再傳遞給ecahrt渲染, 而不是在echart內部format處理, 會破壞ecahrt自帶的自適應橫座標的間隔(interval中間消失幾個橫座標)

代碼碎片:
數據先用\n換行處理:
image.png
image.png
image.png

坑點2:親親貴成功後清空橫縱座標數據, 否則圖例疊加

image.png

user avatar zaotalk Avatar guochenglong Avatar jingdongkeji Avatar chongdianqishi Avatar 6fafa Avatar leexiaohui1997 Avatar huajianketang Avatar banana_god Avatar guixiangyyds Avatar wszgrcy Avatar yixiyidong Avatar kitty-38 Avatar
Favorites 85 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.