? ? 近期做了兩個(gè)移動(dòng)BI項(xiàng)目柒爵，大量用到了Echarts來繪制圖表役电，中間碰到一些實(shí)現(xiàn)上的問題，或者針對(duì)移動(dòng)優(yōu)化的經(jīng)驗(yàn)棉胀，記錄一下法瑟。
1，按需加載
????移動(dòng)端相對(duì)PC唁奢，是一個(gè)更加性能敏感的環(huán)境瓢谢，所以對(duì)于資源請(qǐng)求的頻率和大小、動(dòng)畫和計(jì)算的消耗會(huì)要求更高驮瞧。所以第一點(diǎn)就是氓扛，根據(jù)業(yè)務(wù)需要，按需加載Echarts組件论笔，而不是整體引入采郎。這個(gè)沒什么好贅述的，可參考官方文檔
2狂魔，使用SVG渲染圖形
????Echarts在v4.0版本蒜埋，在默認(rèn)canvas繪制的基礎(chǔ)上，新增了svg的圖形渲染方式最楷。在不少場景中整份，SVG 具有重要的優(yōu)勢：它的內(nèi)存占用更低（這對(duì)移動(dòng)端尤其重要）待错、渲染性能略高、并且用戶使用瀏覽器內(nèi)置的縮放功能時(shí)不會(huì)模糊烈评。當(dāng)然canvas的優(yōu)勢在于更復(fù)雜的圖形或者炫酷的動(dòng)效火俄，這個(gè)主要還是需要根據(jù)業(yè)務(wù)場景來做選擇。大部分情況來說讲冠，移動(dòng)端用svg渲染瓜客，顯然是更合理的選擇。具體可參考官方說明竿开。
? ? 但是谱仪，我自己項(xiàng)目在做整體替換svg渲染模式時(shí)，出現(xiàn)了一個(gè)小問題否彩，那就是tooltip組件的背景色設(shè)置不生效了疯攒。找了文檔并未發(fā)現(xiàn)什么說明添祸，時(shí)間緊張于是又切回了canvas模式箫章。
3巡莹，移動(dòng)端字號(hào)設(shè)置
? ? 因?yàn)橐苿?dòng)端尺寸的限制成畦，圖表有時(shí)候會(huì)很緊湊，也就存在更小文本的需求掺炭。這里主要說的是，因?yàn)閳D形都是canvas或者svg來繪制的，所以悬而，字號(hào)的設(shè)置不受瀏覽器的最小字號(hào)限制。我們可以隨意設(shè)置更符合界面顯示需要的字號(hào)锭汛。
4笨奠，tooltip的顯示位置優(yōu)化
? ? tooltip默認(rèn)是出現(xiàn)在用戶交互的數(shù)據(jù)點(diǎn)附近，這在PC端并不會(huì)產(chǎn)生什么問題唤殴。但移動(dòng)端交互是手指觸摸產(chǎn)生的般婆，在觸摸點(diǎn)展示會(huì)導(dǎo)致數(shù)據(jù)展示框會(huì)被手指擋住很大一部分，用戶無法看全朵逝。因此基于良好的交互體驗(yàn)的前提下蔚袍，應(yīng)該動(dòng)態(tài)計(jì)算tooltip的position，使其始終在觸摸位置的左上角顯示配名；
? ? 如下代碼啤咽，建議是top值其實(shí)可以不用動(dòng)態(tài)，讓其始終在圖形上方即可渠脉；left值根據(jù)當(dāng)前觸摸交互點(diǎn)的位置宇整，減去一定的值就行，這個(gè)具體數(shù)值根據(jù)你圖形的tooltip寬度芋膘，做一些相應(yīng)的調(diào)整就行鳞青。
? ? 對(duì)了霸饲，為了防止圖形溢出，應(yīng)該設(shè)置tooltip的confine屬性為true
position: function(pos) {
????var? obj = {
?????????top: 10,
?????????left: pos[0] - 130
?????}
?????return obj;
?}
5臂拓，折線圖-數(shù)軸最小值的優(yōu)化建議
? ? value類型的Y軸厚脉，如果數(shù)據(jù)整體差異較小，默認(rèn)用0作為最小值的話埃儿，整體數(shù)據(jù)的波動(dòng)性圖形上就體現(xiàn)不太出來器仗。因此，基于用戶體驗(yàn)考慮童番，應(yīng)該動(dòng)態(tài)計(jì)算數(shù)據(jù)最小值作為min屬性的值精钮，以便圖形能夠更好的體現(xiàn)波動(dòng)性。
6剃斧，多圖形重疊交叉圖表的優(yōu)化
? ? 單個(gè)圖例中轨香，如果存在多個(gè)series數(shù)據(jù)項(xiàng)，則存在圖形交叉疊加的可能性幼东。因此臂容，也是基于用戶體驗(yàn)的考慮，應(yīng)該設(shè)置圖形的層級(jí)根蟹，讓更重要的數(shù)據(jù)展示在最上方脓杉，避免覆蓋〖虼可通過series中的z屬性來設(shè)置優(yōu)先級(jí)球散，數(shù)值越大優(yōu)先級(jí)越高；
7散庶，tooltip默認(rèn)自動(dòng)顯示
? ? tooltip默認(rèn)是基于用戶交互蕉堰，才會(huì)展示的；但根據(jù)不同業(yè)務(wù)需要悲龟，可能存在圖形渲染完畢就展示tooltip的需求屋讶。這個(gè)echarts也有提供相應(yīng)的api的。通過圖形實(shí)例的dispatchActiopn方法须教，可以手動(dòng)觸發(fā)tooltip的顯示皿渗。
? ? 這里有個(gè)要注意的點(diǎn)，當(dāng)我們獲取到圖形數(shù)據(jù)轻腺，然后通過setOption把數(shù)據(jù)傳入echart實(shí)例后乐疆，如果同步執(zhí)行上述的方法，可能無法成功约计。因?yàn)榇藭r(shí)option更新后诀拭，圖形還未渲染完成，會(huì)導(dǎo)致tooltip無法成功顯示煤蚌。因?yàn)?b>建議在setOption之后耕挨，通過setTimeout異步執(zhí)行上述方法细卧。
8，同一圖例展示不同數(shù)據(jù)項(xiàng)的問題
? ? 同一個(gè)圖例筒占，基于不同的用戶選擇贪庙，渲染不同的數(shù)據(jù)。如果圖例數(shù)據(jù)存在數(shù)據(jù)項(xiàng)的變化翰苫，直接setOption會(huì)導(dǎo)致數(shù)據(jù)殘留止邮。因?yàn)閑charts修改option，默認(rèn)是數(shù)據(jù)合并狀態(tài)的奏窑。因此如果要徹底更新option导披，需要在setOption時(shí)，設(shè)置第二個(gè)參數(shù)為true埃唯。
