Apache ECharts 5.5.0 特性介绍

增强的 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 对象
let 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.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;

  // 使用轻量运行时赋予图表交互能力
  ssrClient.hydrate(container, {
    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 形式的服务端渲染结果使用,支持以下交互:

  • 图表初始动画(实现原理:服务端渲染的 SVG 带有 CSS 动画)
  • 高亮样式(实现原理:服务端渲染的 SVG 带有 CSS 动画)
  • 动态改变数据(实现原理:轻量运行时请求服务器进行二次渲染)
  • 点击图例切换系列是否显示(实现原理:轻量运行时请求服务器进行二次渲染)

可以发现,这能够满足大部分的交互场景需求。如果需要更复杂的交互,则客户端需要加载 echarts.js 实现完整功能。完整的介绍请参见服务端渲染 ECharts 图表

数据下钻支持过渡动画

在 5.5.0 版本中,我们新增了 childGroupId 配置项,可以实现数据下钻的过渡动画功能。

在之前的版本中,我们已经支持使用 groupId,用以表示当前数据所属的组别。而这次新增的 childGroupId 则可以用来表明当前数据本身的组别,与 groupId 配合使用后形成一个“父-子-孙”的关系链条。当用户点击图表中的数据元素时,图表会以过渡动画的形式展示下钻的数据。

开发者只需要指定 groupIdchildGroupId,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 方法注册新的语言包。

提示框支持指定容器

在之前的版本中,提示框(Tooltip)只能插入到图表容器或者 document.body 中。现在,可以通过 tooltip.appendTo 指定容器,从而能更灵活地控制提示框的位置。

坐标轴最大、最小标签的对齐方式

在 5.5.0 版本中,我们新增了 axisLabel.alignMinLabelaxisLabel.alignMaxLabel 配置项,可以控制坐标轴最大、最小标签的对齐方式。如果图表绘图区域比较大,不希望坐标轴标签溢出,可以将最大、最小标签分别对齐到右和左。

象形柱图支持裁剪

象形柱图可能存在超过绘图区域的情况,如果希望避免这种情况,可以通过 series-pictorialBar.clip 配置项进行裁剪。

提示框 valueFormatter 增加 dataIndex 参数

valueFormatter 可以用来自定义提示框内容中数值的部分,现在新增了 dataIndex 参数,可以用来获取当前数据的索引。

完整更新记录

查看版本更新

本文贡献者 在 GitHub 上编辑本页

Ovilia Oviliaplainheart plainheart