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-doc.git
The following commit(s) were added to refs/heads/master by this push:
new 33b2a7f update v5 feature doc
33b2a7f is described below
commit 33b2a7f81bec5150ec1a0e5563e28c4527b220a7
Author: pissang <bm2736...@gmail.com>
AuthorDate: Mon Jan 25 12:05:15 2021 +0800
update v5 feature doc
---
asset/img/feature-v5/dirty-rect.gif | Bin 0 -> 1618036 bytes
asset/img/feature-v5/dirty-rect.png | Bin 0 -> 802179 bytes
asset/img/{ => feature-v5}/echarts-5-en.png | Bin
asset/img/{ => feature-v5}/echarts-5.png | Bin
asset/img/feature-v5/gauge-pointer.png | Bin 0 -> 238230 bytes
asset/img/feature-v5/new-tooltip-2.png | Bin 0 -> 173904 bytes
asset/img/feature-v5/new-tooltip.png | Bin 0 -> 26152 bytes
asset/img/feature-v5/pie-label-2.png | Bin 0 -> 53964 bytes
asset/img/feature-v5/pie-label.png | Bin 0 -> 56479 bytes
asset/img/feature-v5/theme-color.png | Bin 0 -> 543699 bytes
asset/img/feature-v5/time-axis-2.png | Bin 0 -> 55882 bytes
asset/img/feature-v5/time-axis.png | Bin 0 -> 69868 bytes
zh/tutorial/whats-new-in-echarts-v5.md | 56 +++++++++++++++++++++-------
13 files changed, 42 insertions(+), 14 deletions(-)
diff --git a/asset/img/feature-v5/dirty-rect.gif
b/asset/img/feature-v5/dirty-rect.gif
new file mode 100644
index 0000000..8b0467a
Binary files /dev/null and b/asset/img/feature-v5/dirty-rect.gif differ
diff --git a/asset/img/feature-v5/dirty-rect.png
b/asset/img/feature-v5/dirty-rect.png
new file mode 100644
index 0000000..c7ee56d
Binary files /dev/null and b/asset/img/feature-v5/dirty-rect.png differ
diff --git a/asset/img/echarts-5-en.png b/asset/img/feature-v5/echarts-5-en.png
similarity index 100%
rename from asset/img/echarts-5-en.png
rename to asset/img/feature-v5/echarts-5-en.png
diff --git a/asset/img/echarts-5.png b/asset/img/feature-v5/echarts-5.png
similarity index 100%
rename from asset/img/echarts-5.png
rename to asset/img/feature-v5/echarts-5.png
diff --git a/asset/img/feature-v5/gauge-pointer.png
b/asset/img/feature-v5/gauge-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/asset/img/feature-v5/gauge-pointer.png differ
diff --git a/asset/img/feature-v5/new-tooltip-2.png
b/asset/img/feature-v5/new-tooltip-2.png
new file mode 100644
index 0000000..be34cc1
Binary files /dev/null and b/asset/img/feature-v5/new-tooltip-2.png differ
diff --git a/asset/img/feature-v5/new-tooltip.png
b/asset/img/feature-v5/new-tooltip.png
new file mode 100644
index 0000000..56ad865
Binary files /dev/null and b/asset/img/feature-v5/new-tooltip.png differ
diff --git a/asset/img/feature-v5/pie-label-2.png
b/asset/img/feature-v5/pie-label-2.png
new file mode 100644
index 0000000..8c427b9
Binary files /dev/null and b/asset/img/feature-v5/pie-label-2.png differ
diff --git a/asset/img/feature-v5/pie-label.png
b/asset/img/feature-v5/pie-label.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/asset/img/feature-v5/pie-label.png differ
diff --git a/asset/img/feature-v5/theme-color.png
b/asset/img/feature-v5/theme-color.png
new file mode 100644
index 0000000..636c868
Binary files /dev/null and b/asset/img/feature-v5/theme-color.png differ
diff --git a/asset/img/feature-v5/time-axis-2.png
b/asset/img/feature-v5/time-axis-2.png
new file mode 100644
index 0000000..8bce19f
Binary files /dev/null and b/asset/img/feature-v5/time-axis-2.png differ
diff --git a/asset/img/feature-v5/time-axis.png
b/asset/img/feature-v5/time-axis.png
new file mode 100644
index 0000000..00b7b00
Binary files /dev/null and b/asset/img/feature-v5/time-axis.png differ
diff --git a/zh/tutorial/whats-new-in-echarts-v5.md
b/zh/tutorial/whats-new-in-echarts-v5.md
index ae282d8..8fc242a 100644
--- a/zh/tutorial/whats-new-in-echarts-v5.md
+++ b/zh/tutorial/whats-new-in-echarts-v5.md
@@ -6,7 +6,7 @@
Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts
5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。
-
+<img src="documents/asset/img/feature-v5/echarts-5.png" width="800px" />
“表·达”是 Apache ECharts 5
的核心，通过五大模块、十五项特性的全面升级，围绕可视化作品的叙事表达能力，让图“表”更能传“达”数据背后的故事，帮助开发者更轻松地创造满足各种场景需求的可视化作品。
@@ -18,13 +18,13 @@ Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰
#### 动态排序图
-Apache ECharts 5
新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据在不同时间的变化，讲述数据的演变过程。
+Apache ECharts 5
新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据随在时间维度上的变化，讲述数据的演变过程。
~[700x300](${galleryViewPath}bar-race&edit=1&reset=1)
~[700x400](${galleryViewPath}line-race&edit=1&reset=1)
-动态排序图展现了数据的变化过程，让用户了解数据是如何随着时间而逐渐演变的。而开发者只需要通过简单的配置项，就能用 Apache ECharts
实现这样的效果。
+动态排序图展现了不同的类目随着时间衍变在排名上的改变。而开发者只需要通过几行简单的配置项在 ECharts 中开启这样的效果。
#### 自定义系列动画
@@ -33,7 +33,6 @@ Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态
想象一下，用这些动态效果，你可以创造出多么令人称奇的可视化作品！
-
## 视觉设计
视觉设计的作用并不仅仅是为了让图表更好看，更重要的是，符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容，并且尽可能消除不良设计带来的误解。
@@ -42,32 +41,55 @@ Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态
我们发现，有很大一部分开发者使用了 ECharts 默认的主题样式，因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts
5
中，我们重新设计了默认的主题样式，针对不同的系列和组件分别做了优化调整。以主题色为例，我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素，并且确保色觉辨识障碍人士也能清楚地区分数据。
+<img src="documents/asset/img/feature-v5/theme-color.png" width="400px" />
+
对于有进一步需要高对比度的场景，我们额外提供了高对比度主题样式，开发者可以方便地为需要特殊帮助的人群提供特殊的样式。
#### 标签
标签是图表中的核心元素之一，清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5
提供了多种新的标签功能，让密集的标签能清晰显示、准确表意。
-Apache ECharts 5 在默认情况下，将自动隐藏重叠的标签。对于超出显示区域的标签，将会自动截断或者换行。密集的饼图标签，现在有了更美观的自动排布。
+Apache ECharts 5
可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签，可以选择自动截断或者换行。密集的饼图标签，现在有了更美观的自动排布。
这些功能可以帮助避免文字过于密集影响可读性。并且，无需开发者编写额外的代码就能默认生效，大大简化了开发者的开发成本。
我们也提供了多个配置项来让开发者主动控制标签的布局策略，例如标签拖动、整体显示在画布边缘，用引导线和图形元素连接，并且仍可联动高亮表达关联关系。
+新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示：
+
+<img src="documents/asset/img/feature-v5/pie-label.png" height="150px" />
+<img src="documents/asset/img/feature-v5/pie-label-2.png" height="150px" />
+
#### 时间轴
Apache ECharts 5
带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息，并且提供了更灵活的定制化能力，让开发者根据不同的需求定制时间轴的标签内容。
首先，时间轴不再如之前般绝对平均分割，而是选取年、月、日、整点这类更有意义的点来展示，并且能同时显示不同层级的刻度。标签的 `formatter`
支持了时间模版（例如 `{yyyy}-{MM}-{dd}`），并且可以为不同时间粒度的标签指定不同的
`formatter`，结合已有的富文本标签，可以定制出醒目而多样的时间效果。
+不同的 dataZoom 粒度下时间刻度的显示：
+
+<img src="documents/asset/img/feature-v5/time-axis.png" width="600px" />
+
+<img src="documents/asset/img/feature-v5/time-axis-2.png" width="600px" />
+
#### 提示框
-提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5
中，我们对提示框的样式进行了优化，针对不同的图表系列，提供符合可视化原则的设计。并且改进了富文本的渲染逻辑，确保显示效果与 HTML
方式一致，让用户在不同场景下可以选择不同的技术方案实现同样的效果。
+提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5
中，我们对提示框的样式进行了优化，通过对字体样式，颜色的调整，新增加箭头，跟随图形颜色的边框色等功能，让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑，确保显示效果与
HTML 方式一致，让用户在不同场景下可以选择不同的技术方案实现同样的效果。
+
+<img src="documents/asset/img/feature-v5/new-tooltip.png" height="200px" />
+<img src="documents/asset/img/feature-v5/new-tooltip-2.png" height="200px" />
+
+除此之外，我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。
#### 仪表盘
我们看到社区用户创建了很多酷炫的仪表盘图表，但是他们的配置方式往往比较复杂而取巧。因此，我们对仪表盘的功能作了全面升级，支持了图片或者矢量路径绘制指针、也支持了锚点（anchor）配置项、进度条（progress）、圆角效果等等配置项。
+不同样式的仪表盘指针：
+
+<img src="documents/asset/img/feature-v5/gauge-pointer.png" width="600px" />
+
+
这些升级，不仅可以让开发者用更简单的配置项实现酷炫的效果，而且带来了更丰富的定制能力。
~[600x600](${galleryViewPath}gauge-clock&edit=1&reset=1)
@@ -98,19 +120,25 @@ Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴
##### 脏矩形渲染
-Apache ECharts 5 新支持了脏矩形渲染，解决只有局部变化的场景下的性能瓶颈。在使用 Canvas
渲染器时，脏矩形渲染技术探测并只更新视图变化的部分，而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率，例如在图形很多时候，鼠标频繁触发一些图形高亮的场景。以往这类场景，会使用额外的
Canvas 层以优化性能，但是这种方式对于半透明场景存在无法解决的 bug。脏矩形渲染完美地同时满足了性能和功能正确。
+Apache ECharts 5 新支持了脏矩形渲染，解决只有局部变化的场景下的性能瓶颈。在使用 Canvas
渲染器时，脏矩形渲染技术探测并只更新视图变化的部分，而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率，例如在图形很多时候，鼠标频繁触发一些图形高亮的场景。以往这类场景，会使用额外的
Canvas 层以优化性能，但是这种方式不是所有场景都通用，而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。
-##### 实时时序数据的折线图性能优化
+脏矩形的可视化演示，红色框选部分为该帧重绘区域：
+
+<img src="documents/asset/img/feature-v5/dirty-rect.gif" width="500px" />
-除此之外，海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求，这些数据可能需要几百或者几十毫秒更新一次。Apache
ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化，使得百万量级的数据也能做到实时的更新（每次更新小于
30ms），甚至对于千万级的数据，也可以在 1s 内渲染完，并且保持很小的内存占用以及流畅的提示框（tooltip）等交互。
+大家在新的示例页面选择开启脏矩形优化就可以看到该效果。
+
+##### 实时时序数据的折线图性能优化
+除此之外，海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求，这些数据可能需要几百或者几十毫秒更新一次。
+Apache ECharts 5 对这些场景下的 CPU
消耗、内存占用、初始化时间都进行了深度的优化，使得百万量级的数据也能做到实时的更新（每次更新耗时少于 30ms），甚至对于千万级的数据，也可以在 1s
内渲染完，并且保持很小的内存占用以及流畅的提示框（tooltip）等交互。
## 开发体验
我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用，因而开发者的开发体验也是我们非常关注的方面。
-#### 数据集
+#### 数据处理与变换
ECharts 5
加强了数据集的数据转换能力，让开发者可以使用简单的方式实现常用的数据处理，如：数据过滤（filter）、排序（sort）、聚合（aggregate）、直方图（histogram）、简单聚类（clustering）、回归线计算（regression）等。开发者可以用统一的声明式方式来使用这些功能，可以方便地实现常用的数据操作。
@@ -122,9 +150,9 @@ ECharts 原有的国际化方案，采用的是根据不同的语言参数打包
```js
// import the lang object and set when init
-echarts.registerLocale('EN', lang);
+echarts.registerLocale('DE', lang);
echarts.init(DomElement, null, {
- locale: 'EN'
+ locale: 'DE'
});
```
@@ -155,11 +183,11 @@ Apache ECharts 一直非常重视无障碍设计，我们希望让视觉障碍
ECharts 5 还新增提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。
-~[700x400](${galleryViewPath}doc-example/aria-decal-simple&edit=1&reset=1)
+~[600x350](${galleryViewPath}doc-example/aria-decal-simple&edit=1&reset=1)
此外，贴花图案还能在一些其他的场景下提供帮助，比如：在报纸、书籍之类只有单色或者非常少的颜色的印刷品中，帮助更好地区分数据；用图形元素方便用户对数据产生更直观的理解等。
-~[700x400](${galleryViewPath}doc-example/aria-decal&edit=1&reset=1)
+~[600x350](${galleryViewPath}doc-example/aria-decal-newspaper&edit=1&reset=1)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
