ECharts 5.5.0 功能

增强的 ESM 支持

此功能是对默认 ESM 包的重大更改，专为开发人员测试和模块定制场景中的 Node.js 使用而设计。

此前，ECharts 只导出*.esmnpm 中的文件（位于 npm 包的 lib 目录中）。虽然这在捆绑器中运行良好，但在 Node.js 运行时和一些基于 Node.js 的测试框架（如 vitest 和 jest）中表现不佳。

通过这个新功能，我们进行了一些更改来改进这一点：

添加”type”: “module”到 package.json
添加”exports”: {…}”到 package.json
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后为1KB，客户端运行时gzip后为1KB，仅为前者体积的1.5%。交互方面，后者还可以实现初始动画、鼠标移动到图表元素后高亮、获取点击事件等，可以满足大部分常见的交互需求。

如果您需要使用该方案，服务器端代码保持不变，但需要确保ECharts版本在5.5.0以上。

服务端node代码

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

// In SSR mode the first container parameter is not required
const 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'];

let 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(main, {
    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>