1. 為什么我在項(xiàng)目里繞不開 ECharts上個(gè)月接到一個(gè)數(shù)據(jù)可視化大屏的需求甲方要求把業(yè)務(wù)數(shù)據(jù)里的訂單趨勢、地區(qū)分布、品類占比全部擺到一張大屏上。剛開始我還想著自己用 SVG 一塊塊畫結(jié)果越畫越不對勁光是折線圖的坐標(biāo)軸刻度、柱狀圖的 hover 提示、餅圖標(biāo)簽線的對齊就夠我折騰一整周。后來果斷換回 ECharts半天時(shí)間把三種圖表全部搭完剩下的時(shí)間全花在調(diào)樣式和對接接口上。這個(gè)場景你應(yīng)該不陌生。ECharts 幾乎是目前前端做圖表繞不開的庫Apache 基金會頂級項(xiàng)目底層基于 Canvas圖表類型覆蓋折線、柱狀、餅圖、地圖、雷達(dá)、桑基、關(guān)系圖等等交互和動畫開箱即用。如果你要處理數(shù)據(jù)可視化尤其是后臺管理系統(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)姿勢還有幾個(gè)特別隱蔽的坑比如 pxtorem 對 ECharts 不生效、tooltip 換行、labelLine 小圓點(diǎn)偏移。不管你是剛接觸圖表的新手還是已經(jīng)被 ECharts 坑過幾次的開發(fā)者這篇文章應(yīng)該都能給你一些能直接抄作業(yè)的東西。2. 柱狀圖、折線圖、餅圖的配置內(nèi)核看透 series 和坐標(biāo)軸的關(guān)系很多入門教程都會把柱狀圖繪制當(dāng)作第一關(guān)確實(shí)ECharts 的柱狀圖是理解整個(gè)配置體系的鑰匙。但如果你只是照著示例代碼粘貼不理解 series、xAxis、yAxis、grid 這幾個(gè)概念之間怎么配合后面遇到折線圖 x 軸刻度錯位、餅圖 labelLine 偏移這類問題就會完全摸不著頭腦。我先用最基礎(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)一一對應(yīng)的。也就是說x 軸第一個(gè)分類對應(yīng) series 里第一個(gè)數(shù)值第二個(gè)分類對應(yīng)第二個(gè)數(shù)值以此類推。這個(gè)對應(yīng)關(guān)系聽起來簡單卻是很多刻度錯位問題的根源——當(dāng)你動態(tài)更新數(shù)據(jù)時(shí)如果只改了 series.data 而忘了同步 xAxis.data圖表不會報(bào)錯但顯示的內(nèi)容已經(jīng)全錯了。grid的作用很多人容易忽略。它控制的是坐標(biāo)系在整個(gè) canvas 里的位置和大小。containLabel: true是我建議每個(gè)項(xiàng)目都加上的配置它的含義是讓軸刻度標(biāo)簽也包含在 grid 范圍內(nèi)防止左側(cè)的數(shù)值標(biāo)簽被截?cái)?。如果不加有時(shí)候 y 軸的刻度文字會超出容器邊界看起來就像被切了一刀。series 才是圖表的核心它決定了圖形類型和視覺樣式。ECharts 支持一個(gè) option 里放多個(gè) series這就實(shí)現(xiàn)了組合圖。比如一個(gè)柱狀圖加一個(gè)折線圖只需要在 series 數(shù)組里放兩個(gè)對象一個(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í)間就會被問一次。熱搜詞里也有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 軸對齊或者至少靠近 y 軸這時(shí)候需要手動設(shè)置xAxis: { type: category, boundaryGap: false, data: [周一, 周二, 周三, 周四, 周五] }boundaryGap: false會讓第一個(gè)數(shù)據(jù)點(diǎn)落在 x 軸起點(diǎn)位置折線從邊緣開始延伸視覺上更貼合趨勢的感覺。第二種刻度擁擠的問題發(fā)生在數(shù)據(jù)量大的時(shí)候。比如你展示一年 365 天的訪問量ECharts 會嘗試把所有日期都顯示在 x 軸上結(jié)果標(biāo)簽疊在一起變成一坨黑色。解決辦法有幾種xAxis: { type: category, data: dates, axisLabel: { interval: 13, // 每隔 13 個(gè)刻度顯示一個(gè)標(biāo)簽 rotate: 30, // 或者旋轉(zhuǎn) 30 度 hideOverlap: true // 自動隱藏重疊標(biāo)簽 } }interval可以填數(shù)字表示每隔幾個(gè)標(biāo)簽顯示一個(gè)也可以填一個(gè)函數(shù)根據(jù)索引決定是否顯示。rotate適合標(biāo)簽文字較長的情況旋轉(zhuǎn)后能避免擠壓。hideOverlap是 ECharts 5 提供的自動隱藏能力標(biāo)簽重疊時(shí)自動丟掉一部分適合數(shù)據(jù)量不確定的動態(tài)場景。我個(gè)人的習(xí)慣是數(shù)據(jù)量在 10 個(gè)以內(nèi)不做處理超過 20 個(gè)優(yōu)先用interval配合hideOverlap超過 100 個(gè)就不建議用 category 軸展示全部了考慮聚合或 sampling。折線圖還有一個(gè)容易踩的坑是smooth: true之后數(shù)據(jù)極小值附近會出現(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è)場景餅圖的引導(dǎo)線末端帶一個(gè)小圓點(diǎn)但圓點(diǎn)和引導(dǎo)線不居中對齊或者引導(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)是左對齊或右對齊取決于它在餅圖的哪一側(cè)。如果你的 label 內(nèi)容換行了或者 label 里設(shè)置了padding、lineHeight文字區(qū)域和 labelLine 的錨點(diǎn)就對不上了視覺上就像小圓點(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會把 label 整體對齊到引導(dǎo)線末端這樣多行文本會和 labelLine 保持整齊的邊距。lineHeight則控制多行文字的行間距避免兩行文字疊在一起。length是引導(dǎo)線從扇區(qū)延伸出來的長度length2是引導(dǎo)線末端的水平段長度調(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)、換行、對齊。做餅圖、雷達(dá)圖、?；鶊D的時(shí)候?qū)W會用rich能省掉大量 CSS 布局的麻煩。2.4 tooltip 自動換行和內(nèi)容格式化的實(shí)戰(zhàn)方案tooltip 的換行問題我見過不止一個(gè)同事在處理多指標(biāo)展示時(shí)踩坑。默認(rèn)情況下tooltip 的內(nèi)容如果太長會一直橫向延伸不會自動換行。熱搜詞echarts tooltip自動換行背后的真實(shí)需求一般是我要在 tooltip 里展示多個(gè)字段每個(gè)字段一行字段名和值最好對齊。最直接的換行方式是在formatter函數(shù)里拼接\ntooltip: { trigger: axis, formatter: function (params) { const item params[0]; return item.name br/ 訪問量 item.value[1] br/ 環(huán)比增長 item.data.rate %; } }注意這里\n和br/是等價(jià)的ECharts 內(nèi)部會把換行符轉(zhuǎn)成br/。如果你的需求是多指標(biāo)、多系列還可以利用 formatter 的第二個(gè)參數(shù)手動拼表格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會自動生成一個(gè)對應(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)容過長問題的配置。把white-space: normal加上去內(nèi)容到寬度上限就會自動折行不用手動拼br/。遇到長文案或者動態(tài)拼接的用戶輸入內(nèi)容時(shí)這招尤其管用。3. 地圖數(shù)據(jù)可視化別再以為地圖是 ECharts 自帶的熱搜詞里有echarts中國地圖我猜很多人是從這里開始接觸 ECharts 地圖的。有個(gè)非常常見的誤解以為 ECharts 安裝完地圖就自動能用了series里填type: map就行。結(jié)果一運(yùn)行報(bào)錯Component series.map not exists或者M(jìn)ap china not exists然后就開始懷疑人生。3.1 地圖數(shù)據(jù)其實(shí)是一份 GeoJSON需要手動注冊ECharts 本身只提供了地圖的渲染引擎并不自帶任何國家或省市的地圖數(shù)據(jù)。你要展示地圖必須先拿到對應(yīng)區(qū)域的地理數(shù)據(jù)然后調(diào)用echarts.registerMap把它注冊進(jìn)去最后在 series 里通過map屬性引用注冊的名稱。地理數(shù)據(jù)的標(biāo)準(zhǔn)格式是 GeoJSON簡單理解就是一份用坐標(biāo)點(diǎn)描述多邊形邊界的 JSON 文件。每個(gè)區(qū)域有type、properties、geometry等字段properties里通常包含區(qū)域名稱也就是你展示時(shí)用來匹配數(shù)據(jù)用的 key。獲取 GeoJSON 的常見途徑是公開的地理數(shù)據(jù)倉庫或者直接從別人封裝好的 npm 包下載。拿到之后代碼長這樣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è)名字是全局注冊的后續(xù)所有圖表都可以通過map: china引用。roam: true允許用戶縮放和平移地圖做展示大屏?xí)r如果不想讓用戶隨便拖可以關(guān)掉。這里有個(gè)細(xì)節(jié)值得多說一句地圖數(shù)據(jù)的體積通常不小一個(gè)中國地圖的 GeoJSON 動輒幾百 KB。如果項(xiàng)目首屏加載對性能敏感建議按需加載比如進(jìn)入某個(gè)頁面時(shí)才import對應(yīng)的 JSON或者放到靜態(tài)資源目錄用 Ajax 拉取不要一股腦打進(jìn)主 bundle。3.2 地圖上的數(shù)據(jù)映射與視覺映射地圖數(shù)據(jù)注冊好了接下來要做的是把業(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 會根據(jù) value 在這個(gè)范圍內(nèi)自動插值。series.data 里每個(gè)對象的name必須和 GeoJSON 的properties.name完全一致否則匹配不上那個(gè)區(qū)域就會顯示為透明或者無顏色。這塊的名字匹配是新手最容易翻車的地方——當(dāng)你看地圖發(fā)現(xiàn)某塊區(qū)域不上色九成是名稱對不上。排查時(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是帶漣漪動畫效果的散點(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ù)對接ECharts 的示例代碼看起來都很簡單但真正把它放進(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ù)可視化大屏通常是一整塊填滿瀏覽器窗口的頁面上面分布多個(gè)圖表。布局上最省事的方案是 CSS Grid 或 Flex 彈性布局把屏幕分成幾個(gè)區(qū)域每個(gè)區(qū)域放一個(gè)圖表容器。容器的寬高不能寫成固定像素否則不同分辨率下會錯位建議用百分比或者vh、vw單位。但這里有個(gè)隱藏問題如果大屏需要適配多種分辨率屏幕簡單設(shè)置百分比寬高在小屏設(shè)備上圖表文字和間距可能會顯得很大。我常用的一種思路是設(shè)計(jì)稿固定為 1920x1080頁面根節(jié)點(diǎn)根據(jù)實(shí)際視口尺寸做transform: scale()等比縮放讓整塊大屏保持設(shè)計(jì)稿比例。圖表容器內(nèi)部再用百分比布局ECharts 初始化時(shí)讀取到的容器寬高就是縮放后的 CSS 像素寬度canvas 會自動適配。舉個(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ì)稿的尺寸不會出現(xiàn)某個(gè)圖表文字特別大、某個(gè)圖表特別小的情況。等比例縮放后四周會留出空白可以把背景色設(shè)成深色主題視覺上幾乎看不出瑕疵。4.2 原生 JS、jQuery、Ajax 和 ECharts 的組合玩法雖然現(xiàn)在很多項(xiàng)目都是 Vue 或 React但依然有大量舊系統(tǒng)和外包項(xiàng)目在用原生 JS、jQuery需要手動操作 DOM。我處理過一個(gè)純 jQuery 項(xiàng)目要求把后端接口的數(shù)據(jù)用 ECharts 展示出來思路其實(shí)很樸素ECharts 初始化之后用 jQuery 的$.ajax請求數(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 秒刷新一次的輪詢場景可以把 Ajax 請求封裝成一個(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)完整它會自動對比新舊數(shù)據(jù)必要時(shí)清除舊圖形。但如果你不傳入series只傳xAxis圖表會保留舊的 series 不變這可能導(dǎo)致數(shù)據(jù)不更新。最穩(wěn)妥的做法是每次把整個(gè) option 完整傳入或者至少在數(shù)據(jù)變化時(shí)連同series一起更新。如果你的項(xiàng)目需要從多個(gè)接口拉數(shù)據(jù)比如一個(gè)接口返回趨勢數(shù)據(jù)一個(gè)接口返回占比數(shù)據(jù)建議把這些圖表實(shí)例分別管理每個(gè)圖表對應(yīng)一個(gè)更新函數(shù)。如果需要所有數(shù)據(jù)都拿到之后再一起渲染可以用Promise.all把多個(gè) Ajax 請求組合起來處理完再統(tǒng)一setOption避免圖表刷新不同步出現(xiàn)閃爍。4.3 圖表自適應(yīng)和 resize 的正確姿勢大屏項(xiàng)目離不開窗口縮放自適應(yīng)最常見的寫法是window.addEventListener(resize, function () { chart.resize(); });如果頁面有多個(gè)圖表就分別調(diào)用每個(gè)實(shí)例的 resize。這里有個(gè)容易踩的坑如果容器被 CSS 動畫或者布局變化改變了尺寸單純調(diào)用resize()可能不夠因?yàn)樗x取的是容器當(dāng)前寬高而 canvas 內(nèi)部會重新計(jì)算。遇到這種情況可以先手動給容器設(shè)置一個(gè)具體的像素寬高再調(diào)用resize()。另一個(gè)更隱蔽的問題如果圖表所在的容器初始狀態(tài)是隱藏的比如標(biāo)簽頁切換、折疊面板ECharts 初始化時(shí)讀到的容器寬高是 0圖表會渲染成一個(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)簽頁切換這些場景不用擔(dān)心圖表顯示異常。另外頁面離開時(shí)需要清理資源。單頁應(yīng)用里組件銷毀時(shí)調(diào)用chart.dispose()把實(shí)例釋放掉同時(shí)移除對應(yīng)的 resize 監(jiān)聽避免內(nèi)存泄漏。重復(fù)初始化同一個(gè)容器而不提前 dispose控制臺會報(bào) There is a chart instance already initialized on the dom 的警告這是很常見的排查線索。5. 幾個(gè)讓 ECharts 悄悄出問題的隱性坑最后這段是真正的排雷經(jīng)驗(yàn)每一個(gè)我都實(shí)際碰到過而且排查起來都挺費(fèi)勁的。它們不像配置錯誤那么明顯不會直接報(bào)錯但圖表表現(xiàn)出來就是不對或者在某些特定環(huán)境下突然崩掉。5.1 pxtorem 對 ECharts 沒效果問題出在哪熱搜詞里pxtorem 對echarts沒起到效果 vue3這個(gè)問題我在 Vue 3 項(xiàng)目里遇到過不止一次。先說結(jié)論這不是 ECharts 的 bug也不是 pxtorem 沒生效而是兩者的工作機(jī)制天然沖突。Vue 項(xiàng)目里常用postcss-pxtorem把 CSS 里的 px 自動轉(zhuǎn)成 rem配合 rem 方案做移動端或大屏適配。ECharts 初始化時(shí)會讀取容器 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如果根字號是響應(yīng)式的比如根據(jù)屏幕寬度動態(tài)計(jì)算那么容器實(shí)際寬度和視覺稿的像素比例就會始終存在一個(gè)換算差值。ECharts 內(nèi)部讀取到的是計(jì)算后的實(shí)際像素寬度canvas 按這個(gè)尺寸繪制本來也沒問題。真正讓你感覺pxtorem 對 ECharts 沒效果的場景通常是某個(gè)圖表的寬度是固定的視覺稿像素比如 1920px 設(shè)計(jì)稿下圖表寬度 480px你用 rem 換算之后在不同設(shè)備上計(jì)算出來的實(shí)際寬度不再是 480px圖表元素就會偏大或偏小看起來就像樣式?jīng)]生效。我采用的解決方案有兩個(gè)方向。一是對 ECharts 的容器單獨(dú)忽略 rem 轉(zhuǎn)換PostCSS 配置里加排除規(guī)則讓容器的寬高始終用 px 控制。二是用 JS 動態(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ù)根字號變了再用 resize 重新適配。記住一點(diǎn)ECharts 的 canvas 尺寸是 JS 在初始化時(shí)確定的它和 CSS 的關(guān)聯(lián)本質(zhì)上是讀一次容器的實(shí)際像素值這種一次性操作搞清楚這一點(diǎn)就不會被沒生效的說法帶偏。5.2 容器初始化時(shí)寬度為 0圖表變成空白這個(gè)坑的場景通常是這樣頁面有個(gè) Tab 切換第一個(gè) Tab 是 ECharts 圖表頁面加載時(shí)默認(rèn)顯示第二個(gè) Tab用戶切到第一個(gè) Tab 時(shí)圖表區(qū)域是空白的。原因是顯而易見的——ECharts 在初始化的時(shí)候容器處于display: none狀態(tài)它讀取到的寬高都是 0。很多人會嘗試在 Tab 切換完成后手動調(diào)用chart.resize()但有時(shí)候依然不生效因?yàn)槿萜麟m然顯示出來了但尺寸變化沒有觸發(fā) ECharts 的重繪而且如果初始化時(shí)寬高是 0canvas 已經(jīng)被設(shè)置成了 0 大小后面恢復(fù)尺寸時(shí)動畫可能出現(xiàn)異常。排查這一類問題不是去反復(fù)調(diào)試 option而是檢查初始化時(shí)機(jī)。我的做法是確保圖表容器在頁面上可見之后再調(diào)用echarts.init。如果是 Vue 或 React可以把圖表的初始化放到 tab 內(nèi)容渲染完成且容器可見之后執(zhí)行如果是原生 JS在切換 Tab 到圖表所在頁簽之后用requestAnimationFrame或者setTimeout延遲一下再初始化確保瀏覽器完成布局和繪制。如果確實(shí)無法保證初始化時(shí)容器可見也可以先用一段占位樣式給容器設(shè)置固定的最小寬高比如min-height: 300px讓 ECharts 至少有一個(gè)可用的高度?？偠灾@個(gè)問題的排查思路是先確認(rèn)容器在初始化那一刻的實(shí)際寬高再談配置對不對。5.3 實(shí)例復(fù)用、銷毀和 setOption 的時(shí)機(jī)ECharts 實(shí)例的生命周期管理是很多項(xiàng)目從 demo 走向生產(chǎn)環(huán)境時(shí)最容易出問題的環(huán)節(jié)。最常見的錯誤是在同一個(gè) DOM 節(jié)點(diǎn)上反復(fù)調(diào)用echarts.init沒有及時(shí)dispose導(dǎo)致頁面卡頓甚至內(nèi)存泄漏。單頁應(yīng)用里進(jìn)入一個(gè)路由頁面初始化了一個(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 模式它會把新舊配置合并理論上性能更好但如果數(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會丟棄所有舊配置包括你之前設(shè)置過的legend、tooltip等組件如果新傳入的 option 沒有包含這些組件圖表上的交互組件就會消失。我處理實(shí)時(shí)更新數(shù)據(jù)時(shí)通常把 option 結(jié)構(gòu)定義在一個(gè)函數(shù)里數(shù)據(jù)變化后完整地生成一份新 option 傳入保持配置的自洽性。最后一個(gè)建議當(dāng)圖表使用setOption更新數(shù)據(jù)時(shí)如果你希望更新過程不帶動畫可以傳第三個(gè)參數(shù)lazyUpdate或者配合opts參數(shù)里的silent。實(shí)測下來高頻數(shù)據(jù)更新時(shí)關(guān)閉動畫能明顯降低 CPU 占用。這些細(xì)節(jié)看起來無關(guān)緊要但在數(shù)據(jù)大屏這種長時(shí)間運(yùn)行、多圖表并存的場景里積累起來就是穩(wěn)定性差異。關(guān)于 ECharts 的社區(qū)我多說兩句。官方示例庫ECharts Gallery里的作品質(zhì)量參差不齊很多年代久遠(yuǎn)的示例用的是 3.x 語法直接拷貝到 5.x 項(xiàng)目里可能會報(bào)錯。遇到問題最好的去處是 GitHub 倉庫的 issues 區(qū)比如地圖數(shù)據(jù)匹配、labelLine 偏移這些大概率已經(jīng)有人問過。搜索時(shí)記得帶上版本號不同版本之間的行為差異很大。我平時(shí)排查 ECharts 問題時(shí)習(xí)慣直接在控制臺打印完整的 option逐步縮小排查范圍這個(gè)笨辦法比直接看源碼高效得多。