You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/08/21 12:02:53 UTC
[echarts-handbook] branch master updated: WIP: 5.2.0 feature
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 339e1a3 WIP: 5.2.0 feature
339e1a3 is described below
commit 339e1a395e7db3e1f599a6a2fa86cb17692eafd4
Author: pissang <bm...@gmail.com>
AuthorDate: Sat Aug 21 20:00:56 2021 +0800
WIP: 5.2.0 feature
---
components/helper/contributors.ts | 12 +-
components/markdown/Live.vue | 2 +-
contents/en/basics/release-note/5-2-0.md | 0
contents/en/concepts/chart-size.md | 4 +-
contents/zh/basics/release-note/5-2-0.md | 231 ++++++++++++++++++++++++-
contents/zh/concepts/chart-size.md | 4 +-
contents/zh/posts.yml | 5 +-
static/images/5-2-0/universal-transition-2.gif | Bin 0 -> 1960797 bytes
static/images/5-2-0/universal-transition-3.gif | Bin 0 -> 3802824 bytes
static/images/5-2-0/universal-transition.gif | Bin 0 -> 2524435 bytes
10 files changed, 243 insertions(+), 15 deletions(-)
diff --git a/components/helper/contributors.ts b/components/helper/contributors.ts
index 38c937e..c50393b 100644
--- a/components/helper/contributors.ts
+++ b/components/helper/contributors.ts
@@ -1,7 +1,4 @@
export default {
- "contents/zh/concepts/style.md": [
- "pissang"
- ],
"contents/zh/concepts/series.md": [
"Ovilia"
],
@@ -423,18 +420,21 @@ export default {
"contents/.prettierrc": [
"pissang"
],
- "contents/zh/get-started.md": [
+ "contents/zh/concepts/visual-map.md": [
"Ovilia",
"pissang"
],
- "contents/zh/concepts/visual-map.md": [
+ "contents/zh/meta/edit-guide.md": [
+ "pissang"
+ ],
+ "contents/zh/get-started.md": [
"Ovilia",
"pissang"
],
"contents/zh/concepts/tooltip.md": [
"Ovilia"
],
- "contents/zh/meta/edit-guide.md": [
+ "contents/zh/concepts/style.md": [
"pissang"
],
"contents/zh/meta/writing.md": [
diff --git a/components/markdown/Live.vue b/components/markdown/Live.vue
index 8ab3eb7..0094223 100644
--- a/components/markdown/Live.vue
+++ b/components/markdown/Live.vue
@@ -41,7 +41,7 @@ declare const echarts: any
function ensureECharts() {
if (typeof echarts === 'undefined') {
return loadScriptsAsync([
- 'https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js'
+ '//localhost/echarts/dist/echarts.js'
]).then(() => {})
}
return Promise.resolve()
diff --git a/contents/en/basics/release-note/5-2-0.md b/contents/en/basics/release-note/5-2-0.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/en/concepts/chart-size.md b/contents/en/concepts/chart-size.md
index 0753ba1..77c2c54 100644
--- a/contents/en/concepts/chart-size.md
+++ b/contents/en/concepts/chart-size.md
@@ -74,7 +74,7 @@ myChart.resize({
});
```
-> **Tips: ** Pay attention to how the API defined while reading the file. `resize()` API was sometimes mistaken for the form like `myCharts.resize(800, 400)` which do not exist.
+> Tips: Pay attention to how the API defined while reading the documentation. `resize()` API was sometimes mistaken for the form like `myCharts.resize(800, 400)` which do not exist.
### Dispose and Rebuild of the Container Node
@@ -84,4 +84,4 @@ Essentially, this is because the container node of the charts was removed. Even
The correct way is, call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to dispose the instance after the container was disposed, and call [echarts.init](${mainSitePath}/api.html#echarts.init) to initialize after the container was added again.
-> **Tips: ** Call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to release resources while disposing the node to avoid memory leaks.
+> Tips: Call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to release resources while disposing the node to avoid memory leaks.
diff --git a/contents/zh/basics/release-note/5-2-0.md b/contents/zh/basics/release-note/5-2-0.md
index 764383c..f112258 100644
--- a/contents/zh/basics/release-note/5-2-0.md
+++ b/contents/zh/basics/release-note/5-2-0.md
@@ -1 +1,230 @@
-# Apache ECharts 5.2.0
+# Apache ECharts 5.2.0 介绍
+
+## 全局过渡动画 Universal Transition
+
+在 Apache ECharts 中我们一直把自然流畅的过渡动画作为我们的一个重要特性，我们希望能够动画去关联数据的变化，让整个数据的变化不会突兀的反应在图形上。
+
+在之前的版本中，过渡动画主要应用在了相同类型的图形的位置，尺寸，形状上，而且只能作用在相同类型的系列上。比如下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化：
+
+```js [live-lr]
+function makeRandomData() {
+ return [
+ {
+ value: Math.random(),
+ name: 'A'
+ },
+ {
+ value: Math.random(),
+ name: 'B'
+ },
+ {
+ value: Math.random(),
+ name: 'C'
+ }
+ ];
+}
+option = {
+ series: [
+ {
+ type: 'pie',
+ radius: [0, '50%'],
+ data: makeRandomData()
+ }
+ ]
+};
+
+setInterval(() => {
+ myChart.setOption({
+ series: {
+ data: makeRandomData()
+ }
+ });
+}, 2000);
+```
+
+### 跨系列的变形动画
+
+这次从 5.2.0 开始，我们引入了更强大的全局过渡动画 Universal Transition，让过渡动画不再局限于相同类型的系列之间。
+
+在设置`universalTransition: true`开启全局过渡动画后，从饼图切换到柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的通过动画过渡。
+
+饼图和柱状图之间的切换：
+
+```js [live-bt]
+const dataset = {
+ dimensions: ['name', 'score'],
+ source: [
+ ['Hannah Krause', 314],
+ ['Zhao Qian', 351],
+ ['Jasmin Krause ', 287],
+ ['Li Lei', 219],
+ ['Karle Neumann', 253],
+ ['Mia Neumann', 165],
+ ['Böhm Fuchs', 318],
+ ['Han Meimei', 366]
+ ]
+};
+const pieOption = {
+ dataset: [dataset],
+ series: [
+ {
+ type: 'pie',
+ // 通过 id 关联需要过渡动画的系列
+ id: 'Score',
+ radius: [0, '50%'],
+ universalTransition: true,
+ animationDurationUpdate: 1000
+ }
+ ]
+};
+const barOption = {
+ dataset: [dataset],
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ // 通过 id 关联需要过渡动画的系列
+ id: 'Score',
+ // 每个数据都是用不同的颜色
+ colorBy: 'data',
+ encode: { x: 'name', y: 'score' },
+ universalTransition: true,
+ animationDurationUpdate: 1000
+ }
+ ]
+};
+
+option = barOption;
+
+setInterval(() => {
+ option = option === pieOption ? barOption : pieOption;
+ // 使用 notMerge 的形式可以移除坐标轴
+ myChart.setOption(option, true);
+}, 2000);
+```
+
+更多的常见基础图表之间的过渡：
+
+
+
+这个动画过渡也不仅仅是局限在基础的折柱饼中，在柱状图和地图之间:
+
+
+
+或者旭日图和矩形树图之间，甚至非常灵活的自定义系列之间都可以进行动画的过渡
+
+
+
+> 注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应
+
+### 数据的分裂和合并动画
+
+除了常见的数据更新，有时候我们还会碰到数据的聚合，下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多分裂，合并这样的动画效果，来能够正确的通过图形的动画变换表达出数据的变换。
+
+## 不同粒度的调色盘取色
+
+在上面全局过渡动画的示例中大家可能有注意到我们使用了一个之前版本没有的`colorBy`配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略：
+
+- `'series'` 按照系列取色，同一系列中的所有数据都是用相同的颜色。
+- `'data'` 按照数据项取色，每个数据项都使用不同的颜色。
+
+在之前我们是按照系列的类型固定了这个策略，比如柱状图就是固定`'series'`的策略，而饼图则是固定`'data'`的策略。
+
+而现在新增这个配置项后，我们可以在柱状图中给每个数据项都分配不同的颜色：
+
+```js [live-lr]
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ colorBy: 'data'
+ }
+ ]
+};
+```
+
+或者在饼图中统一使用一个颜色：
+
+```js [live-lr]
+option = {
+ series: {
+ type: 'pie',
+ colorBy: 'series',
+ radius: [0, '50%'],
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ data: [
+ {
+ value: 335,
+ name: 'Direct Visit'
+ },
+ {
+ value: 234,
+ name: 'Union Ad'
+ },
+ {
+ value: 1548,
+ name: 'Search Engine'
+ }
+ ]
+ }
+};
+```
+
+从而避免了减少我们去找调色盘颜色然去一一设置的麻烦。
+
+## 更丰富的极坐标柱状图和饼图的标签显示
+
+这个版本中我们给极坐标上的柱状图添加了标签的显示，并且支持丰富使用的标签定位配置。
+
+对于饼图，我们现在会默认在无可显示数据的时候显示一个灰色的圆以防止画面中完全空白，如果你不想要显示这个灰色的圆，可以设置`showEmptyCircle: false`关闭
+
+## 高维数据的性能增强
+
+我们从 4.0 开始引入了 [dataset](${optionPath}dataset) 用来管理图表的数据，通常情况下`dataset`提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维（>100）数据的场景下，我们还是会碰到一些性能急剧下降的问题，比如下面这种通过一千个系列去可视化千维维度的场景（来自 [#11907](https://github.com/apache/echarts/issues/11907)），甚至可能导致假死。
+
+```js
+const indices = Array.from(Array(1000), (_, i) => {
+ return `index${i}`;
+});
+const option = {
+ xAxis: { type: 'category' },
+ yAxis: {},
+ dataset: {
+ // dimension: ['date', ...indices],
+ source: Array.from(Array(10), (_, i) => {
+ return {
+ date: i,
+ ...indices.reduce((item, next) => {
+ item[next] = Math.random() * 100;
+ return item;
+ }, {})
+ };
+ })
+ },
+ series: indices.map(index => {
+ return { type: 'line', name: index };
+ })
+};
+```
+
+产生这个性能问题的原因是因为我们在底层会在每个系列都按照系列的需要处理一遍这个超高维度的 dataset 并且保存一份处理过后的数据以及数据的维度等元信息。这意味着刚才那个例子中需要处理并保存`1000 x 1000`个维度的信息，带来了巨大的内存和 GC 的压力，从而导致了高维度的性能的急剧下降。
+
+在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了这个极端场景下的初始化性能。刚才例子的渲染耗时降低到了可接受的`300ms`以下。
+
+这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。
+
+## 自定义系列的类型优化
diff --git a/contents/zh/concepts/chart-size.md b/contents/zh/concepts/chart-size.md
index 3e209ae..7f67b65 100644
--- a/contents/zh/concepts/chart-size.md
+++ b/contents/zh/concepts/chart-size.md
@@ -74,7 +74,7 @@ myChart.resize({
});
```
-> **小贴士：** 阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。
+> 小贴士：阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。
### 容器节点被销毁以及被重建时
@@ -84,4 +84,4 @@ myChart.resize({
正确的做法是，在图表容器被销毁之后，调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 销毁实例，在图表容器重新被添加后再次调用 [echarts.init](${mainSitePath}/api.html#echarts.init) 初始化。
-> **小贴士：** 在容器节点被销毁时，总是应调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 以销毁实例释放资源，避免内存泄漏。
+> 小贴士：在容器节点被销毁时，总是应调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 以销毁实例释放资源，避免内存泄漏。
diff --git a/contents/zh/posts.yml b/contents/zh/posts.yml
index ced30ca..57a5ad4 100644
--- a/contents/zh/posts.yml
+++ b/contents/zh/posts.yml
@@ -17,10 +17,9 @@
- title: 版本介绍
dir: release-note
children:
- - title: ECharts 5.2.0
- draft: true
+ - title: 5.2.0 特性介绍
dir: 5-2-0
- - title: ECharts 5 新特性
+ - title: ECharts 5 特性介绍
dir: v5-feature
- title: ECharts 5 升级指南
dir: v5-upgrade-guide
diff --git a/static/images/5-2-0/universal-transition-2.gif b/static/images/5-2-0/universal-transition-2.gif
new file mode 100644
index 0000000..9b7db83
Binary files /dev/null and b/static/images/5-2-0/universal-transition-2.gif differ
diff --git a/static/images/5-2-0/universal-transition-3.gif b/static/images/5-2-0/universal-transition-3.gif
new file mode 100644
index 0000000..8a7e212
Binary files /dev/null and b/static/images/5-2-0/universal-transition-3.gif differ
diff --git a/static/images/5-2-0/universal-transition.gif b/static/images/5-2-0/universal-transition.gif
new file mode 100644
index 0000000..bbb46a3
Binary files /dev/null and b/static/images/5-2-0/universal-transition.gif differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org