This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new 3ef15f2 optimize 5.3.0 feature
3ef15f2 is described below
commit 3ef15f28d7bfbec0375361d97690cba668ec5abd
Author: pissang <[email protected]>
AuthorDate: Sat Jan 22 19:39:02 2022 +0800
optimize 5.3.0 feature
---
contents/zh/basics/release-note/5-3-0.md | 30 ++++++++++++++++--------------
1 file changed, 16 insertions(+), 14 deletions(-)
diff --git a/contents/zh/basics/release-note/5-3-0.md
b/contents/zh/basics/release-note/5-3-0.md
index dbd7623..7ffdb94 100644
--- a/contents/zh/basics/release-note/5-3-0.md
+++ b/contents/zh/basics/release-note/5-3-0.md
@@ -152,7 +152,7 @@ option = {
带有特效动画的散点图一直以来是 ECharts
的特色质疑。开发者可以使用`effectScatter`系列来实现带有涟漪特效的动态散点图，这种特效动画除了让作品更有趣，也起到了高亮提示用户的效果。跟加载动画一样，开发者也常常提出需要更多动画效果的需求。现在我们可以在自定义系列中通过使用关键帧动画来实现更复杂的特效。
-比如下面例子在 SVG 地图上给自定义系列绘制的图钉加上了跳动的动画效果，同时配上了扩展后的涟漪动画。
+比如下面例子在 SVG 地图上给自定义系列绘制的图钉加上了跳动的动画效果，同时配上了涟漪动画。
<!-- <md-example src="geo-svg-custom-effect" width="100%" height="500" /> -->
@@ -280,7 +280,7 @@ fetch(
### 加载 Lottie 动画
-为了充分发掘出新的关键帧动画的能力，我们的团队成员写了一个 [Lottie
动画的解析库](https://github.com/pissang/lottie-parser)，可以将 Lottie 动画文件解析成 ECharts
的图形格式进行渲染。结合 Lottie 的表达力我们可以进一步的在我们的项目中呈现出细腻的动画:
+为了充分发掘出新的关键帧动画的能力，ECharts 团队的沈毅写了一个 [Lottie
动画的解析库](https://github.com/pissang/lottie-parser)，可以将 Lottie 动画文件解析成 ECharts
的图形格式进行渲染。结合 Lottie 的表达力我们可以进一步的在我们的项目中呈现出细腻的动画:
<iframe
src="https://codesandbox.io/embed/eager-ives-yiqn7?fontsize=14&hidenavigation=1&theme=dark&codemirror=1";
style="width:100%; height:500px; border:0; border-radius: 4px;
overflow:hidden;"
@@ -323,13 +323,13 @@ function renderItem() {
如果你不想一一写出每个要动画的属性，现在你可以直接配置`transition: 'all'`为所有属性都加上动画过渡。
-与此同时我们还新增了`enterAnimation`, `updateAnimation`,
`leaveAnimation`分别配置每个图形入场，更新，出场动画的时长（duration），延迟（delay）和缓动（easing）
+与此同时我们还新增了`enterAnimation`, `updateAnimation`,
`leaveAnimation`分别配置每个图形入场，更新，出场动画的时长（duration），延迟（delay）和缓动（easing）。渐变色现在也支持动画了。
## 全新的 SVG 渲染器
-在 5.3.0 中我们完全重写了我们的 SVG 渲染器，新的 SVG 渲染器能够带来 2x ~ 10x 的性能提升，在某些特殊场景中甚至能有数十倍的提升。
+在 5.3.0 中我们重构了我们的 SVG 渲染器，新的 SVG 渲染器能够带来 2x ~ 10x 的性能提升，在某些特殊场景中甚至能有数十倍的提升。
-之前的 SVG 渲染器
+之前的 SVG 渲染器我们直接从渲染队列 diff 更新到 DOM。但是因为 zrender 的图形属性跟 DOM
并不是一一对应的，因此中间需要实现非常复杂的 Diff 逻辑，容易出错而且在某些场景下性能并不好。在这个版本我们重构成先全量渲染到 VDom，然后再将
VDom patch 到 DOM 完成渲染。全量渲染可以避免复杂的 Diff 逻辑带来的潜在 Bug。而 VDom 和 DOM 的一一对应可以保证在
patch 的时候保证更新是最少的，从而带来巨大的性能提升。
[这个例子](https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple&renderer=svg)
可以给大家带来比较直观的性能提升的感受。新的版本在 SVG 模式下拖动的交互上比之前版本流畅非常多。
@@ -337,11 +337,13 @@ function renderItem() {
| :------------------------------------: |
:----------------------------------: |
|  |
 |
+除了性能的提升，我们还可以使用中间全量渲染得到的 VDom 做更多的事情，比如下面会介绍的服务端渲染。
+
## 零依赖的服务端渲染
在之前的版本 ECharts 也可以实现服务端的渲染，但是必须得依赖
[node-canvas](https://github.com/Automattic/node-canvas)，如果是使用 SVG 模式则需要依赖
[JSDom](https://github.com/jsdom/jsdom) 来模拟 DOM
环境。这些依赖一是带来了额外的体积和使用要求，二是也会有更多的性能损耗。
-这次新的 SVG 渲染器除了性能的提升，也带来了完全零依赖的服务端渲染，输出更精简并且带有 CSS 动画的 SVG 字符串。
+这次新的 SVG 渲染器可以让我们从中间的 VDom 渲染得到字符串，带来了完全零依赖的服务端渲染，输出更精简并且带有 CSS 动画的 SVG 字符串。
```ts
const echarts = require('echarts');
@@ -431,7 +433,7 @@ series = {
## 多坐标轴的刻度对齐
-多坐标轴的刻度对齐是社区中提了很久的一个功能了，我们在网上也可以看到很多开发者写的如何在 echarts
中实现坐标轴对齐的文章，通常都会比较麻烦而且会有比较多的局限性。
+多坐标轴的刻度对齐是社区中提了很久的一个需求，我们在网上也可以看到很多开发者写的如何在 echarts
中实现坐标轴对齐的文章，通常都会比较麻烦而且会有比较多的局限性。
在 5.3.0 中我们终于引入了数值轴坐标轴刻度对齐的功能。可以在需要对齐刻度的坐标轴中配置`alignTicks:
true`。该坐标轴就会根据第一个坐标轴的刻度划分去调整自己的刻度，实现自动对齐。
@@ -494,7 +496,7 @@ option = {
ECharts 中高亮状态可以在鼠标移到图形上的时候给用户提供反馈，但是在图表中有海量图形的时候，高亮的动画也可能带来交互上的性能问题。特别在
tooltip 或者图例组件联动触发的高亮会同时高亮多个图形。
-因此在这个版本中我们新增了`emphasis.disabled`配置项。如果不需要高亮的反馈，又堆交互性能非常在意的话，可以通过这个配置项来关闭高亮状态。
+因此在这个版本中我们新增了`emphasis.disabled`配置项。如果不需要高亮的反馈，又对交互性能非常在意的话，可以通过这个配置项来关闭高亮状态。
与此同时，对于选中状态，我们也新增了`select.disabled`。该配置项可以用于细粒度配置部分数据不可选。
@@ -506,11 +508,11 @@ ECharts 中高亮状态可以在鼠标移到图形上的时候给用户提供反
tooltip 可以在用户移到图形上的时候通过提示框显示更详细的相关信息，ECharts
也提供了`formatter`回调函数可以让开发者更灵活的自定义提示框的内容。
-但是我们发现大部分时候开发者只是需要格式化提示框中的数字部分，例如固定精度，加上`$`前缀等等，而之前为了格式化数字开发者只能通过`formatter`重写整个提示框的内容。特别是在
5.0 后 ECharts 的提示框的结构更复杂，样式更美观后，重写变得成本很大而且很难达到默认的效果。
+但是我们发现大部分时候开发者只是需要格式化提示框中的数字部分，例如固定精度，加上`$`前缀等等，而之前为了格式化数字开发者只能通过`formatter`重写整个提示框的内容。特别是在
5.0 后 ECharts 的提示框结构更复杂，样式更美观了，重写变得成本很大而且很难达到默认的效果。
-因此在这个版本我们为 tooltip 新增了一个 `valueFormatter` 的配置项用于数值部分的格式化。
+因此在这个版本我们为 tooltip 新增了`valueFormatter`配置项用于数值部分的格式化。
-还是刚才那个坐标轴对齐的例子，我们我们可以为 tooltip 中的数值部分加上 °C 和 ml 的后缀。
+还是刚才那个坐标轴对齐的例子，我们我们可以为提示框中的数值部分加上 °C 和 ml 的后缀。
```js live { layout: 'bt' }
option = {
@@ -580,7 +582,7 @@ option = {
## 更灵活的扇区圆角
-在 5.0
中我们为扇区新增了圆角的配置，可以为饼图，旭日图提供更有趣的呈现。之前圆角的配置只支持内半径和外半径分开配置，这次我们更进一步，支持扇区的四个角都配置成不同的圆角大小，带来更灵活的呈现。
+在 5.0
中我们为扇区新增了圆角的配置，可以让饼图，旭日图变得更有趣。之前圆角的配置只支持内半径和外半径分开配置，这次我们更进一步，支持扇区的四个角都配置成不同的圆角大小，带来更灵活的呈现。
```js live { layout: 'lr', height: 400 }
option = {
@@ -619,9 +621,9 @@ option = {
## 饼图的复杂标签优化
-饼图一直是 ECharts 中标签呈现最复杂的图表之一，我们从 5.0 开始就一直在饼图的标签布局，显示上做了很多的优化。
+饼图一直是 ECharts 中标签呈现最复杂的图表之一，我们从 5.0 开始就一直在饼图的标签布局、显示上做了很多的优化。
-这次我们针对使用了换行，背景色，富文本等格式比较复杂的饼图标签做了深度的优化。在宽度的自适应，超出容器的判断，引导线的计算上比之前有了更好的显示效果：
+这次我们针对使用了换行，背景色，富文本等格式比较复杂的饼图标签做了深度的优化。在宽度的自适应、超出容器、引导线的计算上比之前有了更好的效果：
| 5.2.2 (Before) | 5.3.0 (After)
|
| :-------------------------------------------: |
:-----------------------------------------: |
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
