Apache ECharts 5.5.0 版本已于 2024.2.18 正式发布。 https://github.com/apache/echarts/releases/tag/5.5.0 主要变化 - 增强了代码的 ESM 识别，对Node.js环境开发更加友好 - 为服务端渲染方案提供了一个 gzip 后仅 1KB 的轻量运行时，极大地降低了加载时间 - 为数据下钻支持了过渡动画，开发者可以方便地实现多级数据的动画效果 - 为饼图和极坐标系图表增加了更多配置项，可以实现更丰富的样式

- 新增阿拉伯语和荷兰语两种语言的翻译

以下内容转自https://mp.weixin.qq.com/s/IpGQS1GspyXzNe-u9F4B-A

增强的 ESM 支持

为了让开发者在测试和 Node.js 环境使用更方便，我们在这个版本中对 ESM 的识别问题进行了优化。 以前，ECharts 只在 npmnpm 包的 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/jestcreate-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 以上。

//服务端代码
constecharts=require('echarts');
//在SSR模式下第一个参数不需要再传入DOM对象
constchart=echarts.init(null,null,{
renderer:'svg',//必须使用SVG模式
ssr:true,//开启SSR
width:400,//需要指明高和宽，如果是根据客户端容器大小动态的，该值需要从客户端得到
height:300
});
//像正常使用一样setOption
chart.setOption({
//...
});
//输出字符串
constsvgStr=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 字符串添加到容器中，并绑定轻量运行时

<divid="chart-container"style="width:800px;height:600px"></div>
<scriptsrc="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.js"></script>
<script>
constssrClient=window['echarts-ssr-client'];
letisSeriesShown={
a:true,
b:true
};
functionupdateChart(svgStr){
constcontainer=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 形式的服务端渲染结果使用，支持以下交互 - 图表初始动画实现原理服务端渲染的 SVG 带有 CSS 动画 - 高亮样式实现原理服务端渲染的 SVG 带有 CSS 动画 - 动态改变数据实现原理轻量运行时请求服务器进行二次渲染 - 点击图例切换系列是否显示实现原理轻量运行时请求服务器进行二次渲染 可以发现，这能够满足大部分的交互场景需求。如果需要更复杂的交互，则客户端需要加载echarts.js实现完整功能。 完整的介绍请参见官网使用手册的应用篇 - 跨平台方案 - 服务端渲染。