動態

詳情 返回 返回

echart優化總結 - 動態 詳情

折線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

echarts
user avatar zaotalk 頭像 guochenglong 頭像 jingdongkeji 頭像 chongdianqishi 頭像 6fafa 頭像 leexiaohui1997 頭像 huajianketang 頭像 banana_god 頭像 guixiangyyds 頭像 wszgrcy 頭像 yixiyidong 頭像 kitty-38 頭像
點贊 85 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.