Apache ECharts 5.5.0 功能

增強的 ESM 支援

此功能是對預設 ESM 套件的重大變更，專為開發人員測試以及 Node.js 在模組自訂情境中的使用而設計。

先前，ECharts 僅在 npm 中 (在 npm 套件的 lib 目錄中) 匯出 *.esm 檔案。雖然這在捆綁器中運作良好，但在 Node.js 執行階段以及某些基於 Node.js 的測試框架 (例如 vitest 和 jest) 中，效能不佳。

透過這項新功能，我們進行了幾項變更來改善此情況

  • 在 package.json 中新增了 "type": "module"
  • 在 package.json 中新增了 "exports": {...}"
  • 在子目錄中新增了一些 package.json 檔案，這些檔案僅包含 "type": "commonjs"。

這些變更意味著像 echarts/core.js 這樣的檔案現在可以在像純 Node.js、vitest、jest 和 create-react-app 這樣的環境中解析為 ESM。

我們也確保此新功能與各種環境相容，包括執行階段 (node/vitest/jest(create-react-app)/ssr/…) 和捆綁器 (webpack/rollup/vite/esbuild/…)。

我們對這項新功能感到興奮，並相信它將顯著改善開發人員體驗。

伺服器端渲染 + 輕量級用戶端執行階段

Apache ECharts 功能強大，但相對應的，其套件大小也很大。我們在先前的版本中已做出各種努力來改善這一點。開發人員可以使用 TreeShaking 來按需載入部分程式碼，從而減少載入的程式碼量。從 Apache ECharts 5.3 版開始，我們支援具有零相依性的伺服器端 SVG 字串渲染解決方案，並支援圖表的初始動畫。透過這種方式，使用伺服器端渲染的結果作為第一螢幕渲染可以大大減少第一螢幕的載入時間。

雖然伺服器端渲染是減少套件大小的有效解決方案，但如果需要在用戶端實作某些互動，仍然需要載入 echarts.js，這可能會增加載入時間。對於某些需要更快頁面載入的情境，這可能不是理想的選擇。

在 5.5.0 版中，我們為用戶端新增了輕量級執行階段，因此用戶端不需要載入完整的 ECharts 來實作某些互動。透過這種方式，我們可以在伺服器端渲染圖表，然後在用戶端載入輕量級執行階段以實作一些常見的互動。這表示僅需要 4KB 的輕量級執行階段 (gzip 後為 1KB) 即可實作具有初始動畫和一些常用互動形式的圖表。此改進將大大提高頁面載入速度，特別是對於行動裝置體驗。

以這個帶有標題的圓餅圖為例，如果用戶端僅打包圓餅圖和標題元件，則 gzip 後需要 135KB；如果遵循伺服器端渲染解決方案，則渲染結果 SVG 在 gzip 後為 1 KB，而用戶端執行階段在 gzip 後為 1KB，僅為前者的 1.5%。在互動方面，後者還可以實現初始動畫、滑鼠移動到圖表元素後的突出顯示以及獲取點擊事件，這可以滿足大多數常見的互動需求。

如果您需要使用此解決方案，則伺服器端程式碼保持不變，但您需要確保 ECharts 版本高於 5.5.0。

// Server-side code
const echarts = require('echarts');

// In SSR mode the first container parameter is not required
let chart = echarts.init(null, null, {
  renderer: 'svg', // must use SVG rendering mode
  ssr: true, // enable SSR
  width: 400, // need to specify height and width
  height: 300
});

// use setOption as normal
chart.setOption({
  //...
});

// Output a string
const svgStr = chart.renderToSVGString();

// Dispose it to release memory
chart.dispose();
chart = null;

// Response to the browser (using Express.js as example):
res.writeHead(200, {
  'Content-Type': 'application/xml'
});
res.write(svgStr);
res.end();

用戶端將獲得的 SVG 字串新增至容器並繫結輕量級執行階段

<div id="chart-container" style="width:800px;height:600px"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js"></script>
<script>
const ssrClient = window['echarts-ssr-client'];

const isSeriesShown = {
  a: true,
  b: true
};

