前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎(chǔ)是進階的前提是我的初心~

增強的 ESM 支持

為了增強開發(fā)者在 Node.js 環(huán)境和測試場景中使用 ECharts 的便利性，我們對 ESM（ECMAScript 模塊）的支持做了重要優(yōu)化。

在舊版本中，ECharts 僅通過 npm 的 lib 目錄提供了 *.esm 文件格式，這雖然在打包工具（如 webpack）中運行良好，但在純 Node.js 環(huán)境或某些基于 Node.js 的測試框架（比如 vitest 和 jest）中卻不盡人意。

為此，我們引入了以下幾項改進：

• 在 package.json 文件中，我們新增了 "type": "module"，標識模塊類型為 ESM。
• 我們還在 package.json 中定義了 "exports" 字段，以精確指定模塊導出路徑。
• 在部分子目錄下，我們添加了僅含 "type": "commonjs" 的 package.json 文件，以支持 CommonJS 模塊類型。

這些調(diào)整使得像 echarts/core.js 這類文件能夠在各種環(huán)境下（包括純 Node.js、vitest、jest、create-react-app 等）以 ESM 的形式被正確解析。

我們還確保了這項新功能的兼容性，無論是在不同的運行時環(huán)境（Node.js、vitest、jest、create-react-app、服務器端渲染等）還是不同的打包工具（webpack、rollup、vite、esbuild 等）中都能順暢工。

我們對這項新功能寄予厚望，并相信它將大大提升開發(fā)者在使用過程中的體驗。

服務端渲染 ＋ 客戶端輕量運行時

Apache ECharts 是一個功能豐富的圖表庫，但這也導致了較大的包體積。為了應對這一問題，開發(fā)者之前已經(jīng)可以通過 TreeShaking 來按需加載代碼，有效減少了不必要的代碼量。從 5.3 版本開始，Apache ECharts 進一步支持了無需外部依賴的服務端 SVG 字符串渲染功能，允許圖表在服務器端渲染并支持初始動畫。這樣，通過服務端渲染的圖表可以用作頁面的首屏顯示，顯著降低首屏加載時間。

盡管服務端渲染是減輕包體積負擔的有效手段，但在需要客戶端交互時，還是必須加載 echarts.js 文件，這會增加額外的加載時間。對于對頁面加載速度有嚴格要求的應用場景，這可能不是最佳選擇。

在 5.5.0 版本中，ECharts 引入了一個新的客戶端輕量運行時，使得在不加載完整 ECharts 的情況下，也能支持基本的圖表交互。通過這種方式，我們可以先在服務器端渲染圖表，然后在客戶端僅通過加載不到 4KB 的輕量運行時（gzip 壓縮后約為 1KB）來實現(xiàn)圖表的初始動畫和一些常用的交互功能。這種改進極大地加快了頁面的加載速度，尤其改善了移動端的用戶體驗。

圖片

例如，一個包含標題的餅圖，如果在客戶端只打包餅圖和標題組件，gzip 壓縮后的體積為 135KB；而采用服務端渲染加客戶端輕量運行時的方案，SVG 渲染結(jié)果和客戶端運行時的總體積 gzip 后僅為約 2KB，僅占前者體積的 1.5%。此外，這種方案還支持初始動畫、鼠標懸浮高亮和點擊事件等常見交互，滿足大多數(shù)交互需求。

要采用這種方案，服務器端的代碼保持不變，只需確保 ECharts 的版本號為 5.5.0 或更高。

圖片

客戶端將得到的 SVG 字符串添加到容器中，并綁定輕量運行時：

圖片

使用客戶端輕量運行時，必須搭配服務器端以 SVG 格式渲染的圖表，以實現(xiàn)以下交互功能：

• 圖表的初始動畫：通過服務器端渲染的 SVG 中內(nèi)嵌的 CSS 動畫來實現(xiàn)。
• 元素的高亮顯示：同樣通過服務器端渲染的 SVG 內(nèi)嵌的 CSS 動畫實現(xiàn)。
• 動態(tài)更新數(shù)據(jù)：通過輕量運行時向服務器發(fā)送請求，讓服務器進行圖表的二次渲染以更新數(shù)據(jù)。
• 點擊圖例以顯示或隱藏數(shù)據(jù)系列：此功能也是通過輕量運行時向服務器發(fā)送請求，進行圖表的二次渲染實現(xiàn)。

這套機制覆蓋了大多數(shù)交互場景的需求。對于更高級的交互需求，仍然需要在客戶端加載完整的 echarts.js 文件以訪問 ECharts 的全部功能。更多詳細信息請參考服務端渲染 ECharts 圖表的相關(guān)文檔。

數(shù)據(jù)下鉆支持過渡動畫

在 5.5.0 版本中，我們新增了 childGroupId 配置項，可以實現(xiàn)數(shù)據(jù)下鉆的過渡動畫功能。

在之前的版本中，我們已經(jīng)支持使用 groupId，用以表示當前數(shù)據(jù)所屬的組別。而這次新增的 childGroupId 則可以用來表明當前數(shù)據(jù)本身的組別，與 groupId 配合使用后形成一個“父-子-孫”的關(guān)系鏈條。當用戶點擊圖表中的數(shù)據(jù)元素時，圖表會以過渡動畫的形式展示下鉆的數(shù)據(jù)。

開發(fā)者只需要指定 groupId 和 childGroupId，ECharts 就會自動處理層級關(guān)系，實現(xiàn)過渡動畫。

圖片

餅圖支持扇區(qū)之間的間隔

通過設置餅圖扇區(qū)之間的間隔，可以讓餅圖的數(shù)據(jù)塊之間更加清晰，并且形成獨特的視覺效果。參見。

圖片

餅圖和極坐標系支持結(jié)束角度

結(jié)束角度的配置項使得我們可以制作半圓形等不完整的餅圖。參見。

圖片

極坐標系也同樣支持了結(jié)束角度，可以制作出更加豐富的極坐標圖表。

圖片

坐標軸最大、最小標簽的對齊方式

在 5.5.0 版本中，我們新增了 axisLabel.alignMinLabel 和 axisLabel.alignMaxLabel 配置項，可以控制坐標軸最大、最小標簽的對齊方式。如果圖表繪圖區(qū)域比較大，不希望坐標軸標簽溢出，可以將最大、最小標簽分別對齊到右和左。

圖片

新增兩種語言：阿拉伯語和荷蘭語

在 5.5.0 版本中，我們新增了阿拉伯語（AR）和荷蘭語（NL）兩種語言的支持。開發(fā)者可以通過 echarts.registerLocale 方法注冊新的語言包。

提示框支持指定容器

在之前的版本中，提示框（Tooltip）只能插入到圖表容器或者 document.body 中。現(xiàn)在，可以通過 tooltip.appendTo 指定容器，從而能更靈活地控制提示框的位置。

象形柱圖支持裁剪

象形柱圖可能存在超過繪圖區(qū)域的情況，如果希望避免這種情況，可以通過 series-pictorialBar.clip 配置項進行裁剪。

提示框 valueFormatter 增加 dataIndex 參數(shù)

valueFormatter 可以用來自定義提示框內(nèi)容中數(shù)值的部分，現(xiàn)在新增了 dataIndex 參數(shù)，可以用來獲取當前數(shù)據(jù)的索引。

完整更新日志

鏈接：https://echarts.apache.org/zh/changelog.html#v5-5-0