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/22 08:54:39 UTC
[echarts-handbook] branch master updated: update 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 1b670e2 update 5.2.0 feature
1b670e2 is described below
commit 1b670e21c275540147a59060ced0a3aa1d7e3f1f
Author: pissang <bm...@gmail.com>
AuthorDate: Sun Aug 22 16:54:31 2021 +0800
update 5.2.0 feature
---
contents/zh/basics/release-note/5-2-0.md | 223 ++++++++++++++++++++++++++++-
static/images/5-2-0/group-transition-2.gif | Bin 0 -> 1821177 bytes
static/images/5-2-0/group-transition.gif | Bin 0 -> 1039853 bytes
static/images/5-2-0/polar-bar-label.jpg | Bin 0 -> 131245 bytes
4 files changed, 216 insertions(+), 7 deletions(-)
diff --git a/contents/zh/basics/release-note/5-2-0.md b/contents/zh/basics/release-note/5-2-0.md
index f112258..5e60b6b 100644
--- a/contents/zh/basics/release-note/5-2-0.md
+++ b/contents/zh/basics/release-note/5-2-0.md
@@ -122,7 +122,126 @@ setInterval(() => {
### 数据的分裂和合并动画
-除了常见的数据更新，有时候我们还会碰到数据的聚合，下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多分裂，合并这样的动画效果，来能够正确的通过图形的动画变换表达出数据的变换。
+除了常见的数据更新，有时候我们还会碰到数据的聚合，下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂，合并这样的动画效果，来能够正确的通过图形的动画变换表达出数据的变换。
+
+为了能够表达数据之间多对多的联系，在 5.2.0 中我们新引入了一个数据组`groupId`的概念，我们可以通过 [series.dataGroupId](${optionPath}series-bar.dataGroupId) 设置整个系列所属的组，或者更细粒度的通过 [series.data.groupId](${optionPath}series-bar.dataGroupId) 设置每个数据所属的组。如果你使用了`dataset`管理数据则更方便了，可以使用`encode.itemGroupId`来指定一个维度编码成`groupId`。
+
+比如我们要实现一个柱状图下钻的动画，可以将下钻后的整个系列的数据都设置同一个`groupId`，然后跟下钻前的数据对应起来：
+
+```js [live-lr]
+option = {
+ xAxis: {
+ data: ['Animals', 'Fruits', 'Cars']
+ },
+ yAxis: {},
+ dataGroupId: '',
+ animationDurationUpdate: 500,
+ series: {
+ type: 'bar',
+ id: 'sales',
+ data: [
+ {
+ value: 5,
+ groupId: 'animals'
+ },
+ {
+ value: 2,
+ groupId: 'fruits'
+ },
+ {
+ value: 4,
+ groupId: 'cars'
+ }
+ ],
+ universalTransition: {
+ enabled: true,
+ divideShape: 'clone'
+ }
+ }
+};
+
+const drilldownData = [
+ {
+ dataGroupId: 'animals',
+ data: [
+ ['Cats', 4],
+ ['Dogs', 2],
+ ['Cows', 1],
+ ['Sheep', 2],
+ ['Pigs', 1]
+ ]
+ },
+ {
+ dataGroupId: 'fruits',
+ data: [
+ ['Apples', 4],
+ ['Oranges', 2]
+ ]
+ },
+ {
+ dataGroupId: 'cars',
+ data: [
+ ['Toyota', 4],
+ ['Opel', 2],
+ ['Volkswagen', 2]
+ ]
+ }
+];
+
+myChart.on('click', function(event) {
+ if (event.data) {
+ const subData = drilldownData.find(function(data) {
+ return data.dataGroupId === event.data.groupId;
+ });
+ if (!subData) {
+ return;
+ }
+ myChart.setOption({
+ xAxis: {
+ data: subData.data.map(function(item) {
+ return item[0];
+ })
+ },
+ series: {
+ type: 'bar',
+ id: 'sales',
+ dataGroupId: subData.dataGroupId,
+ data: subData.data.map(function(item) {
+ return item[1];
+ }),
+ universalTransition: {
+ enabled: true,
+ divideShape: 'clone'
+ }
+ },
+ graphic: [
+ {
+ type: 'text',
+ left: 50,
+ top: 20,
+ style: {
+ text: 'Back',
+ fontSize: 18
+ },
+ onclick: function() {
+ myChart.setOption(option, true);
+ }
+ }
+ ]
+ });
+ }
+});
+```
+
+通过`groupId`，我们还可以实现更丰富的聚合，下钻动画。
+
+数据的聚合：
+
+
+
+单系列下钻成两个系列：
+
+
## 不同粒度的调色盘取色
@@ -184,17 +303,74 @@ option = {
};
```
-从而避免了减少我们去找调色盘颜色然去一一设置的麻烦。
+从而避免了减少我们去找调色盘颜色然去一一设置的麻烦。后续我们会对这个配置项做进一步的增强，提供更多粒度的调色盘取色的配置。
+
+## 极坐标柱状图的标签显示
+
+这个版本中我们给极坐标上的柱状图添加了标签的显示，并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图：
+
+```js [live-lr]
+option = {
+ angleAxis: {
+ show: false,
+ max: 10
+ },
+ radiusAxis: {
+ show: false,
+ type: 'category',
+ data: ['AAA', 'BBB', 'CCC', 'DDD']
+ },
+ polar: {},
+ series: [
+ {
+ type: 'bar',
+ data: [3, 4, 5, 6],
+ colorBy: 'data',
+ roundCap: true,
+ label: {
+ show: true,
+ position: 'start',
+ formatter: '{b}'
+ },
+ coordinateSystem: 'polar'
+ }
+ ]
+};
+```
-## 更丰富的极坐标柱状图和饼图的标签显示
+更多标签位置的配置：
-这个版本中我们给极坐标上的柱状图添加了标签的显示，并且支持丰富使用的标签定位配置。
+
-对于饼图，我们现在会默认在无可显示数据的时候显示一个灰色的圆以防止画面中完全空白，如果你不想要显示这个灰色的圆，可以设置`showEmptyCircle: false`关闭
+## 空数据饼图样式
+
+在之前，如果饼图没有数据，画面中可能就是完全空白的，因为没有任何的反馈，所以用户会疑惑是不是出 bug 了导致图中没有内容。
+
+为了解决这个问题，这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过`emptyCircleStyle`配置这个占位圆的样式。
+
+```js [live-lr]
+option = {
+ series: [
+ {
+ type: 'pie',
+ data: [],
+ // showEmptyCircle: false,
+ emptyCircleStyle: {
+ // 将样式改为空心圆
+ color: 'transparent',
+ borderColor: '#ddd',
+ borderWidth: 1
+ }
+ }
+ ]
+};
+```
+
+如果不想要显示这个灰色的圆，也可以设置`showEmptyCircle: false`关闭。
## 高维数据的性能增强
-我们从 4.0 开始引入了 [dataset](${optionPath}dataset) 用来管理图表的数据，通常情况下`dataset`提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维（>100）数据的场景下，我们还是会碰到一些性能急剧下降的问题，比如下面这种通过一千个系列去可视化千维维度的场景（来自 [#11907](https://github.com/apache/echarts/issues/11907)），甚至可能导致假死。
+我们从 4.0 开始引入了 [dataset](${optionPath}dataset) 用来管理图表的数据，通常情况下`dataset`提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维（>100）数据的场景下，我们还是会碰到一些性能急剧下降的问题，比如下面这种通过一千个系列去可视化千维数据的场景（来自 [#11907](https://github.com/apache/echarts/issues/11907)），甚至可能导致假死。
```js
const indices = Array.from(Array(1000), (_, i) => {
@@ -223,8 +399,41 @@ const option = {
产生这个性能问题的原因是因为我们在底层会在每个系列都按照系列的需要处理一遍这个超高维度的 dataset 并且保存一份处理过后的数据以及数据的维度等元信息。这意味着刚才那个例子中需要处理并保存`1000 x 1000`个维度的信息，带来了巨大的内存和 GC 的压力，从而导致了高维度的性能的急剧下降。
-在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了这个极端场景下的初始化性能。刚才例子的渲染耗时降低到了可接受的`300ms`以下。
+在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了这个极端场景下的初始化性能。刚才例子的渲染耗时也从假死降低到了可接受的`300ms`以下。
这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。
## 自定义系列的类型优化
+
+自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的上手成本会更高，而且容易出错，因此在这个版本中，我们进一步的优化了自定义系列中的核心方法`renderItem`的类型，对于`renderItem`的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性：
+
+```ts
+series = {
+ type: 'custom',
+ renderItem(params) {
+ return {
+ type: 'group',
+ // group 类型使用 children 存储其它类型的子元素
+ children: [
+ {
+ type: 'circle',
+ // circle 拥有下面这些可以配置的 shape 属性
+ shape: { r: 10, cx: 0, cy: 0 },
+ // 可以配置的样式
+ style: { fill: 'red' }
+ },
+ {
+ type: 'rect',
+ // rect 拥有下面这些可以配置的 shape 属性
+ shape: { x: 0, y: 0, width: 100, height: 100 }
+ },
+ {
+ type: 'path',
+ // 自定义路径图形
+ shape: { d: '...' }
+ }
+ ]
+ };
+ }
+};
+```
diff --git a/static/images/5-2-0/group-transition-2.gif b/static/images/5-2-0/group-transition-2.gif
new file mode 100644
index 0000000..caf3dd7
Binary files /dev/null and b/static/images/5-2-0/group-transition-2.gif differ
diff --git a/static/images/5-2-0/group-transition.gif b/static/images/5-2-0/group-transition.gif
new file mode 100644
index 0000000..8d13ee9
Binary files /dev/null and b/static/images/5-2-0/group-transition.gif differ
diff --git a/static/images/5-2-0/polar-bar-label.jpg b/static/images/5-2-0/polar-bar-label.jpg
new file mode 100644
index 0000000..ee6853d
Binary files /dev/null and b/static/images/5-2-0/polar-bar-label.jpg differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org