You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2021/08/27 04:12:23 UTC
[echarts-handbook] 01/01: update post and style
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-520
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
commit f154696c4879c477a9e9da37adcb1d7dc1d34ca2
Author: Ovilia <zw...@gmail.com>
AuthorDate: Fri Aug 27 12:11:28 2021 +0800
update post and style
---
components/helper/contributors.ts | 19 ++++---
contents/zh/basics/release-note/5-2-0.md | 88 ++++++++++++++++++++++++--------
contents/zh/posts.yml | 4 +-
layouts/default.vue | 64 +++++++++++++----------
4 files changed, 117 insertions(+), 58 deletions(-)
diff --git a/components/helper/contributors.ts b/components/helper/contributors.ts
index 9c45c7d..0f07bb5 100644
--- a/components/helper/contributors.ts
+++ b/components/helper/contributors.ts
@@ -1,7 +1,4 @@
export default {
- "contents/zh/meta/edit-guide.md": [
- "pissang"
- ],
"contents/zh/get-started.md": [
"Ovilia",
"pissang"
@@ -215,7 +212,8 @@ export default {
"pissang"
],
"contents/zh/application/chart-types/bar/waterfall.md": [
- "Ovilia"
+ "Ovilia",
+ "pissang"
],
"contents/zh/application/chart-types/bar/stacked-bar.md": [
"Ovilia",
@@ -230,9 +228,11 @@ export default {
"pissang"
],
"contents/zh/application/chart-types/bar/bar-race.md": [
- "Ovilia"
+ "Ovilia",
+ "pissang"
],
"contents/en/posts.yml": [
+ "Ovilia",
"pissang"
],
"contents/en/meta/edit-guide.md": [
@@ -420,7 +420,9 @@ export default {
"pissang"
],
"contents/en/application/chart-types/bar/waterfall.md": [
- "Hansz00"
+ "Hansz00",
+ "Ovilia",
+ "pissang"
],
"contents/en/application/chart-types/bar/stacked-bar.md": [
"Hansz00",
@@ -435,12 +437,15 @@ export default {
"pissang"
],
"contents/en/application/chart-types/bar/bar-race.md": [
- "Hansz00"
+ "Hansz00",
+ "Ovilia",
+ "pissang"
],
"contents/.prettierrc": [
"pissang"
],
"contents/zh/posts.yml": [
+ "Ovilia",
"pissang"
]
};
\ No newline at end of file
diff --git a/contents/zh/basics/release-note/5-2-0.md b/contents/zh/basics/release-note/5-2-0.md
index 7421e5b..9c11789 100644
--- a/contents/zh/basics/release-note/5-2-0.md
+++ b/contents/zh/basics/release-note/5-2-0.md
@@ -1,10 +1,10 @@
# Apache ECharts 5.2.0 介绍
-## 全局过渡动画 Universal Transition
+## 全局过渡动画
-在 Apache ECharts 中我们一直把自然流畅的过渡动画作为我们的一个重要特性，我们希望能够通过动画去关联数据的变化，让数据的变化不会突兀的反应在图形上。
+在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种全局的**过渡动画（Universal Transition）**是如何为图表增加表现力和叙事能力的。
-在之前的版本中，过渡动画主要应用在了相同类型的图形的位置、尺寸、形状上，而且只能作用在相同类型的系列上。比如，下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化：
+在之前的版本中，过渡动画有一定的局限性：只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。比如，下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化：
```js live {layout: 'lr'}
function makeRandomData() {
@@ -42,9 +42,11 @@ setInterval(() => {
}, 2000);
```
-### 跨系列的形变动画
+而从 5.2.0 开始，我们引入了更强大的全局过渡动画能力，让过渡动画不再局限于相同类型的系列之间。现在，我们可以使用这种跨系列的形变，为任意类型的系列和任意类型的图形做形变动画。
+
+这会有多酷呢？我们一起来感受一下！
-这次从 5.2.0 开始，我们引入了更强大的全局过渡动画 Universal Transition，让过渡动画不再局限于相同类型的系列之间。
+### 跨系列的形变动画
在设置`universalTransition: true`开启全局过渡动画后，从饼图切换成柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的进行动画过渡。
@@ -118,13 +120,13 @@ setInterval(() => {
-> 注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应
+> 注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。
-### 数据的分裂和合并动画
+### 数据的分裂/合并动画
-除了常见的数据更新，有时候我们还会碰到数据的聚合，下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂，合并这样的动画效果，来能够正确的通过图形的动画变换表达出数据的变换。
+除了常见的数据值的更新，有时候我们还会碰到数据的聚合、下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂、合并这样的动画效果，来通过正确的图形动画表达出数据的变换。
-为了能够表达数据之间多对多的联系，在 5.2.0 中我们新引入了一个数据组`groupId`的概念，我们可以通过 [series.dataGroupId](${optionPath}series-bar.dataGroupId) 设置整个系列所属的组，或者更细粒度的通过 [series.data.groupId](${optionPath}series-bar.dataGroupId) 设置每个数据所属的组。如果你使用了`dataset`管理数据则更方便了，可以使用`encode.itemGroupId`来指定一个维度编码成`groupId`。
+为了能够表达数据之间可能存在的多对多联系，在 5.2.0 中我们新引入了一个数据组`groupId`的概念，我们可以通过 [series.dataGroupId](${optionPath}series-bar.dataGroupId) 设置整个系列所属的组，或者更细粒度的通过 [series.data.groupId](${optionPath}series-bar.dataGroupId) 设置每个数据所属的组。如果你使用了`dataset`管理数据则更方便了，可以使用`encode.itemGroupId`来指定一个维度编码成`groupId`。
比如我们要实现一个柱状图下钻的动画，可以将下钻后的整个系列的数据都设置同一个`groupId`，然后跟下钻前的数据对应起来：
@@ -243,12 +245,16 @@ myChart.on('click', event => {
-## 不同粒度的调色盘取色
+全局过渡动画使得数据的关系和演变的表达能力走上新的台阶，为你的可视化创作灵感插上翅膀。
+
+看到这里，我们知道你已经跃跃欲试了。但是别急，5.2.0 还有更多值得一看的新功能。
-在上面全局过渡动画的示例中大家可能有注意到我们使用了一个之前版本没有的`colorBy`配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略：
+## 调色盘的取色策略
-- `'series'` 按照系列取色，同一系列中的所有数据都是用相同的颜色。
-- `'data'` 按照数据项取色，每个数据项都使用不同的颜色。
+在上面全局过渡动画的示例中，大家可能有注意到我们使用了一个之前版本没有的`colorBy`配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略：
+
+- `'series'` 按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色。
+- `'data'` 按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
在之前我们是按照系列的类型固定了这个策略，比如柱状图就是固定`'series'`的策略，而饼图则是固定`'data'`的策略。
@@ -303,11 +309,11 @@ option = {
};
```
-从而避免了减少我们去找调色盘颜色然去一一设置的麻烦。后续我们会对这个配置项做进一步的增强，提供更多粒度的调色盘取色的配置。
+这一配置项可以让我们避免了去找调色盘颜色然去一一设置的麻烦，可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强，提供更多的调色盘取色的策略。
-## 极坐标柱状图的标签显示
+## 极坐标柱状图的标签
-这个版本中我们给极坐标上的柱状图添加了标签的显示，并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图：
+这个版本中我们实现了极坐标上的柱状图的标签，并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图：
```js live {layout: 'lr'}
option = {
@@ -343,9 +349,11 @@ option = {
-## 空数据饼图样式
+这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力，让文字清晰地匹配对应的数据。
+
+## 空数据的饼图样式
-在之前，如果饼图没有数据，画面中可能就是完全空白的，因为没有任何的反馈，所以用户会疑惑是不是出 bug 了导致图中没有内容。
+在之前的版本中，如果饼图没有数据，画面中可能就是完全空白的，因为没有任何的视觉元素，所以用户会疑惑是不是出 bug 了导致图中没有内容。
为了解决这个问题，这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过`emptyCircleStyle`配置这个占位圆的样式。
@@ -371,7 +379,7 @@ option = {
## 高维数据的性能增强
-我们从 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) => {
@@ -398,15 +406,15 @@ const option = {
};
```
-产生这个性能问题的原因是因为我们在底层会在每个系列都按照系列的需要处理一遍这个超高维度的 dataset 并且保存一份处理过后的数据以及数据的维度等元信息。这意味着刚才那个例子中需要处理并保存`1000 x 1000`个维度的信息，带来了巨大的内存和 GC 的压力，从而导致了高维度的性能的急剧下降。
+产生这个性能问题的原因是因为我们在底层会在每个系列都按照系列的需要处理一遍这个超高维度的 dataset 并且保存一份处理过后的数据以及数据的维度等元信息。这意味着刚才那个例子中需要处理并保存`1000 x 1000`个维度的信息，带来了巨大的内存和垃圾回收的压力，从而导致了高维度的性能的急剧下降。
-在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了这个极端场景下的初始化性能。刚才例子的渲染耗时也从假死降低到了可接受的`300ms`以下。
+在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了这个极端场景下的初始化性能。刚才例子的渲染耗时也从假死降低到了可接受的 300 毫秒以下。
这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。
## 自定义系列的类型优化
-自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的上手成本会更高，而且容易出错，因此在这个版本中，我们进一步的优化了自定义系列中的核心方法`renderItem`的类型，对于`renderItem`的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性：
+自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的学习曲线可能有些陡峭，而且容易出错。因此在这个版本中，我们进一步的优化了自定义系列中的核心方法`renderItem`的类型，对于`renderItem`的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性：
```ts
series = {
@@ -438,3 +446,39 @@ series = {
}
};
```
+
+## 小结
+
+以上我们介绍了 5.2.0 中的新特性以及优化，如果你对其中的一些特性感兴趣，不妨在官网[下载](https://echarts.apache.org/zh/download.html)最新版本亲自体验一下。
+
+如果你对 Apache ECharts 接下来的计划感兴趣，也可以在 [GitHub Milestone](https://github.com/apache/echarts/milestones) 关注我们的开发计划。也非常欢迎加入我们的贡献者行列（在 [Wiki](https://github.com/apache/echarts/wiki) 中了解更多）。
+
+### 版本更新记录
+
++ [Feature] [geo/map] 在 transform 和 svg解析器中支持 skew。[#755](https://github.com/ecomfe/zrender/issues/755) ([pissang](https://github.com/pissang))
++ [Feature] [tree] 在`tooltip`组件的回调函数参数中新增`treeAncestors`属性。[#14957](https://github.com/apache/echarts/issues/14957) ([stephenLYZ](https://github.com/stephenLYZ))
++ [Feature] [i18n] 增加斯洛文尼亚语翻译。[#14758](https://github.com/apache/echarts/issues/14758) ([dkrat7](https://github.com/dkrat7))
++ [Fix] [canvas] 修复可能出现额外的`ctx.save`调用的问题。[#765](https://github.com/ecomfe/zrender/issues/765) ([pissang](https://github.com/pissang))
++ [Fix] [path] 优化小线段时，小的子路径可能被忽略的问题。[#760](https://github.com/ecomfe/zrender/issues/760) ([pissang](https://github.com/pissang))
++ [Fix] [tooltip] 当没指定组件 `tooltip.formatter` 时，用一个特定的默认 `formatter`，而不再用全局的 `tooltip.formatter` 作为默认。修复 [#14939](https://github.com/apache/echarts/issues/14939)。[#14972](https://github.com/apache/echarts/issues/14972) ([100pah](https://github.com/100pah))
++ [Fix] [resize] 以 `lazyUpdate: true` 模式调用 `setOption` 后，调用 `resize`，会产生错误。修复 [#14846](https://github.com/apache/echarts/issues/14846)，修复 [#11395](https://github.com/apache/echarts/issues/11395)。[#14934](https://github.com/apache/echarts/issues/14934) ([100pah](https://github.com/100pah))
++ [Fix] [treemap] 用不同数据运行 `setOption` 第二次时出现错误。[#14930](https://github.com/apache/echarts/issues/14930) ([Map1en](https://github.com/Map1en))
++ [Fix] [tree] 用不同数据运行 `setOption` 第二次时出现错误。[#14905](https://github.com/apache/echarts/issues/14905) ([Map1en](https://github.com/Map1en))
++ [Fix] [option] 在合并主题前检查缺少的组件。[#14966](https://github.com/apache/echarts/issues/14966) ([pissang](https://github.com/pissang))
++ [Fix] [text] 修复文本背景色使用渐变色可能会导致渲染错误。[#756](https://github.com/ecomfe/zrender/issues/756) ([pissang](https://github.com/pissang))
++ [Fix] [clip] 修复了，当 `clip:false` 时，line 系列会报错。[#14813](https://github.com/apache/echarts/issues/14813) ([plainheart](https://github.com/plainheart))
++ [Fix] [legend] 优化代码兼容性 [#14810](https://github.com/apache/echarts/issues/14810) ([plainheart](https://github.com/plainheart))
++ [Fix] [label] 保证临时 symbol 的标签在线和区域多边形的前面。[#14993](https://github.com/apache/echarts/issues/14993) ([plainheart](https://github.com/plainheart))
++ [Fix] [stack] 修复数字 `getPrecisionSafe` 在科学符号如 `3.45e-1` 上执行不正确。消除 stack 功能中浮点数计算精度问题。[#15015](https://github.com/apache/echarts/issues/15015) ([100pah](https://github.com/100pah))
++ [Fix] [dataZoom] 当 `toolbox.feature.dataZoom` 没有声明时，不应该有数据过滤。[#15015](https://github.com/apache/echarts/issues/15015) ([100pah](https://github.com/100pah))
++ [Fix] [line] 避免在 `linearMap` 利用中出现无限值。[#14602](https://github.com/apache/echarts/issues/14602) ([plainheart](https://github.com/plainheart))
++ [Fix] [timeline] 当播放到最后时触发 `timelineplaychange` 事件。[#14620](https://github.com/apache/echarts/issues/14620) ([Ovilia](https://github.com/Ovilia))
++ [Fix] [custom] 修复自定义系列中的渐进式渲染。[#14920](https://github.com/apache/echarts/issues/14920) ([pissang](https://github.com/pissang))
++ [Fix] [brush] 修改 brush 的 clip 范围。[#14569](https://github.com/apache/echarts/issues/14569) ([susiwen8](https://github.com/susiwen8))
++ [Fix] [label] 修复标签不在最上的错误。[#14542](https://github.com/apache/echarts/issues/14542) ([plainheart](https://github.com/plainheart))
++ [Fix] [toolbox] 修复自定义工具箱按钮的 `show` 选项不起作用。[#14408](https://github.com/apache/echarts/issues/14408) ([plainheart](https://github.com/plainheart))
++ [Fix] [type] 修正位置回调的返回类型。修复 [#15030](https://github.com/apache/echarts/issues/15030)。[#15031](https://github.com/apache/echarts/issues/15031) ([congjiujiu](https://github.com/congjiujiu))
++ [Fix] [type] 导出 cbs 及其参数类型。[#14871](https://github.com/apache/echarts/issues/14871) ([dougalg](https://github.com/dougalg))
++ [Fix] [type] 从 PatternObject 中删除非必须的属性，并修复一些类型问题。[#759](https://github.com/ecomfe/zrender/issues/759) ([plainheart](https://github.com/plainheart))
++ [Fix] [type] 把 `LineEndLabelOption.valueAnimation` 改为可选。[#14806](https://github.com/apache/echarts/issues/14806) ([Bilge](https://github.com/Bilge))
++ [Fix] [type] startValue 和 endValue 的类型修复。修复 [#14412](https://github.com/apache/echarts/issues/14412)。[#14775](https://github.com/apache/echarts/issues/14775) ([dileepyelleti](https://github.com/dileepyelleti))
diff --git a/contents/zh/posts.yml b/contents/zh/posts.yml
index 556b3c0..e6aa5e8 100644
--- a/contents/zh/posts.yml
+++ b/contents/zh/posts.yml
@@ -17,12 +17,12 @@
- title: 版本介绍
dir: release-note
children:
- - title: 5.2.0 特性介绍
- dir: 5-2-0
- title: ECharts 5 特性介绍
dir: v5-feature
- title: ECharts 5 升级指南
dir: v5-upgrade-guide
+ - title: 5.2.0
+ dir: 5-2-0
- title: 概念篇
dir: concepts
children:
diff --git a/layouts/default.vue b/layouts/default.vue
index e7eb6a0..ab41291 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -82,29 +82,42 @@ body {
@apply text-blue-gray-500;
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-weight: 500;
+
+ &:hover .permalink {
+ display: inline-block;
+ }
+ }
+
h1 {
margin: 40px 0 30px 0;
font-size: 36px;
- @apply text-blue-gray-800;
- font-weight: 500;
+ font-weight: 700;
+ @apply text-blue-gray-700;
}
h2 {
- margin: 50px 0 20px 0;
- padding-bottom: 15px;
+ margin: 100px 0 20px 0;
+ padding-bottom: 20px;
font-size: 26px;
- @apply text-blue-gray-900;
+ @apply text-blue-gray-600;
border-bottom: 1px solid #eee;
}
h1 + h2 {
- margin-top: 30px;
+ margin-top: 40px;
}
h3 {
- margin: 30px 0 20px 0;
- font-size: 22px;
- @apply text-blue-gray-700;
+ margin: 80px 0 30px 0;
+ font-size: 24px;
+ @apply text-blue-gray-600;
}
h4 {
@@ -127,17 +140,6 @@ body {
display: none;
}
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- &:hover .permalink {
- display: inline-block;
- }
- }
-
blockquote {
margin: 15px 0;
padding: 20px 15px;
@@ -186,12 +188,12 @@ body {
p,
li {
- line-height: 1.8em;
+ line-height: 1.7em;
font-size: 16px;
}
p {
- margin: 20px 0;
+ margin: 15px 0;
}
img {
@@ -222,7 +224,7 @@ body {
}
.toc-container-header {
- font-size: 14px;
+ font-size: 16px;
font-weight: bold;
}
@@ -233,11 +235,19 @@ body {
li {
list-style: none;
font-size: 14px;
- }
- li.toc3 {
- padding-left: 10px;
- font-size: 12px;
+ &.toc2 {
+ font-size: 15px;
+ }
+
+ &.toc3 {
+ font-size: 14px;
+ padding-left: 15px;
+ }
+
+ &.toc3 + .toc2 {
+ margin-top: 15px;
+ }
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org