ECharts 迎来重大更新，运行时包体积可减少 98%！

ConardLi

发布于 2024-03-02 08:33:03

7680

发布于 2024-03-02 08:33:03

文章被收录于专栏：code秘密花园

Apache ECharts 5.5.0 版本已于 2024.2.18 正式发布。

在这个版本中，我们：

增强了代码的 ESM 识别，对 Node.js 环境开发更加友好；
为服务端渲染方案提供了一个 gzip 后仅 1KB 的轻量运行时，极大地降低了加载时间；
为数据下钻支持了过渡动画，开发者可以方便地实现多级数据的动画效果；
为饼图和极坐标系图表增加了更多配置项，可以实现更丰富的样式；
新增阿拉伯语和荷兰语两种语言的翻译
……

接下来我们会具体介绍这些新功能，新的一年让我们一起学习使用更强大的 ECharts！

增强的 ESM 支持

为了让开发者在测试和 Node.js 环境使用更方便，我们在这个版本中对 ESM 的识别问题进行了优化。

以前，ECharts 只在 npm（npm 包的 lib 目录中）导出 *.esm 文件。虽然这在 bundlers 环境表现良好，但 Node.js 环境和一些基于 Node.js 的测试框架（如 vitest 和 jest）中的表现并不理想。

有了这个新功能，我们做了几个改变以改善这个问题：

在 package.json 中添加了 "type": "module"
在 package.json 中添加了 "exports": {...}
在子目录中添加了一些只包含 "type": "commonjs" 的 package.json 文件

这些改变意味着，像 echarts/core.js 这样的文件现在可以在像纯 Node.js、vitest、jest 和 create-react-app 这样的环境中解析为 ESM。

我们还确保了这个新功能与各种环境兼容，包括运行时（Node.js/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 以上。

// 服务端代码
const echarts = require('echarts');

// 在 SSR 模式下第一个参数不需要再传入 DOM 对象
const chart = echarts.init(null, null, {
  renderer: 'svg', // 必须使用 SVG 模式
  ssr: true, // 开启 SSR
  width: 400, // 需要指明高和宽，如果是根据客户端容器大小动态的，该值需要从客户端得到
  height: 300
});

// 像正常使用一样 setOption
chart.setOption({
  //...
});

// 输出字符串
const svgStr = chart.renderToSVGString();

// 调用 dispose 以释放内存
chart.dispose();
chart = null;

// 通过 HTTP Response 返回 svgStr 给前端或者缓存到本地（这里以 Express.js 为例）：
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.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;

  // 使用轻量运行时赋予图表交互能力
  ssrClient.hydrate(main, {
    on: {
      click: (params) => {
        if (params.ssrType === 'legend') {
          // 点击图例元素，请求服务器进行二次渲染
          isSeriesShown[params.seriesName] = !isSeriesShown[params.seriesName];
          fetch('...?series=' + JSON.stringify(isSeriesShown))
            .then(res => res.text())
            .then(svgStr => {
              updateChart(svgStr);
            });
        }
      }
    }
  });
}

// 通过 AJAX 请求获取服务端渲染的 SVG 字符串
fetch('...')
  .then(res => res.text())
  .then(svgStr => {
    updateChart(svgStr);
  });
</script>

客户端轻量运行时必须配合 SVG 形式的服务端渲染结果使用，支持以下交互：