(window.webpackJsonp=window.webpackJsonp||[]).push([[77],{375:function(n,e,t){"use strict";t.r(e),e.default='# Apache ECharts 5.5.0 特性介绍\n\n## 增强的 ESM 支持\n\n为了让开发者在测试和 Node.js 环境使用更方便，我们在这个版本中对 ESM 的识别问题进行了优化。\n\n以前，ECharts 只在 npm（npm 包的 lib 目录中）导出 `*.esm` 文件。虽然这在 bundlers 环境表现良好，但 Node.js 环境和一些基于 Node.js 的测试框架（如 vitest 和 jest）中的表现并不理想。\n\n有了这个新功能，我们做了几个改变以改善这个问题：\n\n- 在 `package.json` 中添加了 `"type": "module"`\n- 在 `package.json` 中添加了 `"exports": {...}`\n- 在子目录中添加了一些只包含 `"type": "commonjs"` 的 `package.json` 文件\n\n这些改变意味着，像 `echarts/core.js` 这样的文件现在可以在像纯 Node.js、vitest、jest 和 create-react-app 这样的环境中解析为 ESM。\n\n我们还确保了这个新功能与各种环境兼容，包括运行时（Node.js/vitest/jest（create-react-app）/ssr/…）和打包器（webpack/rollup/vite/esbuild/…）。\n\n我们非常期待这一新功能，并相信它将极大地改善开发者的体验。\n\n## 服务端渲染 ＋ 客户端轻量运行时\n\nApache ECharts 功能强大，相应地，包体积也比较大。我们在之前的版本中也做了各种努力来改进这一点。开发者可以使用 TreeShaking 按需加载部分代码，以减少加载的代码量。从 Apache ECharts 5.3 版本起，我们支持了零依赖的服务端 SVG 字符串渲染方案，并支持图表的初始动画。这样，使用服务端渲染的结果作为首屏渲染的画面，可以大大减少首屏加载时间。\n\n服务端渲染虽然是一种很有效减少包体积的解决方案，但如果需要在客户端实现一些交互，那么不得不仍旧加载 echarts.js，这可能会增加更多的加载时间。对于一些对页面加载速度要求较高的场景，这可能不是一个理想的选择。\n\n在 5.5.0 版本中，我们新增了客户端轻量运行时，客户端无需加载完整 ECharts 即可实现部分交互。这样，我们可以在服务端渲染图表，然后在客户端加载轻量运行时，实现一些常见的交互。这意味着，只需要加载 4KB 的轻量运行时（gzip 后 1KB），即可实现带初始动画和部分常用交互形式的图表。这一改进将极大地提升页面加载速度，特别是对于移动端的体验。\n\n![](images/5-5-0/ssr-example.png)\n\n以这个带标题的饼图为例，如果按客户端仅打包饼图和标题组件的方案，gzip 后需要 135KB；如果按服务端渲染的方案，渲染结果 SVG gzip 后 1 KB、客户端运行时 gzip 后 1KB，仅为前者体积的 1.5%。交互方面，后者也可以做到初始动画、鼠标移动到图表元素后的高亮，并且获取到点击事件，能够满足大部分的常见交互需求。\n\n如需使用这一方案，服务端代码和之前一样，但需要保证 ECharts 版本号在 5.5.0 以上。\n\n```ts\n// 服务端代码\nconst echarts = require(\'echarts\');\n\n// 在 SSR 模式下第一个参数不需要再传入 DOM 对象\nlet chart = echarts.init(null, null, {\n  renderer: \'svg\', // 必须使用 SVG 模式\n  ssr: true, // 开启 SSR\n  width: 400, // 需要指明高和宽，如果是根据客户端容器大小动态的，该值需要从客户端得到\n  height: 300\n});\n\n// 像正常使用一样 setOption\nchart.setOption({\n  //...\n});\n\n// 输出字符串\nconst svgStr = chart.renderToSVGString();\n\n// 调用 dispose 以释放内存\nchart.dispose();\nchart = null;\n\n// 通过 HTTP Response 返回 svgStr 给前端或者缓存到本地（这里以 Express.js 为例）：\nres.writeHead(200, {\n  \'Content-Type\': \'application/xml\'\n});\nres.write(svgStr);\nres.end();\n```\n\n客户端将得到的 SVG 字符串添加到容器中，并绑定轻量运行时：\n\n```html\n<div id="chart-container" style="width:800px;height:600px"></div>\n\n<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js"><\/script>\n<script>\nconst ssrClient = window[\'echarts-ssr-client\'];\n\nlet isSeriesShown = {\n  a: true,\n  b: true\n};\n\nfunction updateChart(svgStr) {\n  const container = document.getElementById(\'chart-container\');\n  container.innerHTML = svgStr;\n\n  // 使用轻量运行时赋予图表交互能力\n  ssrClient.hydrate(main, {\n    on: {\n      click: (params) => {\n        if (params.ssrType === \'legend\') {\n          // 点击图例元素，请求服务器进行二次渲染\n          isSeriesShown[params.seriesName] = !isSeriesShown[params.seriesName];\n          fetch(\'...?series=\' + JSON.stringify(isSeriesShown))\n            .then(res => res.text())\n            .then(svgStr => {\n              updateChart(svgStr);\n            });\n        }\n      }\n    }\n  });\n}\n\n// 通过 AJAX 请求获取服务端渲染的 SVG 字符串\nfetch(\'...\')\n  .then(res => res.text())\n  .then(svgStr => {\n    updateChart(svgStr);\n  });\n<\/script>\n```\n\n客户端轻量运行时必须配合 SVG 形式的服务端渲染结果使用，支持以下交互：\n\n- 图表初始动画（实现原理：服务端渲染的 SVG 带有 CSS 动画）\n- 高亮样式（实现原理：服务端渲染的 SVG 带有 CSS 动画）\n- 动态改变数据（实现原理：轻量运行时请求服务器进行二次渲染）\n- 点击图例切换系列是否显示（实现原理：轻量运行时请求服务器进行二次渲染）\n\n可以发现，这能够满足大部分的交互场景需求。如果需要更复杂的交互，则客户端需要加载 `echarts.js` 实现完整功能。完整的介绍请参见[服务端渲染 ECharts 图表](${lang}/how-to/cross-platform/server)。\n\n## 数据下钻支持过渡动画\n\n在 5.5.0 版本中，我们新增了 `childGroupId` 配置项，可以实现数据下钻的过渡动画功能。\n\n在之前的版本中，我们已经支持使用 `groupId`，用以表示当前数据所属的组别。而这次新增的 `childGroupId` 则可以用来表明当前数据本身的组别，与 `groupId` 配合使用后形成一个“父-子-孙”的关系链条。当用户点击图表中的数据元素时，图表会以过渡动画的形式展示下钻的数据。\n\n<md-example src="bar-multi-drilldown" width="100%" height="400" />\n\n开发者只需要指定 `groupId` 和 `childGroupId`，ECharts 就会自动处理层级关系，实现过渡动画。\n\n## 饼图支持扇区之间的间隔\n\n通过设置饼图扇区之间的间隔，可以让饼图的数据块之间更加清晰，并且形成独特的视觉效果。参见（[series-pie.padAngle](${optionPath}series-pie.padAngle)）。\n\n<md-example src="pie-padAngle" width="100%" height="400" />\n\n## 饼图和极坐标系支持结束角度\n\n结束角度的配置项使得我们可以制作半圆形等不完整的饼图。参见（[series-pie.endAngle](${optionPath}series-pie.endAngle)）。\n\n<md-example src="pie-half-donut" width="100%" height="400" />\n\n极坐标系也同样支持了结束角度，可以制作出更加丰富的极坐标图表。参见（[angleAxis.endAngle](${optionPath}angleAxis.endAngle)）。\n\n<md-example src="polar-endAngle" width="100%" height="400" />\n\n## 新增 `min-max` 采样方式\n\nECharts 的 [sampling](${optionPath}series-line.sampling) 配置项允许设置折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率。在 5.5.0 版本中，我们新增了 `min-max` 采样方式，可以在保留数据的整体趋势的同时，更加精确的展示数据的极值。\n\n## 新增两种语言：阿拉伯语和荷兰语\n\n在 5.5.0 版本中，我们新增了阿拉伯语（AR）和荷兰语（NL）两种语言的支持。开发者可以通过 [echarts.registerLocale](${mainSitePath}api.html#echarts.registerLocale) 方法注册新的语言包。\n\n## 提示框支持指定容器\n\n在之前的版本中，提示框（Tooltip）只能插入到图表容器或者 `document.body` 中。现在，可以通过 [tooltip.appendTo](${optionPath}tooltip.appendTo) 指定容器，从而能更灵活地控制提示框的位置。\n\n## 坐标轴最大、最小标签的对齐方式\n\n在 5.5.0 版本中，我们新增了 [axisLabel.alignMinLabel](${optionPath}xAxis.axisLabel.alignMinLabel) 和 [axisLabel.alignMaxLabel](${optionPath}xAxis.axisLabel.alignMaxLabel) 配置项，可以控制坐标轴最大、最小标签的对齐方式。如果图表绘图区域比较大，不希望坐标轴标签溢出，可以将最大、最小标签分别对齐到右和左。\n\n<md-example src="doc-example/axis-label-align-min-max" width="100%" height="400" />\n\n## 象形柱图支持裁剪\n\n象形柱图可能存在超过绘图区域的情况，如果希望避免这种情况，可以通过 [series-pictorialBar.clip](${optionPath}series-pictorialBar.clip) 配置项进行裁剪。\n\n## 提示框 valueFormatter 增加 dataIndex 参数\n\n`valueFormatter` 可以用来自定义提示框内容中数值的部分，现在新增了 `dataIndex` 参数，可以用来获取当前数据的索引。\n\n## 完整更新记录\n\n查看[版本更新](${mainSitePath}changelog.html#v5-5-0)\n'}}]);