1. 為什么我在項(xiàng)目里繞不開 ECharts上個(gè)月接到一個(gè)數(shù)據(jù)可視化大屏的需求甲方要求把業(yè)務(wù)數(shù)據(jù)里的訂單趨勢(shì)、地區(qū)分布、品類占比全部擺到一張大屏上。剛開始我還想著自己用 SVG 一塊塊畫結(jié)果越畫越不對(duì)勁光是折線圖的坐標(biāo)軸刻度、柱狀圖的 hover 提示、餅圖標(biāo)簽線的對(duì)齊就夠我折騰一整周。后來果斷換回 ECharts半天時(shí)間把三種圖表全部搭完剩下的時(shí)間全花在調(diào)樣式和對(duì)接接口上。這個(gè)場(chǎng)景你應(yīng)該不陌生。ECharts 幾乎是目前前端做圖表繞不開的庫(kù)Apache 基金會(huì)頂級(jí)項(xiàng)目底層基于 Canvas圖表類型覆蓋折線、柱狀、餅圖、地圖、雷達(dá)、?；㈥P(guān)系圖等等交互和動(dòng)畫開箱即用。如果你要處理數(shù)據(jù)可視化尤其是后臺(tái)管理系統(tǒng)、數(shù)據(jù)大屏、報(bào)表中心這類需求ECharts 基本是首選。這篇內(nèi)容我打算換個(gè)講法不按官網(wǎng)文檔從 option 的每個(gè)字段過一遍而是圍繞我在真實(shí)項(xiàng)目里經(jīng)常被問到的幾個(gè)點(diǎn)展開柱狀圖、折線圖、餅圖的配置內(nèi)核地圖數(shù)據(jù)怎么加載大屏項(xiàng)目里的實(shí)戰(zhàn)姿勢(shì)還有幾個(gè)特別隱蔽的坑比如 pxtorem 對(duì) ECharts 不生效、tooltip 換行、labelLine 小圓點(diǎn)偏移。不管你是剛接觸圖表的新手還是已經(jīng)被 ECharts 坑過幾次的開發(fā)者這篇文章應(yīng)該都能給你一些能直接抄作業(yè)的東西。2. 柱狀圖、折線圖、餅圖的配置內(nèi)核看透 series 和坐標(biāo)軸的關(guān)系很多入門教程都會(huì)把柱狀圖繪制當(dāng)作第一關(guān)確實(shí)ECharts 的柱狀圖是理解整個(gè)配置體系的鑰匙。但如果你只是照著示例代碼粘貼不理解 series、xAxis、yAxis、grid 這幾個(gè)概念之間怎么配合后面遇到折線圖 x 軸刻度錯(cuò)位、餅圖 labelLine 偏移這類問題就會(huì)完全摸不著頭腦。我先用最基礎(chǔ)的三類圖把這套內(nèi)核講透。2.1 先搞懂 series、xAxis、yAxis 和 grid 是怎么協(xié)作的一張 ECharts 圖表本質(zhì)上可以拆成兩部分坐標(biāo)系和圖形。坐標(biāo)系由 xAxisx 軸、yAxisy 軸、grid網(wǎng)格區(qū)域組成圖形則由 series 定義。柱狀圖和折線圖都跑在直角坐標(biāo)系上餅圖則完全不需要坐標(biāo)系它自己有另一個(gè)維度?？匆粋€(gè)最基礎(chǔ)的柱狀圖配置const option { grid: { left: 3%, right: 4%, bottom: 3%, containLabel: true }, xAxis: { type: category, data: [周一, 周二, 周三, 周四, 周五] }, yAxis: { type: value }, series: [{ type: bar, data: [120, 200, 150, 80, 170] }] };這里最關(guān)鍵的一點(diǎn)是xAxis.data和series.data是通過數(shù)組下標(biāo)一一對(duì)應(yīng)的。也就是說x 軸第一個(gè)分類對(duì)應(yīng) series 里第一個(gè)數(shù)值第二個(gè)分類對(duì)應(yīng)第二個(gè)數(shù)值以此類推。這個(gè)對(duì)應(yīng)關(guān)系聽起來簡(jiǎn)單卻是很多刻度錯(cuò)位問題的根源——當(dāng)你動(dòng)態(tài)更新數(shù)據(jù)時(shí)如果只改了 series.data 而忘了同步 xAxis.data圖表不會(huì)報(bào)錯(cuò)但顯示的內(nèi)容已經(jīng)全錯(cuò)了。grid的作用很多人容易忽略。它控制的是坐標(biāo)系在整個(gè) canvas 里的位置和大小。containLabel: true是我建議每個(gè)項(xiàng)目都加上的配置它的含義是讓軸刻度標(biāo)簽也包含在 grid 范圍內(nèi)防止左側(cè)的數(shù)值標(biāo)簽被截?cái)?。如果不加有時(shí)候 y 軸的刻度文字會(huì)超出容器邊界看起來就像被切了一刀。series 才是圖表的核心它決定了圖形類型和視覺樣式。ECharts 支持一個(gè) option 里放多個(gè) series這就實(shí)現(xiàn)了組合圖。比如一個(gè)柱狀圖加一個(gè)折線圖只需要在 series 數(shù)組里放兩個(gè)對(duì)象一個(gè)type: bar一個(gè)type: line它們可以共用同一套 xAxis 和 yAxis。做雙 y 軸圖表時(shí)還可以給某個(gè) series 指定單獨(dú)的yAxisIndex: 1然后在 yAxis 數(shù)組里配置第二個(gè)軸。理解了這套協(xié)作邏輯組合圖、雙軸圖就不在話下了。2.2 折線圖 x 軸刻度不齊、刻度擁擠怎么調(diào)折線圖的 x 軸刻度問題我?guī)缀趺扛粢欢螘r(shí)間就會(huì)被問一次。熱搜詞里也有echarts折線圖x軸刻度說明這是高頻痛點(diǎn)。常見的有兩種表現(xiàn)一是數(shù)據(jù)點(diǎn)只有幾個(gè)但 x 軸默認(rèn)從 0 開始導(dǎo)致折線沒有緊貼 y 軸二是時(shí)間跨度大刻度標(biāo)簽擠成一團(tuán)。第一種情況幾乎都是boundaryGap在作怪。柱狀圖的 x 軸分類軸默認(rèn)boundaryGap: true意思是柱子和 y 軸之間留有空隙看起來更美觀。但折線圖通常希望第一個(gè)點(diǎn)和 y 軸對(duì)齊或者至少靠近 y 軸這時(shí)候需要手動(dòng)設(shè)置xAxis: { type: category, boundaryGap: false, data: [周一, 周二, 周三, 周四, 周五] }boundaryGap: false會(huì)讓第一個(gè)數(shù)據(jù)點(diǎn)落在 x 軸起點(diǎn)位置折線從邊緣開始延伸視覺上更貼合趨勢(shì)的感覺。第二種刻度擁擠的問題發(fā)生在數(shù)據(jù)量大的時(shí)候。比如你展示一年 365 天的訪問量ECharts 會(huì)嘗試把所有日期都顯示在 x 軸上結(jié)果標(biāo)簽疊在一起變成一坨黑色。解決辦法有幾種xAxis: { type: category, data: dates, axisLabel: { interval: 13, // 每隔 13 個(gè)刻度顯示一個(gè)標(biāo)簽 rotate: 30, // 或者旋轉(zhuǎn) 30 度 hideOverlap: true // 自動(dòng)隱藏重疊標(biāo)簽 } }interval可以填數(shù)字表示每隔幾個(gè)標(biāo)簽顯示一個(gè)也可以填一個(gè)函數(shù)根據(jù)索引決定是否顯示。rotate適合標(biāo)簽文字較長(zhǎng)的情況旋轉(zhuǎn)后能避免擠壓。hideOverlap是 ECharts 5 提供的自動(dòng)隱藏能力標(biāo)簽重疊時(shí)自動(dòng)丟掉一部分適合數(shù)據(jù)量不確定的動(dòng)態(tài)場(chǎng)景。我個(gè)人的習(xí)慣是數(shù)據(jù)量在 10 個(gè)以內(nèi)不做處理超過 20 個(gè)優(yōu)先用interval配合hideOverlap超過 100 個(gè)就不建議用 category 軸展示全部了考慮聚合或 sampling。折線圖還有一個(gè)容易踩的坑是smooth: true之后數(shù)據(jù)極小值附近會(huì)出現(xiàn)過沖曲線看起來超出了實(shí)際數(shù)值范圍。這不是 bug是貝塞爾曲線的正常表現(xiàn)如果業(yè)務(wù)不允許這種情況把smooth改成false或者用smoothMonotone: x限制單調(diào)性。2.3 餅圖 labelLine 末尾小圓點(diǎn)偏移的問題根因在 label 和 labelLine 的配合餅圖的坑和柱狀圖、折線圖完全不同它沒有坐標(biāo)軸全靠series里的label和labelLine控制標(biāo)簽。熱搜詞里echarts 餅圖 labelline 末尾小圓點(diǎn)偏移我猜大概率是下面這個(gè)場(chǎng)景餅圖的引導(dǎo)線末端帶一個(gè)小圓點(diǎn)但圓點(diǎn)和引導(dǎo)線不居中對(duì)齊或者引導(dǎo)線和文字之間的距離忽大忽小。其實(shí)偏移這個(gè)說法根源通常不是小圓點(diǎn)本身而是 label 的定位方式。ECharts 餅圖的 label 有幾種位置outside外側(cè)、inside內(nèi)部、center中心。當(dāng) label 在外部時(shí)labelLine 負(fù)責(zé)連接扇區(qū)和文字。文字默認(rèn)是左對(duì)齊或右對(duì)齊取決于它在餅圖的哪一側(cè)。如果你的 label 內(nèi)容換行了或者 label 里設(shè)置了padding、lineHeight文字區(qū)域和 labelLine 的錨點(diǎn)就對(duì)不上了視覺上就像小圓點(diǎn)偏移了。我常用的處理方案是這樣series: [{ type: pie, data: pieData, label: { alignTo: labelLine, formatter: function (params) { return params.name \n params.value; }, lineHeight: 20 }, labelLine: { length: 12, length2: 12, smooth: true } }]alignTo: labelLine會(huì)把 label 整體對(duì)齊到引導(dǎo)線末端這樣多行文本會(huì)和 labelLine 保持整齊的邊距。lineHeight則控制多行文字的行間距避免兩行文字疊在一起。length是引導(dǎo)線從扇區(qū)延伸出來的長(zhǎng)度length2是引導(dǎo)線末端的水平段長(zhǎng)度調(diào)這兩個(gè)值就能控制文字與餅圖之間的距離。如果你想要更精細(xì)的控制可以用rich富文本。比如想讓名稱和數(shù)值字體大小不一樣label: { formatter: {name|}\n{value|{c}}, rich: { name: { fontSize: 14, color: #333, lineHeight: 24 }, value: { fontSize: 18, color: #ff6600, fontWeight: bold, lineHeight: 24 } } }富文本是 ECharts 標(biāo)簽系統(tǒng)里非常強(qiáng)大但其實(shí)很多教程沒講透的功能。它不僅能控制樣式還能在標(biāo)簽里混排小圖標(biāo)、換行、對(duì)齊。做餅圖、雷達(dá)圖、?；鶊D的時(shí)候?qū)W會(huì)用rich能省掉大量 CSS 布局的麻煩。2.4 tooltip 自動(dòng)換行和內(nèi)容格式化的實(shí)戰(zhàn)方案tooltip 的換行問題我見過不止一個(gè)同事在處理多指標(biāo)展示時(shí)踩坑。默認(rèn)情況下tooltip 的內(nèi)容如果太長(zhǎng)會(huì)一直橫向延伸不會(huì)自動(dòng)換行。熱搜詞echarts tooltip自動(dòng)換行背后的真實(shí)需求一般是我要在 tooltip 里展示多個(gè)字段每個(gè)字段一行字段名和值最好對(duì)齊。最直接的換行方式是在formatter函數(shù)里拼接\ntooltip: { trigger: axis, formatter: function (params) { const item params[0]; return item.name br/ 訪問量 item.value[1] br/ 環(huán)比增長(zhǎng) item.data.rate %; } }注意這里\n和br/是等價(jià)的ECharts 內(nèi)部會(huì)把換行符轉(zhuǎn)成br/。如果你的需求是多指標(biāo)、多系列還可以利用 formatter 的第二個(gè)參數(shù)手動(dòng)拼表格tooltip: { trigger: axis, formatter: function (params, ticket, callback) { let html params[0].axisValue; params.forEach(function (item) { html div item.marker item.seriesName item.value /div; }); return html; } }item.marker會(huì)自動(dòng)生成一個(gè)對(duì)應(yīng)系列顏色的小圓點(diǎn)配合自定義 HTML 結(jié)構(gòu)tooltip 就能展示出帶顏色的多行內(nèi)容。如果你想用 CSS 控制換行和間距還可以在 formatter 里返回帶div和span的 HTML然后用tooltip.extraCssText屬性注入自定義樣式tooltip: { extraCssText: max-width: 300px; white-space: normal; word-break: break-all; }這是真正能解決 tooltip 內(nèi)容過長(zhǎng)問題的配置。把white-space: normal加上去內(nèi)容到寬度上限就會(huì)自動(dòng)折行不用手動(dòng)拼br/。遇到長(zhǎng)文案或者動(dòng)態(tài)拼接的用戶輸入內(nèi)容時(shí)這招尤其管用。3. 地圖數(shù)據(jù)可視化別再以為地圖是 ECharts 自帶的熱搜詞里有echarts中國(guó)地圖我猜很多人是從這里開始接觸 ECharts 地圖的。有個(gè)非常常見的誤解以為 ECharts 安裝完地圖就自動(dòng)能用了series里填type: map就行。結(jié)果一運(yùn)行報(bào)錯(cuò)Component series.map not exists或者M(jìn)ap china not exists然后就開始懷疑人生。3.1 地圖數(shù)據(jù)其實(shí)是一份 GeoJSON需要手動(dòng)注冊(cè)ECharts 本身只提供了地圖的渲染引擎并不自帶任何國(guó)家或省市的地圖數(shù)據(jù)。你要展示地圖必須先拿到對(duì)應(yīng)區(qū)域的地理數(shù)據(jù)然后調(diào)用echarts.registerMap把它注冊(cè)進(jìn)去最后在 series 里通過map屬性引用注冊(cè)的名稱。地理數(shù)據(jù)的標(biāo)準(zhǔn)格式是 GeoJSON簡(jiǎn)單理解就是一份用坐標(biāo)點(diǎn)描述多邊形邊界的 JSON 文件。每個(gè)區(qū)域有type、properties、geometry等字段properties里通常包含區(qū)域名稱也就是你展示時(shí)用來匹配數(shù)據(jù)用的 key。獲取 GeoJSON 的常見途徑是公開的地理數(shù)據(jù)倉(cāng)庫(kù)或者直接從別人封裝好的 npm 包下載。拿到之后代碼長(zhǎng)這樣import * as echarts from echarts; import chinaJson from ./china.json; echarts.registerMap(china, chinaJson); const chart echarts.init(document.getElementById(mapContainer)); chart.setOption({ series: [{ type: map, map: china, roam: true, label: { show: true } }] });registerMap接收兩個(gè)參數(shù)第一個(gè)是你給地圖起的名字第二個(gè)是 GeoJSON 數(shù)據(jù)。這個(gè)名字是全局注冊(cè)的后續(xù)所有圖表都可以通過map: china引用。roam: true允許用戶縮放和平移地圖做展示大屏?xí)r如果不想讓用戶隨便拖可以關(guān)掉。這里有個(gè)細(xì)節(jié)值得多說一句地圖數(shù)據(jù)的體積通常不小一個(gè)中國(guó)地圖的 GeoJSON 動(dòng)輒幾百 KB。如果項(xiàng)目首屏加載對(duì)性能敏感建議按需加載比如進(jìn)入某個(gè)頁(yè)面時(shí)才import對(duì)應(yīng)的 JSON或者放到靜態(tài)資源目錄用 Ajax 拉取不要一股腦打進(jìn)主 bundle。3.2 地圖上的數(shù)據(jù)映射與視覺映射地圖數(shù)據(jù)注冊(cè)好了接下來要做的是把業(yè)務(wù)數(shù)據(jù)映射到地圖上。最常見的需求是不同省份顯示不同顏色數(shù)值越大顏色越深。這就要用到visualMap組件const option { visualMap: { min: 0, max: 1000, left: left, top: bottom, text: [高, 低], inRange: { color: [#e0f3f8, #abd9e9, #74add1, #4575b4, #313695] } }, series: [{ type: map, map: china, data: [ { name: 北京, value: 100 }, { name: 上海, value: 320 }, { name: 廣東, value: 800 } ] }] };visualMap的min和max是映射的數(shù)值范圍inRange.color是一個(gè)顏色漸變數(shù)組ECharts 會(huì)根據(jù) value 在這個(gè)范圍內(nèi)自動(dòng)插值。series.data 里每個(gè)對(duì)象的name必須和 GeoJSON 的properties.name完全一致否則匹配不上那個(gè)區(qū)域就會(huì)顯示為透明或者無顏色。這塊的名字匹配是新手最容易翻車的地方——當(dāng)你看地圖發(fā)現(xiàn)某塊區(qū)域不上色九成是名稱對(duì)不上。排查時(shí)可以把 GeoJSON 打開直接搜一下里面實(shí)際用的名稱是什么。如果只想給某個(gè)區(qū)域高亮不需要顏色漸變可以給 series 添加itemStyle配合select狀態(tài)?；蛘哂胠abel.show在區(qū)域上顯示名稱配合emphasis配置鼠標(biāo)懸停效果series: [{ type: map, map: china, label: { show: true, fontSize: 10 }, itemStyle: { areaColor: #aaccff, borderColor: #fff }, emphasis: { label: { show: true, fontWeight: bold }, itemStyle: { areaColor: #ff9944 } } }]3.3 地圖與散點(diǎn)圖的結(jié)合技巧做地區(qū)分析時(shí)光看省份顏色還不夠往往還希望在地圖上疊加具體城市的位置點(diǎn)比如客戶分布、門店分布。這時(shí)候通用的思路是底層用 map 系列展示區(qū)域底圖再疊加一個(gè)scatter系列用經(jīng)緯度坐標(biāo)定位series: [ { type: map, map: china, roam: true }, { type: effectScatter, coordinateSystem: geo, data: [ { name: 北京, value: [116.4, 39.9, 100] }, { name: 上海, value: [121.47, 31.23, 88] } ], symbolSize: function (val) { return val[2] / 10; } } ]注意這里的coordinateSystem: geo是關(guān)鍵它告訴 ECharts 這個(gè)散點(diǎn)系列的坐標(biāo)系是地理坐標(biāo)系而不是直角坐標(biāo)系。value 數(shù)組的前兩位必須是經(jīng)緯度第三位可以作為散點(diǎn)大小或其他維度的數(shù)值。effectScatter是帶漣漪動(dòng)畫效果的散點(diǎn)適合做數(shù)據(jù)大屏上的重點(diǎn)標(biāo)記視覺效果比普通 scatter 好不少。有一點(diǎn)需要提醒map 系列雖然可以展示數(shù)據(jù)但它本質(zhì)上是地理坐標(biāo)系統(tǒng)如果要在地圖上疊加其他地理元素最好統(tǒng)一用geo組件來承載底圖series 里的 map 類型做數(shù)據(jù)展示具體取舍看你項(xiàng)目里地圖和數(shù)據(jù)的使用頻率。如果只是畫一張靜態(tài)的地圖看得分用 series.map 就夠了如果地圖上還要疊加飛線、散點(diǎn)、漣漪建議把geo單獨(dú)拎出來配置這樣 series 之間互相獨(dú)立不容易因?yàn)榈貓D數(shù)據(jù)設(shè)置互相干擾。4. 把 ECharts 塞進(jìn)真實(shí)項(xiàng)目大屏可視化和數(shù)據(jù)對(duì)接ECharts 的示例代碼看起來都很簡(jiǎn)單但真正把它放進(jìn)項(xiàng)目里尤其是數(shù)據(jù)可視化大屏考驗(yàn)的就不再是 option 本身而是初始化時(shí)機(jī)、數(shù)據(jù)更新策略、自適應(yīng)方案、組件生命周期這一整套工程問題。基于我實(shí)際做過的幾個(gè)大屏項(xiàng)目把關(guān)鍵的點(diǎn)串一遍。4.1 大屏項(xiàng)目的整體布局思路數(shù)據(jù)可視化大屏通常是一整塊填滿瀏覽器窗口的頁(yè)面上面分布多個(gè)圖表。布局上最省事的方案是 CSS Grid 或 Flex 彈性布局把屏幕分成幾個(gè)區(qū)域每個(gè)區(qū)域放一個(gè)圖表容器。容器的寬高不能寫成固定像素否則不同分辨率下會(huì)錯(cuò)位建議用百分比或者vh、vw單位。但這里有個(gè)隱藏問題如果大屏需要適配多種分辨率屏幕簡(jiǎn)單設(shè)置百分比寬高在小屏設(shè)備上圖表文字和間距可能會(huì)顯得很大。我常用的一種思路是設(shè)計(jì)稿固定為 1920x1080頁(yè)面根節(jié)點(diǎn)根據(jù)實(shí)際視口尺寸做transform: scale()等比縮放讓整塊大屏保持設(shè)計(jì)稿比例。圖表容器內(nèi)部再用百分比布局ECharts 初始化時(shí)讀取到的容器寬高就是縮放后的 CSS 像素寬度canvas 會(huì)自動(dòng)適配。舉個(gè)例子.dashboard { width: 1920px; height: 1080px; transform-origin: left top; }function scaleDashboard() { const el document.querySelector(.dashboard); const scaleX window.innerWidth / 1920; const scaleY window.innerHeight / 1080; const scale Math.min(scaleX, scaleY); el.style.transform scale( scale ); } window.addEventListener(resize, scaleDashboard); scaleDashboard();這個(gè)方案做數(shù)據(jù)大屏?xí)r非常穩(wěn)因?yàn)樗鼜母瓷媳ＷC布局比例一致ECharts 的容器寬高始終是設(shè)計(jì)稿的尺寸不會(huì)出現(xiàn)某個(gè)圖表文字特別大、某個(gè)圖表特別小的情況。等比例縮放后四周會(huì)留出空白可以把背景色設(shè)成深色主題視覺上幾乎看不出瑕疵。4.2 原生 JS、jQuery、Ajax 和 ECharts 的組合玩法雖然現(xiàn)在很多項(xiàng)目都是 Vue 或 React但依然有大量舊系統(tǒng)和外包項(xiàng)目在用原生 JS、jQuery需要手動(dòng)操作 DOM。我處理過一個(gè)純 jQuery 項(xiàng)目要求把后端接口的數(shù)據(jù)用 ECharts 展示出來思路其實(shí)很樸素ECharts 初始化之后用 jQuery 的$.ajax請(qǐng)求數(shù)據(jù)拿到數(shù)據(jù)后調(diào)用setOption更新圖表。核心代碼如下const chart echarts.init(document.getElementById(chart)); $.ajax({ url: /api/trend, method: GET, dataType: json, success: function (res) { if (res.code ! 0) { // 接口異常處理 return; } const dates res.data.map(function (item) { return item.date; }); const values res.data.map(function (item) { return item.value; }); chart.setOption({ xAxis: { type: category, data: dates }, yAxis: { type: value }, series: [{ type: line, data: values }] }); } });如果接口是類似每 5 秒刷新一次的輪詢場(chǎng)景可以把 Ajax 請(qǐng)求封裝成一個(gè)fetchData函數(shù)用setInterval定時(shí)調(diào)用。這里有一個(gè)非常重要的細(xì)節(jié)再次setOption之前是否需要先chart.clear()我的經(jīng)驗(yàn)是不需要。ECharts 的setOption默認(rèn)是增量合并的只要你傳入的 option 結(jié)構(gòu)完整它會(huì)自動(dòng)對(duì)比新舊數(shù)據(jù)必要時(shí)清除舊圖形。但如果你不傳入series只傳xAxis圖表會(huì)保留舊的 series 不變這可能導(dǎo)致數(shù)據(jù)不更新。最穩(wěn)妥的做法是每次把整個(gè) option 完整傳入或者至少在數(shù)據(jù)變化時(shí)連同series一起更新。如果你的項(xiàng)目需要從多個(gè)接口拉數(shù)據(jù)比如一個(gè)接口返回趨勢(shì)數(shù)據(jù)一個(gè)接口返回占比數(shù)據(jù)建議把這些圖表實(shí)例分別管理每個(gè)圖表對(duì)應(yīng)一個(gè)更新函數(shù)。如果需要所有數(shù)據(jù)都拿到之后再一起渲染可以用Promise.all把多個(gè) Ajax 請(qǐng)求組合起來處理完再統(tǒng)一setOption避免圖表刷新不同步出現(xiàn)閃爍。4.3 圖表自適應(yīng)和 resize 的正確姿勢(shì)大屏項(xiàng)目離不開窗口縮放自適應(yīng)最常見的寫法是window.addEventListener(resize, function () { chart.resize(); });如果頁(yè)面有多個(gè)圖表就分別調(diào)用每個(gè)實(shí)例的 resize。這里有個(gè)容易踩的坑如果容器被 CSS 動(dòng)畫或者布局變化改變了尺寸單純調(diào)用resize()可能不夠因?yàn)樗x取的是容器當(dāng)前寬高而 canvas 內(nèi)部會(huì)重新計(jì)算。遇到這種情況可以先手動(dòng)給容器設(shè)置一個(gè)具體的像素寬高再調(diào)用resize()。另一個(gè)更隱蔽的問題如果圖表所在的容器初始狀態(tài)是隱藏的比如標(biāo)簽頁(yè)切換、折疊面板ECharts 初始化時(shí)讀到的容器寬高是 0圖表會(huì)渲染成一個(gè)空白的 canvas。等你把容器顯示出來再調(diào)用 resize圖表可能已經(jīng)處于異常狀態(tài)。解決辦法是在初始化前確保容器可見或者用ResizeObserver監(jiān)聽容器尺寸變化const observer new ResizeObserver(function () { chart.resize(); }); observer.observe(document.getElementById(chart));ResizeObserver是瀏覽器原生 API能在容器尺寸真正變化時(shí)觸發(fā)回調(diào)比單純監(jiān)聽 window 的 resize 更準(zhǔn)確。遇到側(cè)邊欄收起、標(biāo)簽頁(yè)切換這些場(chǎng)景不用擔(dān)心圖表顯示異常。另外頁(yè)面離開時(shí)需要清理資源。單頁(yè)應(yīng)用里組件銷毀時(shí)調(diào)用chart.dispose()把實(shí)例釋放掉同時(shí)移除對(duì)應(yīng)的 resize 監(jiān)聽避免內(nèi)存泄漏。重復(fù)初始化同一個(gè)容器而不提前 dispose控制臺(tái)會(huì)報(bào) There is a chart instance already initialized on the dom 的警告這是很常見的排查線索。5. 幾個(gè)讓 ECharts 悄悄出問題的隱性坑最后這段是真正的排雷經(jīng)驗(yàn)每一個(gè)我都實(shí)際碰到過而且排查起來都挺費(fèi)勁的。它們不像配置錯(cuò)誤那么明顯不會(huì)直接報(bào)錯(cuò)但圖表表現(xiàn)出來就是不對(duì)或者在某些特定環(huán)境下突然崩掉。5.1 pxtorem 對(duì) ECharts 沒效果問題出在哪熱搜詞里pxtorem 對(duì)echarts沒起到效果 vue3這個(gè)問題我在 Vue 3 項(xiàng)目里遇到過不止一次。先說結(jié)論這不是 ECharts 的 bug也不是 pxtorem 沒生效而是兩者的工作機(jī)制天然沖突。Vue 項(xiàng)目里常用postcss-pxtorem把 CSS 里的 px 自動(dòng)轉(zhuǎn)成 rem配合 rem 方案做移動(dòng)端或大屏適配。ECharts 初始化時(shí)會(huì)讀取容器 DOM 的clientWidth和clientHeight這兩個(gè)屬性返回的是 CSS 像素值。如果你的容器寬度在 CSS 里寫的是width: 600pxpxtorem 把它轉(zhuǎn)成了width: 37.5rem瀏覽器在計(jì)算時(shí)再把 rem 轉(zhuǎn)回像素。理論上最終容器實(shí)際寬度是 600pxECharts 讀取到的也是 600px看起來應(yīng)該沒毛病。但問題出在邊界情況。rem 轉(zhuǎn)換依賴根元素的 font-size如果根字號(hào)是響應(yīng)式的比如根據(jù)屏幕寬度動(dòng)態(tài)計(jì)算那么容器實(shí)際寬度和視覺稿的像素比例就會(huì)始終存在一個(gè)換算差值。ECharts 內(nèi)部讀取到的是計(jì)算后的實(shí)際像素寬度canvas 按這個(gè)尺寸繪制本來也沒問題。真正讓你感覺pxtorem 對(duì) ECharts 沒效果的場(chǎng)景通常是某個(gè)圖表的寬度是固定的視覺稿像素比如 1920px 設(shè)計(jì)稿下圖表寬度 480px你用 rem 換算之后在不同設(shè)備上計(jì)算出來的實(shí)際寬度不再是 480px圖表元素就會(huì)偏大或偏小看起來就像樣式?jīng)]生效。我采用的解決方案有兩個(gè)方向。一是對(duì) ECharts 的容器單獨(dú)忽略 rem 轉(zhuǎn)換PostCSS 配置里加排除規(guī)則讓容器的寬高始終用 px 控制。二是用 JS 動(dòng)態(tài)獲取容器實(shí)際像素尺寸來初始化圖表不依賴 CSS 的固定值const el document.getElementById(chart); const { width, height } el.getBoundingClientRect(); const chart echarts.init(el, null, { width: width, height: height });getBoundingClientRect返回的是元素經(jīng)過所有樣式計(jì)算后的實(shí)際像素值用這個(gè)值作為初始化寬高可以最大程度避免 rem 換算帶來的額外影響。如果后續(xù)根字號(hào)變了再用 resize 重新適配。記住一點(diǎn)ECharts 的 canvas 尺寸是 JS 在初始化時(shí)確定的它和 CSS 的關(guān)聯(lián)本質(zhì)上是讀一次容器的實(shí)際像素值這種一次性操作搞清楚這一點(diǎn)就不會(huì)被沒生效的說法帶偏。5.2 容器初始化時(shí)寬度為 0圖表變成空白這個(gè)坑的場(chǎng)景通常是這樣頁(yè)面有個(gè) Tab 切換第一個(gè) Tab 是 ECharts 圖表頁(yè)面加載時(shí)默認(rèn)顯示第二個(gè) Tab用戶切到第一個(gè) Tab 時(shí)圖表區(qū)域是空白的。原因是顯而易見的——ECharts 在初始化的時(shí)候容器處于display: none狀態(tài)它讀取到的寬高都是 0。很多人會(huì)嘗試在 Tab 切換完成后手動(dòng)調(diào)用chart.resize()但有時(shí)候依然不生效因?yàn)槿萜麟m然顯示出來了但尺寸變化沒有觸發(fā) ECharts 的重繪而且如果初始化時(shí)寬高是 0canvas 已經(jīng)被設(shè)置成了 0 大小后面恢復(fù)尺寸時(shí)動(dòng)畫可能出現(xiàn)異常。排查這一類問題不是去反復(fù)調(diào)試 option而是檢查初始化時(shí)機(jī)。我的做法是確保圖表容器在頁(yè)面上可見之后再調(diào)用echarts.init。如果是 Vue 或 React可以把圖表的初始化放到 tab 內(nèi)容渲染完成且容器可見之后執(zhí)行如果是原生 JS在切換 Tab 到圖表所在頁(yè)簽之后用requestAnimationFrame或者setTimeout延遲一下再初始化確保瀏覽器完成布局和繪制。如果確實(shí)無法保證初始化時(shí)容器可見也可以先用一段占位樣式給容器設(shè)置固定的最小寬高比如min-height: 300px讓 ECharts 至少有一個(gè)可用的高度?？偠灾@個(gè)問題的排查思路是先確認(rèn)容器在初始化那一刻的實(shí)際寬高再談配置對(duì)不對(duì)。5.3 實(shí)例復(fù)用、銷毀和 setOption 的時(shí)機(jī)ECharts 實(shí)例的生命周期管理是很多項(xiàng)目從 demo 走向生產(chǎn)環(huán)境時(shí)最容易出問題的環(huán)節(jié)。最常見的錯(cuò)誤是在同一個(gè) DOM 節(jié)點(diǎn)上反復(fù)調(diào)用echarts.init沒有及時(shí)dispose導(dǎo)致頁(yè)面卡頓甚至內(nèi)存泄漏。單頁(yè)應(yīng)用里進(jìn)入一個(gè)路由頁(yè)面初始化了一個(gè)圖表離開路由時(shí)如果沒有銷毀再回來時(shí)又初始化新的圖表舊實(shí)例還占用著 canvas 資源。正確做法是組件卸載時(shí)調(diào)用chart.dispose()。如果你用的是 Vue 3可以在onBeforeUnmount鉤子里處理let chart null; onMounted(() { chart echarts.init(el.value); chart.setOption(option); }); onBeforeUnmount(() { if (chart) { chart.dispose(); chart null; } });還有一類問題出在數(shù)據(jù)更新太頻繁。如果你的圖表數(shù)據(jù)每秒鐘都在變比如實(shí)時(shí)監(jiān)控大屏反復(fù)調(diào)用setOption時(shí)需要留意是否傳了notMerge。默認(rèn)情況下setOption(option)是 merge 模式它會(huì)把新舊配置合并理論上性能更好但如果數(shù)據(jù)是實(shí)時(shí)變化且結(jié)構(gòu)經(jīng)常調(diào)整可能出現(xiàn)舊配置殘留。這時(shí)候可以顯式傳第二個(gè)參數(shù)chart.setOption(option, true); // notMerge 為 true直接用新配置替換舊配置但這個(gè)參數(shù)不能無腦加。notMerge: true會(huì)丟棄所有舊配置包括你之前設(shè)置過的legend、tooltip等組件如果新傳入的 option 沒有包含這些組件圖表上的交互組件就會(huì)消失。我處理實(shí)時(shí)更新數(shù)據(jù)時(shí)通常把 option 結(jié)構(gòu)定義在一個(gè)函數(shù)里數(shù)據(jù)變化后完整地生成一份新 option 傳入保持配置的自洽性。最后一個(gè)建議當(dāng)圖表使用setOption更新數(shù)據(jù)時(shí)如果你希望更新過程不帶動(dòng)畫可以傳第三個(gè)參數(shù)lazyUpdate或者配合opts參數(shù)里的silent。實(shí)測(cè)下來高頻數(shù)據(jù)更新時(shí)關(guān)閉動(dòng)畫能明顯降低 CPU 占用。這些細(xì)節(jié)看起來無關(guān)緊要但在數(shù)據(jù)大屏這種長(zhǎng)時(shí)間運(yùn)行、多圖表并存的場(chǎng)景里積累起來就是穩(wěn)定性差異。關(guān)于 ECharts 的社區(qū)我多說兩句。官方示例庫(kù)ECharts Gallery里的作品質(zhì)量參差不齊很多年代久遠(yuǎn)的示例用的是 3.x 語(yǔ)法直接拷貝到 5.x 項(xiàng)目里可能會(huì)報(bào)錯(cuò)。遇到問題最好的去處是 GitHub 倉(cāng)庫(kù)的 issues 區(qū)比如地圖數(shù)據(jù)匹配、labelLine 偏移這些大概率已經(jīng)有人問過。搜索時(shí)記得帶上版本號(hào)不同版本之間的行為差異很大。我平時(shí)排查 ECharts 問題時(shí)習(xí)慣直接在控制臺(tái)打印完整的 option逐步縮小排查范圍這個(gè)笨辦法比直接看源碼高效得多。