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 e6a4000 add v5 article
e6a4000 is described below
commit e6a400062575e8c6523097bbae43c3fa2175b202
Author: pissang <[email protected]>
AuthorDate: Wed Jul 21 14:15:04 2021 +0800
add v5 article
---
contents/zh/basics/release-note/v5-feature.md | 192 +++++++++++++++
.../zh/basics/release-note/v5-upgrade-guide.md | 273 +++++++++++++++++++++
contents/zh/posts.yml | 6 +-
static/images/feature-v5/dashboard-pointer.png | Bin 0 -> 238230 bytes
static/images/feature-v5/dataZoom.png | Bin 0 -> 14459 bytes
static/images/feature-v5/dirty-rect.gif | Bin 0 -> 1618036 bytes
static/images/feature-v5/dirty-rect.png | Bin 0 -> 802179 bytes
static/images/feature-v5/echarts-5-en.png | Bin 0 -> 24363 bytes
static/images/feature-v5/echarts-5.png | Bin 0 -> 24106 bytes
static/images/feature-v5/gauge-pointer.png | Bin 0 -> 238230 bytes
static/images/feature-v5/new-theme-dark.png | Bin 0 -> 101643 bytes
static/images/feature-v5/new-theme-light.png | Bin 0 -> 99276 bytes
static/images/feature-v5/new-tooltip-2 copy.png | Bin 0 -> 52109 bytes
static/images/feature-v5/new-tooltip-2.png | Bin 0 -> 173904 bytes
static/images/feature-v5/new-tooltip.png | Bin 0 -> 26152 bytes
static/images/feature-v5/new-tooltip2.png | Bin 0 -> 52109 bytes
static/images/feature-v5/pie-label copy.png | Bin 0 -> 56479 bytes
static/images/feature-v5/pie-label-2.png | Bin 0 -> 53964 bytes
static/images/feature-v5/pie-label.png | Bin 0 -> 56479 bytes
static/images/feature-v5/theme-color.png | Bin 0 -> 543699 bytes
static/images/feature-v5/time-axis-2.png | Bin 0 -> 55882 bytes
static/images/feature-v5/time-axis.png | Bin 0 -> 69868 bytes
static/images/feature-v5/time-axis2.png | Bin 0 -> 55620 bytes
static/images/feature-v5/timeline.png | Bin 0 -> 23411 bytes
24 files changed, 470 insertions(+), 1 deletion(-)
diff --git a/contents/zh/basics/release-note/v5-feature.md
b/contents/zh/basics/release-note/v5-feature.md
new file mode 100644
index 0000000..d7dc528
--- /dev/null
+++ b/contents/zh/basics/release-note/v5-feature.md
@@ -0,0 +1,192 @@
+# Apache ECharts 5 新特性
+
+数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。
+
+Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts
5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。
+
+<img src="images/feature-v5/echarts-5.png" width="800px" />
+
+“表·达”是 Apache ECharts 5
的核心，通过五大模块、十五项特性的全面升级，围绕可视化作品的叙事表达能力，让图“表”更能传“达”数据背后的故事，帮助开发者更轻松地创造满足各种场景需求的可视化作品。
+
+## 动态叙事
+
+动画对于人类认知的重要性不言而喻。在之前的作品中，我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系，让图表的出现和变换显得不那么生硬。这次，我们更是大幅度增强了我们的动画叙事能力，。希望能够进一步发挥动画对于用户认知的帮助作用，借助图表的动态叙事功能，帮助用户更容易理解图表背后表达的故事。
+
+#### 动态排序图
+
+Apache ECharts 5
新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。
+
+<md-example src="bar-race-country" width="700" height="400"></md-example>
+<md-example src="line-race" width="700" height="400"></md-example>
+
+动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。
+
+#### 自定义系列动画
+
+除了动态排序图，Apache ECharts 5
在自定义系列中提供了更加丰富强大的动画效果，支持标签数值文本的插值动画，图形的形变（morph）、分裂（separate）、合并（combine）等效果的过渡动画。
+
+想象一下，用这些动态效果，你可以创造出多么令人称奇的可视化作品！
+
+## 视觉设计
+
+视觉设计的作用并不仅仅是为了让图表更好看，更重要的是，符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容，并且尽可能消除不良设计带来的误解。
+
+#### 默认设计
+
+我们发现，有很大一部分开发者使用了 ECharts 默认的主题样式，因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts
5
中，我们重新设计了默认的主题样式，针对不同的系列和组件分别做了优化调整。以主题色为例，我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素，并且确保色觉辨识障碍人士也能清楚地区分数据。
+
+<img src="images/feature-v5/theme-color.png" width="400px" />
+
+我们以最常用的柱状图为例，来看看新版本浅色主题和深色主题的样式：
+
+<img src="images/feature-v5/new-theme-light.png" width="500px" />
+<img src="images/feature-v5/new-theme-dark.png" width="500px" />
+
+对于数据区域缩放，时间轴等交互组件，我们也设计了全新的样式并且提供了更好的交互体验：
+
+<img src="images/feature-v5/dataZoom.png" width="500px" />
+
+<img src="images/feature-v5/timeline.png" width="500px" />
+
+#### 标签
+
+标签是图表中的核心元素之一，清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5
提供了多种新的标签功能，让密集的标签能清晰显示、准确表意。
+
+Apache ECharts 5
可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签，可以选择自动截断或者换行。密集的饼图标签，现在有了更美观的自动排布。
+
+这些功能可以帮助避免文字过于密集影响可读性。并且，无需开发者编写额外的代码就能默认生效，大大简化了开发者的开发成本。
+
+我们也提供了多个配置项来让开发者主动控制标签的布局策略，例如标签拖动、整体显示在画布边缘，用引导线和图形元素连接，并且仍可联动高亮表达关联关系。
+
+新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示：
+
+<img src="images/feature-v5/pie-label.png" width="400px" />
+
+#### 时间轴
+
+Apache ECharts 5
带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息，并且提供了更灵活的定制化能力，让开发者根据不同的需求定制时间轴的标签内容。
+
+首先，时间轴不再如之前般绝对平均分割，而是选取年、月、日、整点这类更有意义的点来展示，并且能同时显示不同层级的刻度。标签的 `formatter`
支持了时间模版（例如 `{yyyy}-{MM}-{dd}`），并且可以为不同时间粒度的标签指定不同的
`formatter`，结合已有的富文本标签，可以定制出醒目而多样的时间效果。
+
+不同的 dataZoom 粒度下时间刻度的显示：
+
+<img src="images/feature-v5/time-axis.png" width="600px" />
+
+<img src="images/feature-v5/time-axis-2.png" width="600px" />
+
+#### 提示框
+
+提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5
中，我们对提示框的样式进行了优化，通过对字体样式，颜色的调整，指向图形的箭头，跟随图形颜色的边框色等功能，让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑，确保显示效果与
HTML 方式一致，让用户在不同场景下可以选择不同的技术方案实现同样的效果。
+
+<img src="images/feature-v5/new-tooltip.png" width="400px" />
+<img src="images/feature-v5/new-tooltip-2.png" width="400px" />
+
+除此之外，我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。
+
+#### 仪表盘
+
+我们看到社区用户创建了很多酷炫的仪表盘图表，但是他们的配置方式往往比较复杂而取巧。因此，我们对仪表盘的功能作了全面升级，支持了图片或者矢量路径绘制指针、也支持了锚点（anchor）配置项、进度条（progress）、圆角效果等等配置项。
+
+不同样式的仪表盘指针：
+
+<img src="images/feature-v5/gauge-pointer.png" width="600px" />
+
+这些升级，不仅可以让开发者用更简单的配置项实现酷炫的效果，而且带来了更丰富的定制能力。
+
+<md-example src="gauge-clock" width="600" height="600"></md-example>
+
+#### 扇形圆角
+
+圆角可以带来更美观而柔和的视觉，也能够赋予更多的创造力。Apache ECharts 5
支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项，合理地搭配其他的效果，就可以形成更具个性的的可视化作品。
+
+<md-example src="sunburst-borderRadius" width="400" height="400"></md-example>
+
+## 交互能力
+
+可视化作品的交互能力帮助用户探索了解作品，加深对于图表主旨的理解。
+
+#### 状态管理
+
+在 ECharts 4
中有高亮（emphasis）和普通（normal）两个交互的状态，在鼠标移到图形上的时候会进入高亮状态以区分该数据，开发者可以分别设置这两个状态的颜色，阴影等样式。
+
+这次在 Apache ECharts 5 中，我们在原先的鼠标 hover
高亮的基础上，新增加了**淡出**其它非相关元素的效果，从而可以达到聚焦目标数据的目的。
+
+比如在这个[柱状图](https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack)的例子中，鼠标移到一个系列上的时候，其它非相关的系列就会淡出，从而可以更清晰的突出聚焦系列中数据的对比。在关系图，树图，旭日图，桑基等更复杂数据结构的图上，也可以通过淡出非相关元素来观察数据之间的联系。而且颜色，阴影等在高亮（emphasis）中可以设置的样式，现在也可以在淡出（blur）状态中设置了。
+
+除此之外，我们为所有系列还添加了**点击选中**这个之前只有在饼图、地图等少数系列中才能开启的交互，开发者可以设置为单选或多选模式，并且通过监听
`selectchanged` 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样，选中的样式也可以在 `select` 中配置。
+
+#### 性能提升
+
+##### 脏矩形渲染
+
+Apache ECharts 5 新支持了脏矩形渲染，解决只有局部变化的场景下的性能瓶颈。在使用 Canvas
渲染器时，脏矩形渲染技术探测并只更新视图变化的部分，而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率，例如在图形很多时候，鼠标频繁触发一些图形高亮的场景。以往这类场景，会使用额外的
Canvas 层以优化性能，但是这种方式不是所有场景都通用，而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。
+
+脏矩形的可视化演示，红色框选部分为该帧重绘区域：
+
+<img src="images/feature-v5/dirty-rect.gif" width="500px" />
+
+大家在新的示例页面选择开启脏矩形优化就可以看到该效果。
+
+##### 实时时序数据的折线图性能优化
+
+除此之外，海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求，这些数据可能需要几百或者几十毫秒更新一次。
+
+Apache ECharts 5 对这些场景下的 CPU
消耗、内存占用、初始化时间都进行了深度的优化，使得百万量级的数据也能做到实时的更新（每次更新耗时少于 30ms），甚至对于千万级的数据，也可以在 1s
内渲染完，并且保持很小的内存占用以及流畅的提示框（tooltip）等交互。
+
+## 开发体验
+
+我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用，因而开发者的开发体验也是我们非常关注的方面。
+
+#### 数据集
+
+ECharts 5
加强了数据集的数据转换能力，让开发者可以使用简单的方式实现常用的数据处理，如：数据过滤（filter）、排序（sort）、聚合（aggregate）、直方图（histogram）、简单聚类（clustering）、回归线计算（regression）等。开发者可以用统一的声明式方式来使用这些功能，可以方便地实现常用的数据操作。
+
+#### 国际化
+
+ECharts 原有的国际化方案，采用的是根据不同的语言参数打包出不同的部署文件的形式。
这种方式，使动态的语言和静态的代码包绑定在一起，使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。
+
+因此，从 Apache ECharts 5 开始，动态的语言包和静态的代码包分离开。切换语言的时候，只需要加载相应语言包 ，通过类似挂载主题的方式，使用
`registerLocale` 函数挂载语言包对象 ，重新初始化后就完成了语言的切换 。
+
+```js
+// import the lang object and set when init
+echarts.registerLocale('DE', lang);
+echarts.init(DomElement, null, {
+ locale: 'DE'
+});
+```
+
+#### TypeScript 重构
+
+在近 8 年的时间里，Apache ECharts 已经发展成一个非常复杂的可视化库了，为了续可以更安全高效的进行重构和新功能的开发，我们在 Apache
ECharts 5 的开发之初，使用 TypeScript 对代码进行了重写，TypeScript 所带来的强类型让我们更有信心地在 ECharts 5
开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。
+
+对于开发者，我们也可以从 TypeScript 代码直接生成更好更符合代码的`DTS`类型描述文件。在此之前，ECharts
的类型描述文件一直是由社区开发者帮我们维护并发布到[DefinityTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts)，这个有着不小的工作量，非常感谢大家的贡献。
+
+除此之外，如果开发者的组件是按需引入的，我们还提供了一个 `ComposeOption`
类型方法，可以组合出一个只包含了引入组件的配置项类型，可以带来更严格的类型检查，帮助你提前检测到未引入的组件类型。
+
+## 可访问性
+
+Apache ECharts
一直非常重视无障碍设计，我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点，因而有利于让开发者更愿意为视觉障碍人士提供支持。
+
+在上一个大版本中，我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能，帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5
中，我们也做了更多提高可访问性的设计，帮助视觉障碍人士更好地理解图表内容。
+
+#### 主题配色
+
+我们在设计新版默认主题样式的时候，将无障碍设计作为一个重要的考量依据，对颜色的明度和色值都进行反复测试，帮助视觉辨识障碍用户清楚地识别图表数据。
+
+并且，针对有更进一步无障碍需求的开发者，我们还提供了特殊的高对比度主题，以更高对比度颜色的主题将数据作进一步区分。
+
+#### 贴花图案
+
+ECharts 5 还新增提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。
+
+<md-example src="doc-example/aria-decal-simple" width="600"
height="350"></md-example>
+
+此外，贴花图案还能在一些其他的场景下提供帮助，比如：在报纸、书籍之类只有单色或者非常少的颜色的印刷品中，帮助更好地区分数据；用图形元素方便用户对数据产生更直观的理解等。
+
+<md-example src="doc-example/aria-decal-newspaper" width="600"
height="350"></md-example>
+
+## 小结
+
+除了以上介绍的功能，Apache ECharts 还在非常多的细节中做了改进，帮助开发者更轻松地创建默认好用、配置灵活的图表，用图表讲述数据背后的故事。
+
+感谢所有使用过 ECharts，甚至参与过社区贡献的开发者，正是你们才使得 Apache ECharts 5
成为可能。我们会以更大的热情投入到未来的开发中，Apache ECharts 也会以更大的诚意和大家在 6 相见！
diff --git a/contents/zh/basics/release-note/v5-upgrade-guide.md
b/contents/zh/basics/release-note/v5-upgrade-guide.md
new file mode 100644
index 0000000..a3d2411
--- /dev/null
+++ b/contents/zh/basics/release-note/v5-upgrade-guide.md
@@ -0,0 +1,273 @@
+# Apache ECharts 5 升级指南
+
+本指南面向那些希望将 echarts 4.x（以下简称 `v4`）升级到 echarts 5.x（以下简称 `v5`）的用户。大家可以在 [ECharts
5 新特性](tutorial.html#ECharts%205%20新特性)
中了解这次`v5`带来了哪些值得升级的新特性。在绝大多数情况下，开发者用不着为这个升级做什么额外的事，因为 echarts 一直尽可能地保持 API
的稳定和向后兼容。但是，`v5` 仍然带来了一些非兼容改动，需要特别关注。此外，在一些情况下，`v5` 提供了更好的 API 用来取代之前的
API，这些被取代的 API 将不再被推荐使用（当然，我们尽量兼容了这些改动）。我们会在这篇文档里尽量详尽得解释这些改动。
+
+## 非兼容性改变
+
+#### 默认主题（theme）
+
+首先是默认主题的改动，`v5` 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色，可以手动声明颜色，如下：
+
+```js
+chart.setOption({
+ color: [
+ '#c23531',
+ '#2f4554',
+ '#61a0a8',
+ '#d48265',
+ '#91c7ae',
+ '#749f83',
+ '#ca8622',
+ '#bda29a',
+ '#6e7074',
+ '#546570',
+ '#c4ccd3'
+ ]
+ // ...
+});
+```
+
+或者，做一个简单的 `v4` 主题：
+
+```js
+var themeEC4 = {
+ color: [
+ '#c23531',
+ '#2f4554',
+ '#61a0a8',
+ '#d48265',
+ '#91c7ae',
+ '#749f83',
+ '#ca8622',
+ '#bda29a',
+ '#6e7074',
+ '#546570',
+ '#c4ccd3'
+ ]
+};
+var chart = echarts.init(dom, themeEC4);
+chart.setOption(/* ... */);
+```
+
+#### 引用 ECharts
+
+##### 去除 default exports 的支持
+
+如果使用者在 `v4` 中这样引用了 echarts：
+
+```js
+import echarts from 'echarts';
+// 或者按需引入
+import echarts from 'echarts/lib/echarts';
+```
+
+这两种方式，`v5` 中不再支持了。
+
+使用者需要如下更改代码解决这个问题：
+
+```js
+import * as echarts from 'echarts';
+// 按需引入
+import * as echarts from 'echarts/lib/echarts';
+```
+
+##### 按需引入
+
+在 5.0.1 中，我们引入了新的[按需引入接口](${lang}/basics/import)
+
+```js
+import * as echarts from 'echarts/core';
+import { BarChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([BarChart, GridComponent, CanvasRenderer]);
+```
+
+如果之前是使用`import 'echarts/lib/chart/bar'`引入，新的接口对应的是`import {BarChart} from
'echarts/charts'`;
+
+为了方便大家了解自己的配置项需要引入哪些模块，我们新的示例编辑页面添加了生成按需引入代码的功能，大家可以在示例编辑页的`完整代码`标签下选中按需引入后查看需要引入的模块以及相关代码。
+
+在大部分情况下，我们都推荐大家尽可能用这套新的按需引入接口，它可以最大程度的利用打包工具 tree-shaking
的能力，并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法，之前的方式我们也依旧是支持的：
+
+```js
+const echarts = require('echarts/lib/echarts');
+require('echarts/lib/chart/bar');
+require('echarts/lib/component/grid');
+```
+
+其次，因为我们的源代码已使用 TypeScript 重写，`v5` 将不再支持从 `echarts/src`
引用文件，需要改为从`echarts/lib`引入。
+
+##### 依赖调整
+
+> 注意：该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者，如果是全量引入的不需要关注
+
+为了保证 tree-shaking
后的体积足够小，我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候，`CanvasRenderer`将不再被默认引入，这样可以保证只需要使用
SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来，除此之外，还有下面这些依赖的改动：
+
+- 在使用折线图，柱状图中不再默认引入直角坐标系组件，因此之前使用下面的引入方式
+
+```js
+const echarts = require('echarts/lib/echarts');
+require('echarts/lib/chart/bar');
+require('echarts/lib/chart/line');
+```
+
+需要再单独引入`grid`组件
+
+```js
+require('echarts/lib/component/grid');
+```
+
+参考 issue：[#14080](https://github.com/apache/echarts/issues/14080),
[#13764](https://github.com/apache/echarts/issues/13764)
+
+- 默认不再引入`aria`组件，如果需要的话可以手动引入。
+
+```js
+import { AriaComponent } from 'echarts/components';
+echarts.use(AriaComponent);
+```
+
+或者：
+
+```js
+require('echarts/lib/component/aria');
+```
+
+#### 去除内置的 geoJSON
+
+`v5` 移除了内置的 geoJSON（原先在 `echarts/map` 文件夹下）。这些 geoJSON
文件本就一直来源于第三方。如果使用者仍然需要他们，可以去从老版本中得到，或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts
中。
+
+#### 浏览器兼容性
+
+`v5` 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 [VML
渲染器](https://github.com/ecomfe/zrender/tree/4.3.2/src/vml) 来着实现 IE8
的兼容。如果使用者确实有很强的需求，那么欢迎提 pull request 来升级 VML 渲染器，或者单独维护一个第三方 VML 渲染器，我们从
`v5.0.1` 开始支持注册独立的渲染器了。
+
+#### ECharts 配置项调整
+
+##### 视觉样式设置的优先级改变
+
+`v5` 对调了 [visualMap 组件](${optionPath}visualMap) 和
[itemStyle](${optionPath}series-scatter.itemStyle) |
[lineStyle](${optionPath}series-scatter.lineStyle) |
[areaStyle](${optionPath}series-scatter.areaStyle) 的视觉样式优先级。
+
+具体来说，`v4` 中，[visualMap 组件](${optionPath}visualMap)
中生成的视觉样式（如，颜色、图形类型、图形尺寸等）的优先级，比开发者在
[itemStyle](${optionPath}series-scatter.itemStyle) |
[lineStyle](${optionPath}series-scatter.lineStyle) |
[areaStyle](${optionPath}series-scatter.areaStyle)
中设置的样式的优先级高，也就是说如果他们同时设置的话，前者会生效而后者不会生效。这带来了些麻烦：假如使用者在使用 [visualMap
组件](${optionPath}visualMap) 时，又想针对某个数据项对应的图形，设置
[itemStyle](${optionPath}series-scatter.itemStyle) 样式，则做不到。`v5` 中于是提高了
[itemStyle](${optionPath}series-scatter.itemStyle) | [lineSty [...]
+
+在绝大多处情况下，这个变化并不会带来什么影响。但是为保险起见，使用者在升级 `v4` 到 `v5` 时，还是可以检查下，是否有同时使用
[visualMap](${optionPath}visualMap) 和
[itemStyle](${optionPath}series-scatter.itemStyle) |
[lineStyle](${optionPath}series-scatter.lineStyle) |
[areaStyle](${optionPath}series-scatter.areaStyle) 的情况。
+
+##### 富文本的 `padding`
+
+`v5` 调整了
[rich.?.padding](${optionPath}series-scatter.label.rich.<style_name>.padding)
的格式使其更符合 CSS 的规范。`v4` 里，例如 `rich.?.padding: [11, 22, 33, 44]` 表示 `padding-top`
是 `33` 且 `padding-bottom` 是 `11`。在 `v5` 中调整了上下的位置，`rich.?.padding: [11, 22, 33,
44]` 表示 `padding-top` 是 `11` 且 `padding-bottom` 是 `33`。
+
+如果使用者有在使用
[rich.?.padding](${optionPath}series-scatter.label.rich.<style_name>.padding)，需要注意调整下这个顺序。
+
+## ECharts 的相关扩展
+
+如果想要升级到 `v5` ，下面这些扩展需要升级到最新的版本实现兼容。
+
+- [echarts-gl](https://github.com/ecomfe/echarts-gl)
+- [echarts-wordcloud](https://github.com/ecomfe/echarts-wordcloud)
+- [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill)
+
+## 不再推荐使用的 API
+
+一些 API（包括接口调用，事件监听和配置项）在 `v5` 中不再推荐使用。当然，使用者仍然可以用他们，只是会在 dev 模式下，在 console
中打印一些 warning，并不会影响功能。但是从长远维护考虑，我们还是推荐升级成新的 API。
+
+下面是不再推荐使用的 API 以及推荐的新 API：
+
+- 图形元素 transform 相关的属性被改变了：
+ - 变更点：
+ - `position: [number, number]` 改为 `x: number` / `y: number`。
+ - `scale: [number, number]` 改为 `scaleX: number` / `scaleY: number`。
+ - `origin: [number, number]` 改为 `originX: number` / `originY: number`。
+ - `position`、`scale` 和 `origin` 仍然支持，但已不推荐使用。
+ - 它影响到这些地方：
+ - 在`graphic`组件中：每个元素的声明。
+ - 在 `custom series` 中：`renderItem` 返回的每个元素的声明。
+ - 直接使用 zrender 图形元素时。
+- Text 相关的属性被改变：
+ - 变更点：
+ - 图形元素附带的文本的声明方式被改变：
+ - 除了 `Text` 元素之外，其他元素中的属性 `style.text` 都不推荐使用了。取而代之的是新属性 `textContent` 和
`textConfig`，他们能带来更丰富的功能。
+ - 其中，下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性：
+ - textPosition => textConfig.position
+ - textOffset => textConfig.offset
+ - textRotation => textConfig.rotation
+ - textDistance => textConfig.distance
+ - 下面左边部分的属性在 `style` 和 `style.rich.?` 中已不推荐使用或废弃。请使用下面右边的属性：
+ - textFill => fill
+ - textStroke => stroke
+ - textFont => font
+ - textStrokeWidth => lineWidth
+ - textAlign => align
+ - textVerticalAlign => verticalAlign
+ - textLineHeight =>
+ - textWidth => width
+ - textHeight => hight
+ - textBackgroundColor => backgroundColor
+ - textPadding => padding
+ - textBorderColor => borderColor
+ - textBorderWidth => borderWidth
+ - textBorderRadius => borderRadius
+ - textBoxShadowColor => shadowColor
+ - textBoxShadowBlur => shadowBlur
+ - textBoxShadowOffsetX => shadowOffsetX
+ - textBoxShadowOffsetY => shadowOffsetY
+ - 注：这些属性并没有变化：
+ - textShadowColor
+ - textShadowBlur
+ - textShadowOffsetX
+ - textShadowOffsetY
+ - 它影响到这些地方：
+ - 在 `graphic` 组件中：每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）
+ - 在自定义系列（`custom series`）中：`renderItem`
返回中的每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）
+ - 直接使用 zrender API 创建图形元素。（不再兼容，原写法被废弃。）
+- 图表实例上的 API：
+ - `chart.one(...)` 已不推荐使用。
+- `label`。
+ - 属性 `color`、`textBorderColor`、`backgroundColor`、`borderColor` 中，值 `auto`
已不推荐使用，而推荐使用 `'inherit'` 代替。
+- `hoverAnimation`:
+ - 选项 `series.hoverAnimation` 已不推荐使用，使用 `series.emphasis.scale` 代替之。
+- 折线图（`line series`）：
+ - 选项 `series.clipOverflow` 已不推荐使用，使用 `series.clip` 代替之。
+- 自定义系列（`custom series`）。
+ - 在 `renderItem` 中，`api.style(...)` 和 `api.styleEmphasis(...)`
已不推荐使用。因为这两个接口其实并不真正必要，也很难保证向后兼容。用户可以通过 `api.visual(...)` 获取系统自动分配的视觉信息。
+- 旭日图（`sunburst`）：
+ - 动作类型 `highlight` 已被弃用，请使用 `sunburstHighlight` 代替。
+ - 动作类型 `downplay` 已被弃用，请使用 `sunburstUnhighlight` 代替。
+ - 选项 `series.downplay` 已被弃用，请使用 `series.blur` 代替。
+ - 选项 `series.highlightPolicy` 已不适用，请使用 `series.emphasis.focus` 代替。
+- 饼图（`pie`）：
+ - 下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。
+ - `pieToggleSelect` => `toggleSelect`。
+ - `pieSelect` => `select`。
+ - `pieUnSelect` => `unselect`。
+ - 下面左边部分的事件名已经不推荐使用。请使用右边的事件名。
+ - `pieselectchanged` => `selectchanged`。
+ - `pieselected` => `selected`。
+ - `pieunselected` => `unselected`。
+ - 选项 `series.label.margin` 已经不推荐使用。使用 `series.label.edgeDistance` 代替。
+ - 选项 `series.clockWise` 已经不推荐使用。使用 `series.clockwise` 代替。
+ - 选项 `series.hoverOffset` 已经不推荐使用。使用 `series.emphasis.scaleSize` 代替。
+- 地图（`map series`）：
+ - 下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。
+ - `mapToggleSelect` => `toggleSelect`。
+ - `mapSelect` => `select`。
+ - `mapUnSelect` => `unselect`。
+ - 下面左边部分的事件名已经不推荐使用。请使用右边的事件名。
+ - `mapselectchanged` => `selectchanged`。
+ - `mapselected` => `selected`。
+ - `mapunselected` => `unselected`。
+ - 选项 `series.mapType` 已经不推荐使用。使用 `series.map` 代替。
+ - 选项 `series.mapLocation` 已经不推荐使用。
+- 关系图（`graph series`）：
+ - 选项 `series.focusNodeAdjacency` 已经不推荐使用。使用 `series.emphasis: { focus:
'adjacency'}` 代替。
+- 仪表盘（`gauge series`）：
+ - 选项 `series.clockWise` 已经不推荐使用。使用 `series.clockwise` 代替。
+ - 选项 `series.hoverOffset` 已经不推荐使用。使用 `series.emphasis.scaleSize` 代替。
+- `dataZoom` 组件：
+ - 选项 `dataZoom.handleIcon` 如果使用 `SVGPath`，需要前缀 `path://`。
+- 雷达图（`radar`）：
+ - 选项 `radar.name` 已经不推荐使用。使用 `radar.axisName` 代替。
+ - 选项 `radar.nameGap` 已经不推荐使用。使用 `radar.axisNameGap` 代替。
+- Parse and format：
+ - `echarts.format.formatTime` 已经不推荐使用。使用 `echarts.time.format` 代替。
+ - `echarts.number.parseDate` 已经不推荐使用。使用 `echarts.time.parse` 代替。
+ - `echarts.format.getTextRect` 已经不推荐使用。
diff --git a/contents/zh/posts.yml b/contents/zh/posts.yml
index 17ffd2f..efc4702 100644
--- a/contents/zh/posts.yml
+++ b/contents/zh/posts.yml
@@ -17,9 +17,13 @@
- title: 版本介绍
dir: release-note
children:
- - title: Apache ECharts 5.2.0
+ - title: ECharts 5.2.0
draft: true
dir: 5-2-0
+ - title: ECharts 5 新特性
+ dir: v5-feature
+ - title: ECharts 5 升级指南
+ dir: v5-upgrade-guide
- title: 概念篇
dir: concepts
children:
diff --git a/static/images/feature-v5/dashboard-pointer.png
b/static/images/feature-v5/dashboard-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/static/images/feature-v5/dashboard-pointer.png
differ
diff --git a/static/images/feature-v5/dataZoom.png
b/static/images/feature-v5/dataZoom.png
new file mode 100644
index 0000000..296963d
Binary files /dev/null and b/static/images/feature-v5/dataZoom.png differ
diff --git a/static/images/feature-v5/dirty-rect.gif
b/static/images/feature-v5/dirty-rect.gif
new file mode 100644
index 0000000..8b0467a
Binary files /dev/null and b/static/images/feature-v5/dirty-rect.gif differ
diff --git a/static/images/feature-v5/dirty-rect.png
b/static/images/feature-v5/dirty-rect.png
new file mode 100644
index 0000000..c7ee56d
Binary files /dev/null and b/static/images/feature-v5/dirty-rect.png differ
diff --git a/static/images/feature-v5/echarts-5-en.png
b/static/images/feature-v5/echarts-5-en.png
new file mode 100644
index 0000000..120ce9c
Binary files /dev/null and b/static/images/feature-v5/echarts-5-en.png differ
diff --git a/static/images/feature-v5/echarts-5.png
b/static/images/feature-v5/echarts-5.png
new file mode 100644
index 0000000..666d43b
Binary files /dev/null and b/static/images/feature-v5/echarts-5.png differ
diff --git a/static/images/feature-v5/gauge-pointer.png
b/static/images/feature-v5/gauge-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/static/images/feature-v5/gauge-pointer.png differ
diff --git a/static/images/feature-v5/new-theme-dark.png
b/static/images/feature-v5/new-theme-dark.png
new file mode 100644
index 0000000..727a942
Binary files /dev/null and b/static/images/feature-v5/new-theme-dark.png differ
diff --git a/static/images/feature-v5/new-theme-light.png
b/static/images/feature-v5/new-theme-light.png
new file mode 100644
index 0000000..a18e2ac
Binary files /dev/null and b/static/images/feature-v5/new-theme-light.png differ
diff --git a/static/images/feature-v5/new-tooltip-2 copy.png
b/static/images/feature-v5/new-tooltip-2 copy.png
new file mode 100644
index 0000000..52d3418
Binary files /dev/null and b/static/images/feature-v5/new-tooltip-2 copy.png
differ
diff --git a/static/images/feature-v5/new-tooltip-2.png
b/static/images/feature-v5/new-tooltip-2.png
new file mode 100644
index 0000000..be34cc1
Binary files /dev/null and b/static/images/feature-v5/new-tooltip-2.png differ
diff --git a/static/images/feature-v5/new-tooltip.png
b/static/images/feature-v5/new-tooltip.png
new file mode 100644
index 0000000..56ad865
Binary files /dev/null and b/static/images/feature-v5/new-tooltip.png differ
diff --git a/static/images/feature-v5/new-tooltip2.png
b/static/images/feature-v5/new-tooltip2.png
new file mode 100644
index 0000000..52d3418
Binary files /dev/null and b/static/images/feature-v5/new-tooltip2.png differ
diff --git a/static/images/feature-v5/pie-label copy.png
b/static/images/feature-v5/pie-label copy.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/static/images/feature-v5/pie-label copy.png differ
diff --git a/static/images/feature-v5/pie-label-2.png
b/static/images/feature-v5/pie-label-2.png
new file mode 100644
index 0000000..8c427b9
Binary files /dev/null and b/static/images/feature-v5/pie-label-2.png differ
diff --git a/static/images/feature-v5/pie-label.png
b/static/images/feature-v5/pie-label.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/static/images/feature-v5/pie-label.png differ
diff --git a/static/images/feature-v5/theme-color.png
b/static/images/feature-v5/theme-color.png
new file mode 100644
index 0000000..636c868
Binary files /dev/null and b/static/images/feature-v5/theme-color.png differ
diff --git a/static/images/feature-v5/time-axis-2.png
b/static/images/feature-v5/time-axis-2.png
new file mode 100644
index 0000000..8bce19f
Binary files /dev/null and b/static/images/feature-v5/time-axis-2.png differ
diff --git a/static/images/feature-v5/time-axis.png
b/static/images/feature-v5/time-axis.png
new file mode 100644
index 0000000..00b7b00
Binary files /dev/null and b/static/images/feature-v5/time-axis.png differ
diff --git a/static/images/feature-v5/time-axis2.png
b/static/images/feature-v5/time-axis2.png
new file mode 100644
index 0000000..d89e441
Binary files /dev/null and b/static/images/feature-v5/time-axis2.png differ
diff --git a/static/images/feature-v5/timeline.png
b/static/images/feature-v5/timeline.png
new file mode 100644
index 0000000..e38150d
Binary files /dev/null and b/static/images/feature-v5/timeline.png differ
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