function updateChart(svgStr) {
  const container = document.getElementById('chart-container');
  container.innerHTML = svgStr;

  // Use lightweight runtime to give the chart interactive capabilities
  ssrClient.hydrate(container, {
    on: {
      click: (params) => {
        if (params.ssrType === 'legend') {
          // Click the legend element, request the server for secondary rendering
          isSeriesShown[params.seriesName] = !isSeriesShown[params.seriesName];
          fetch('...?series=' + JSON.stringify(isSeriesShown))
            .then(res => res.text())
            .then(svgStr => {
              updateChart(svgStr);
            });
        }
      }
    }
  });
}

// Get the SVG string rendered by the server through AJAX request
fetch('...')
  .then(res => res.text())
  .then(svgStr => {
    updateChart(svgStr);
  });
</script>

輕量級用戶端執行階段必須與 SVG 格式的伺服器端渲染結果一起使用，支援以下互動

  • 圖表的初始動畫 (實作原理：伺服器渲染的 SVG 具有 CSS 動畫)
  • 突出顯示樣式 (實作原理：伺服器渲染的 SVG 具有 CSS 動畫)
  • 動態變更資料 (實作原理：輕量級執行階段向伺服器請求二次渲染)
  • 點擊圖例以切換是否顯示系列 (實作原理：輕量級執行階段向伺服器請求二次渲染)

如您所見，這可以滿足大多數互動情境需求。如果需要更複雜的互動，用戶端需要載入 echarts.js 以實作完整功能。如需完整介紹，請參閱 伺服器端渲染 ECharts 圖表。

資料向下鑽取支援過渡動畫

在 5.5.0 版中，我們新增了 childGroupId 配置項目，可以實現資料向下鑽取的過渡動畫功能。

在先前的版本中，我們已經支援使用 groupId 來表示目前資料所屬的群組。新加入的 childGroupId 可以用來表示目前資料本身的群組，在與 groupId 結合使用後，形成「父-子-孫」關係鏈。當使用者點擊圖表中的資料元素時，圖表將以過渡動畫的形式顯示向下鑽取的資料。

開發人員只需要指定 groupId 和 childGroupId，ECharts 就會自動處理階層關係並實現過渡動畫。

圓餅圖支援扇形之間的間隙

透過設定圓餅圖扇形之間的間隙，圓餅圖的資料區塊可以更清晰並形成獨特的視覺效果。請參閱 (series-pie.padAngle)。

圓餅圖和極座標系統支援結束角度

結束角度配置項目允許我們製作不完整的圓餅圖，例如半圓形。請參閱 (series-pie.endAngle)。

極座標系統也支援結束角度，可以建立更多樣化的極座標圖表。請參閱 (angleAxis.endAngle)。

新增 min-max 採樣方法

ECharts sampling 配置項目允許在資料量遠大於像素數量時設定折線圖的降採樣策略，這可以有效地優化圖表的繪製效率。在 5.5.0 版中，我們新增了 min-max 採樣方法，可以在保留資料整體趨勢的同時更準確地顯示資料的極值。

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

在 5.5.0 版中，我們新增了對阿拉伯語 (AR) 和荷蘭語 (NL) 兩種語言的支援。開發人員可以透過 echarts.registerLocale 方法註冊新的語言包。

工具提示支援指定容器

在先前的版本中，工具提示只能插入到圖表容器或 document.body 中。現在，您可以透過 tooltip.appendTo 指定容器，因此您可以更靈活地控制工具提示的位置。

座標軸上最大和最小標籤的對齊模式

在 5.5.0 版中，我們新增了 axisLabel.alignMinLabel 和 axisLabel.alignMaxLabel 配置項目，可以控制座標軸上最大和最小標籤的對齊模式。如果圖表的繪圖區域相對較大，並且您不希望座標軸標籤溢出，則可以分別將最大和最小標籤對齊到右側和左側。

圖像長條圖支援剪裁

圖像長條圖可能會超出繪圖區域。如果您想避免這種情況，可以透過 series-pictorialBar.clip 配置項目對其進行剪裁。

為工具提示 valueFormatter 新增 dataIndex 參數

valueFormatter 可用於自訂工具提示內容的值部分，現在已新增 dataIndex 參數，可用於取得目前資料的索引。

完整變更日誌

檢視變更日誌

貢獻者 在 GitHub 上編輯此頁面

Ovilia Oviliaplainheart plainheart