You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/12/04 10:11:30 UTC
[incubator-echarts-doc] branch next updated (1596d17 -> 4105a60)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git.
from 1596d17 Merge branch 'next' of https://github.com/apache/incubator-echarts-doc into next
new 98749c9 doc: add custom series transition.
new 4ea19d4 Merge branch 'next' of github.com:apache/incubator-echarts-doc into next
new 4105a60 doc: update changelog.
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
en/changelog.md | 41 +++---
en/option/partial/zr-graphic.md | 296 +++++++++++++++++++++++++++++++++++++++-
zh/changelog.md | 198 +++++++++++++++++++++++++++
zh/option/partial/zr-graphic.md | 286 +++++++++++++++++++++++++++++++++++++-
4 files changed, 797 insertions(+), 24 deletions(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-doc] 03/03: doc: update changelog.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
commit 4105a609a3a21b5036ba198400dd5303ae230ba3
Author: 100pah <su...@gmail.com>
AuthorDate: Fri Dec 4 18:11:04 2020 +0800
doc: update changelog.
---
en/changelog.md | 41 ++++++------
zh/changelog.md | 198 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 219 insertions(+), 20 deletions(-)
diff --git a/en/changelog.md b/en/changelog.md
index 869f39f..0eff50c 100644
--- a/en/changelog.md
+++ b/en/changelog.md
@@ -1,6 +1,5 @@
-
## v5.0.0
-<div class="time">2020-11-10</div>
+<div class="time">2020-12-03</div>
+ Migrate codebase to TypeScript:
+ The entire code base have been migrated to TypeScript.
@@ -22,12 +21,10 @@
+ Make special label alignment, and adjust label position, etc.. See the examples [pie-alignTo](https://echarts.apache.org/next/examples/en/editor.html?c=pie-alignTo), [pie-labelLine-adjust](https://echarts.apache.org/next/examples/en/editor.html?c=pie-labelLine-adjust), [pie-label-distanceToLabelLine](https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/pie-label-distanceToLabelLine), [pie-label-bleedMargin](https://echarts.apache.org/next/examples/en/editor.htm [...]
+ Make label draggable.
+ Support `labelLine` for all series, which is very useful for guiding element to related labels when labels have to be far away from the elements. See examples [scatter-label-align-right](https://echarts.apache.org/next/examples/en/editor.html?c=scatter-label-align-right), [scatter-label-align-top](https://echarts.apache.org/next/examples/en/editor.html?c=scatter-label-align-top). Related issues: [#11534](https://github.com/apache/incubator-echarts/issues/11534), [#12971](https://gi [...]
- + See more details in [#12911](https://github.com/apache/incubator-echarts/pull/12911).
-+ [Feature] Chart racing, bar realtime sorting and label animation:
- + Bar race and line race is a popular way to show time series data, and visualize the change in trends over time.
- + We provide this capability by bar sorting (`series.sort` and `series.realtimeSort`) and end label animation (`series.label.valueAnimation`, `series.endLabel`). And this individual options can be used in other related scenarios.
- + See examples [bar-race](https://echarts.apache.org/next/examples/en/editor.html?c=bar-race), and see more details in the original pull request [#12484](https://github.com/apache/incubator-echarts/pull/12484), [#13246](https://github.com/apache/incubator-echarts/pull/13246) and [#13045](https://github.com/apache/incubator-echarts/pull/13045).
- + Other the racing of some special customized chart can be implemented by custom series and the callback of renderItem `during`. See the example [custom-spiral-race](https://echarts.apache.org/next/examples/en/editor.html?c=custom-spiral-race), and see more details in [#12775](https://github.com/apache/incubator-echarts/pull/12775).
+ + Support `series.endLabel` in line series. Label can be displayed at the end of a line.
+ + Support label text animation, that is, the transition animation on text when the number text changed. Can be enabled by `series.label.valueAnimation`, `series.endLabel.valueAnimation`. See more details in [#13246](https://github.com/apache/incubator-echarts/pull/13246) and [#13045](https://github.com/apache/incubator-echarts/pull/13045).
+ + See other details in [#12911](https://github.com/apache/incubator-echarts/pull/12911).
++ [Feature] Support bar realtime sorting by `series.realtimeSort`. See examples [bar-race](https://echarts.apache.org/next/examples/en/editor.html?c=bar-race), and see more details in the original pull request [#12484](https://github.com/apache/incubator-echarts/pull/12484).
+ [Feature] Support data transform plug-in:
+ Data transform is a new set of configurations and APIs to enable data transformation based on `dataset` in declarative way. Built-in or third-party data transformer can be made as plug-ins to provide various transform algorithms. ECharts users can use those transformers in ECharts option.
+ See examples [data-transform-filter](https://echarts.apache.org/next/examples/en/editor.html?c=data-transform-filter), [data-transform-sort-bar](https://echarts.apache.org/next/examples/en/editor.html?c=data-transform-sort-bar), [data-transform-multiple-pie](https://echarts.apache.org/next/examples/en/editor.html?c=data-transform-multiple-pie), [doc-example/data-transform-multiple-sort-bar](https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/data-transform-multipl [...]
@@ -36,8 +33,10 @@
+ [Feature] Support `decal`:
+ Decal provides a new visual type that does not only augment aria scenarios but also enrich visual effects.
+ See more details in [#13304](https://github.com/apache/incubator-echarts/pull/13304).
-+ [Feature] Provide custom series animation configuration in transform, style, shape morphing/combining/separating.
- + See examples [custom-combine-separate-morph](https://echarts.apache.org/next/examples/en/editor.html?c=custom-combine-separate-morph), [custom-one-to-one-morph](https://echarts.apache.org/next/examples/en/editor.html?c=custom-one-to-one-morph), [custom-story-transition](https://echarts.apache.org/next/examples/en/editor.html?c=custom-story-transition), [custom-spiral-race](https://echarts.apache.org/next/examples/en/editor.html?c=custom-spiral-race), [custom-gauge](https://echarts. [...]
++ [Feature] Support transition animation in custom series.
+ + Transition animation can be auto performed by setting property `transition` for transform related properties, style properties and shape properties. See [custom-gauge](https://echarts.apache.org/next/examples/en/editor.html?c=custom-gauge).
+ + Support morphing/combining/separating by setting property `morph` on elements definitions. See examples [custom-combine-separate-morph](https://echarts.apache.org/next/examples/en/editor.html?c=custom-combine-separate-morph), [custom-one-to-one-morph](https://echarts.apache.org/next/examples/en/editor.html?c=custom-one-to-one-morph), [custom-story-transition](https://echarts.apache.org/next/examples/en/editor.html?c=custom-story-transition), [custom-spiral-race](https://echarts.apa [...]
+ + Support customized transition animation by callback `during`. See the example [custom-spiral-race](https://echarts.apache.org/next/examples/en/editor.html?c=custom-spiral-race), and see more details in [#12775](https://github.com/apache/incubator-echarts/pull/12775).
+ See more details in [#12775](https://github.com/apache/incubator-echarts/pull/12775), [#13468](https://github.com/apache/incubator-echarts/pull/13468), [#13271](https://github.com/apache/incubator-echarts/pull/13271).
+ [Feature] Provide a more powerful gauge:
+ See examples [gauge-barometer](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-barometer), [gauge-clock](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-clock), [gauge-multi-title](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-multi-title), [gauge-progress](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-progress), [gauge-ring](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-ring), [gauge-grade](https [...]
@@ -63,7 +62,7 @@
+ [Feature] Make tooltip more configurable:
+ Support to add CSS class to tooltip. [#13383](https://github.com/apache/incubator-echarts/pull/13383).
+ Support to return DOM in tooltip formatter. [#13469](https://github.com/apache/incubator-echarts/pull/13469).
-+ [Feature] Support to partially remove components or replace components:
++ [Feature] Support to partially remove components or replace components (`replaceMerge`):
+ See details in [#12987](https://github.com/apache/incubator-echarts/pull/12987).
+ [Enhancement] Enhance performance in some scenarios:
+ Improve large line performance, and support data sampling in largest-triangle-three-buckets algorithm.
@@ -77,6 +76,7 @@
+ [Feature] Sankey supports `lineStyle: {color: 'gradient'}`.
+ [Feature] `markPoint.data.type` and `markArea.data.type` support the value `'median'`.
+ [Feature] Support axis filter in specific cases. [#12832](https://github.com/apache/incubator-echarts/pull/12832).
+ + [Enhancement] Pause `requestAnimationFrame` when rendering finished.
+ [Fix] Fix bmap first layout may be incorrect if container's layout is flex or grid. [#13432](https://github.com/apache/incubator-echarts/pull/13432).
+ [Fix] Hide tooltip when mouse leaves the chart [#13382](https://github.com/apache/incubator-echarts/pull/13382).
+ [Fix] Fix bmap personalization style does not work. [#13214](https://github.com/apache/incubator-echarts/pull/13214).
@@ -86,13 +86,13 @@
+ [Fix] Keep axis tooltip open on refresh. [#13100](https://github.com/apache/incubator-echarts/pull/13100).
+ [Fix] Skip rendering for data out of axis content in heatmap. [#12991](https://github.com/apache/incubator-echarts/pull/12991).
+ [Break] Breaking changes against v4.9:
- + The default theme colors has been changed. If intending to use the theme of 4.9-, please set `option.color = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];`.
+ + The default theme colors has been changed. If intending to use the theme of v4.9-, please set `option.color = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];`.
+ Remove built-in map geoJSON. [#13565](https://github.com/apache/incubator-echarts/pull/13565).
+ + Drop the support of the legacy IE8. The previous VML renderer (necessary in IE8) will not be updated to work in v5.0 until someone strongly proposed.
+ The exported modules from `'echarts/lib/export.js'` is not mounted to `'echarts/lib/echarts.js'` by default. If the upper application previously used `import echarts from 'echarts/lib/echarts'` and used any of the exported modules in `'echarts/lib/export.js'`, please change the import code to `import echarts from 'echarts/index.blank'`, where the modules from `'echarts/lib/export.js'` are mounted by default.
+ If the upper application previously imported `src/echarts.js`, `src/chart/*.js` and `src/component/*.js`, it can not work any more because all of the files in `/src` folder are migrated to `*.ts`. Instead, the upper application can import `esm/echarts.js`, `esm/chart/*.js` and `esm/component/*.js`.
- + Drop the support of the legacy IE8. The previous VML renderer (necessary in IE8) will not be updated to work in v5.0 util someone proposed with their real scenario.
+ The priority of the visuals between `visualMap` and `itemStyle`|`lineStyle`|`areaStyle` are reversed. That is, previously, the visuals (i.e., color, symbol, symbolSize, ...) that generated by the component `visualMap` has highest priority, which will overwrite the same visuals specified in `itemStyle`|`lineStyle`|`areaStyle`. That brought trouble to specify specific style to some certain data items. Since v5.0, the visuals specified in `itemStyle`|`lineStyle`|`areaStyle` has highes [...]
- + The behavior of `rich.?.padding` are changed. Previously `rich.?.padding: [11, 22, 33, 44]` indicates that the top padding is `33` and the bottom padding is `11`, which is a buggy implementation because it is different from what CSS did. Since v5.0, we fix it: `rich.?.padding: [11, 22, 33, 44]` indicates the top padding is `11` and the bottom padding is `33`.
+ + The behavior of `rich.?.padding` are changed. Previously `rich.?.padding: [11, 22, 33, 44]` indicates that padding-top is `33` and padding-bottom is `11`, which is a buggy implementation because it is different from what CSS did. Since v5.0, we fix it: `rich.?.padding: [11, 22, 33, 44]` indicates padding-top is `11` and padding-bottom is `33`.
+ `aria` is not included in `dist/echarts.simple(.min).js` since v5.0. But it is still included in `dist/echarts.common(.min).js` and `dist/echarts(.min).js`.
+ [Deprecated] Deprecated usages since v5.0:
+ Transform related props of a graphic element are changed:
@@ -110,10 +110,10 @@
+ The declaration of attached text (or say, rect text) are changed.
+ Prop `style.text` are deprecated in elements except `Text`. Instead, Prop set `textContent` and `textConfig` are provided to support more powerful capabilities.
+ These related props at the left part below are deprecated. Use the right part below instead.
- + textPosition => textConfig.position
- + textOffset => textConfig.offset
- + textRotation => textConfig.rotation
- + textDistance => textConfig.distance
+ + textPosition => textConfig.position
+ + textOffset => textConfig.offset
+ + textRotation => textConfig.rotation
+ + textDistance => textConfig.distance
+ The props at the left part below are deprecated in `style` and `style.rich.?`. Use the props at the right part below instead.
+ textFill => fill
+ textStroke => stroke
@@ -141,8 +141,8 @@
+ It effects these places:
+ In the `graphic` components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]
+ In `custom series`: the declarations of each element in the return of `renderItem`. [compat, but not accurately the same in some complicated cases].
- + Directly use zrender graphic elements. [No compat, breaking change].
- + Chart instance
+ + Directly use zrender API to create graphic elements. [No compat, breaking change].
+ + API on chart instance:
+ `chart.one(...)` is deprecated.
+ `label`:
+ In props `color`, `textBorderColor`, `backgroundColor` and `borderColor`, the value `'auto'` is deprecated. Use the value `'inherit'` instead.
@@ -196,6 +196,7 @@
+ `echarts.format.getTextRect` is deprecated.
+
## v4.9.0
<div class="time">2020-08-06</div>
diff --git a/zh/changelog.md b/zh/changelog.md
index 68ab05a..a614a01 100644
--- a/zh/changelog.md
+++ b/zh/changelog.md
@@ -1,3 +1,201 @@
+## v5.0.0
+<div class="time">2020-12-03</div>
+
++ 代码库迁移为 TypeScript：
+ + 全体代码迁移为 TypeScript。
+ + 对于使用 TS 的上层应用，提供了 `types/dist/echarts.d.ts` 作为类型声明。最低支持到 TS 3.4。
+ + 更多的信息参见 [#13563](https://github.com/apache/incubator-echarts/pull/13563)。
++ [Feature] 状态增强：
+ + 支持了状态切换时的过渡动画。这能提供更好的视觉效果，尤其比如当常见的部分图形元素因为被“高亮/淡出”时。
+ + 对于所有系列，新增了状态 `select` 和 `blur`。它们的配置，同我们已有的 `emphasis` 状态一样。`blur` 状态一般可以用于这样的场景：当部分图形元素被关注时，其他图形元素的淡出样式设置。`select` 状态一般可用于鼠标、触摸或 API 选中图形元素而导致样式改变的场景。
+ + 广泛支持了淡出效果，即，当某一部分图形元素被关注时（通过鼠标、触摸或 API），其他图形元素淡出，以突出被关注的图形元素。可看这些例子： [bar-label-rotation](https://echarts.apache.org/next/examples/en/editor.html?c=bar-label-rotation)、[bar-polar-stack](https://echarts.apache.org/next/examples/en/editor.html?c=bar-polar-stack)、[bar-stack](https://echarts.apache.org/next/examples/en/editor.html?c=bar-stack)、[area-stack](https://echarts.apache.org/next/examples/en/editor.html?c=area-stack)、[dataset-link](https://echarts.apache.org/next/examples/en/ed [...]
+ + 原先在不同系列中，形式不一样但是功能类似的配置项：`highlightPolicy`、`focusNodeAdjacency`、`hoverOffset`，被统一为：`focus`、`blurScope` 和 `scale`。参见示例 [sankey-energy](https://echarts.apache.org/next/examples/en/editor.html?c=sankey-energy)、[graph](https://echarts.apache.org/next/examples/en/editor.html?c=graph)、[sunburst-drink](https://echarts.apache.org/next/examples/en/editor.html?c=sunburst-drink)。
+ + 更多细节可见 [#12925](https://github.com/apache/incubator-echarts/pull/12925) 和 [#12911](https://github.com/apache/incubator-echarts/pull/12911)。
++ [Feature] 标签增强：
+ + 采用一些策略优化了标签显示效果：
+ + 根据背景颜色，智能计算标签文本的颜色，从而使他们更有区分度。
+ + 在饼图（pie chart）上，优化了标签的排布算法，尤其针对标签非常多的时候，避免咋算。详情见 [#6050](https://github.com/apache/incubator-echarts/issues/6050)。
+ + 针对文本超出（overflow）区域的场景，提供了多种配置策略。
+ + 提供一组配置项 `labelLayout`，能够在标签由图表初始定位后，调整其布局。通过 `labelLayout` 中的选项，开发者可以：
+ + 避免标签重叠（参见[scatter-label-align-right](https://echarts.apache.org/next/examples/en/editor.html?c=graph-label-overlap)）。
+ + 实现特殊的标签对齐方式，以及调整标签位置等。参见示例 [pie-alignTo](https://echarts.apache.org/next/examples/en/editor.html?c=pie-alignTo)、[pie-label-line-adjust](https://echarts.apache.org/next/examples/en/editor.html?c=pie-labelLine-adjust)、[pie-label-distanceToLabelLine](https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/pie-label-distanceToLabelLine)、[pie-label-bleedMargin](https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/pie-label-bleedMargin)。
+ + 支持标签拖动。
+ + 在所有系列中都支持 `labelLine` 配置。当标签不得不离图形元素比较远时，`labelLine` 能够视觉关联图形元素和其标签。参见示例 [scatter-label-align-right](https://echarts.apache.org/next/examples/en/editor.html?c=scatter-label-align-right)、[scatter-label-align-top](https://echarts.apache.org/next/examples/en/editor.html?c=scatter-label-align-top)。更多详情请见 [#11534](https://github.com/apache/incubator-echarts/issues/11534)、[#12971](https://github.com/apache/incubator-echarts/issues/12971)。
+ + 在折线图中支持 `series.endLabel`。这样标签可以显示在折线的一端。比较清晰得指示这条折线的含义。
+ + 支持标签文本动画，也就是，标签文本数字变化时的过渡动画。通过 `series.label.valueAnimation`, `series.endLabel.valueAnimation` 可以开关它。其他细节参见 [#13246](https://github.com/apache/incubator-echarts/pull/13246) 和 [#13045](https://github.com/apache/incubator-echarts/pull/13045)。
+ + 更多详情请参见 [#12911](https://github.com/apache/incubator-echarts/pull/12911)。
++ [Feature] 支持柱状图的动态排序。其开关是 `series.realtimeSort`。参见示例 [bar-race](https://echarts.apache.org/next/examples/en/editor.html?c=bar-race)，以及原始的 PR [#12484](https://github.com/apache/incubator-echarts/pull/12484)。
++ [Feature] 支持数据转换插件。
+ + 数据转换是一套新的配置和API，以声明的方式，实现基于 `dataset` 的数据转换。内置或第三方的数据变换器可以作为插件来提供各种转换算法。开发者可以在 `option` 中配置这些转换器。
+ + 参见示例 [data-transform-filter](https://echarts.apache.org/next/examples/en/editor.html?c=data-transform-filter)、[data-transform-sort-bar](https://echarts.apache.org/next/examples/en/editor.html?c=data-transform-sort-bar)、[data-transform-multiple-pie](https://echarts.apache.org/next/examples/en/editor.html?c=data-transform-multiple-pie)、[doc-example/data-transform-multiple-sort-bar](https://echarts.apache.org/next/examples/en/editor.html?c=doc-example/data-transform-multiple-sort-bar) [...]
++ [Feature] 时间轴标签和刻度排列优化。
+ + 查看更多细节在 [#12859](https://github.com/apache/incubator-echarts/pull/12859)。
++ [Feature] 支持贴画纹理（decal）。
+ + 贴画纹理提供了一种新的视觉类型，它不仅增强了无障碍访问（aria)场景，还提供了颜色以外的视觉编码方式，来区分数据。
+ + 更多细节见 [#13304](https://github.com/apache/incubator-echarts/pull/13304)。
++ [Feature] 支持自定义系列的过渡动画。
+ + 通过设置变换相关属性、样式属性和形状属性的 `transition` 属性，可以自动执行过渡动画。参见 [custom-gauge](https://echarts.apache.org/next/examples/en/editor.html?c=custom-gauge)。
+ + 通过对元素定义设置属性`morph`，支持变形/合并/分离。参见示例 [custom-combine-separate-morph](https://echarts.apache.org/next/examples/en/editor.html?c=custom-combine-separate-morph)、[custom-one-to-one-morph](https://echarts.apache.org/next/examples/en/editor.html?c=custom-one-to-one-morph)、[custom-story-transition](https://echarts.apache.org/next/examples/en/editor.html?c=custom-story-transition)、[custom-spiral-race](https://echarts.apache.org/next/examples/en/editor.html?c=custom-spiral-race)。
+ + 通过回调 `during` 支持自定义过渡动画。参见示例 [custom-spiral-race](https://echarts.apache.org/next/examples/en/editor.html?c=custom-spiral-race)，并参见 [#12775](https://github.com/apache/incubator-echarts/pull/12775) 中的更多细节。
+ + 详见 [#12775](https://github.com/apache/incubator-echarts/pull/12775)、[#13468](https://github.com/apache/incubator-echarts/pull/13468)、[#13271](https://github.com/apache/incubator-echarts/pull/13271)。
++ [Feature] 提供了更强大的仪表。
+ + 请参见示例 [gauge-barometer](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-barometer)、[gauge-clock](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-clock)、[gauge-multi-title](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-multi-title)、[gauge-progress](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-progress)、[gauge-ring](https://echarts.apache.org/next/examples/en/editor.html?c=gauge-ring)、[gauge-grade](https://echarts.a [...]
+ + 更多细节见 [#13416](https://github.com/apache/incubator-echarts/pull/13416)。
++ [Feature] 改进了默认的主题和交互方式。其中，为样式和交互，提供了一些新的设定选项。
+ + tooltip 样式增强。参见 [#12947](https://github.com/apache/incubator-echarts/pull/12947)、[#13398](https://github.com/apache/incubator-echarts/pull/13398)、[#13242](https://github.com/apache/incubator-echarts/pull/13242)。
+ + 提供可配置的仪表盘样式。参见 [#12961](https://github.com/apache/incubator-echarts/pull/12961)。
+ + 指针的样式增强。参见 [#13046](https://github.com/apache/incubator-echarts/pull/13046)。
+ + DataZoom 同时支持刷选和拖拽。参见 [#13025](https://github.com/apache/incubator-echarts/pull/13025)。
+ + 支持了 `darkMode`。参见 [12911](https://github.com/apache/incubator-echarts/pull/12911)。
+ + resize 和 DataZoom 动画进行了改善。参见 [#12965](https://github.com/apache/incubator-echarts/pull/12965)。
+ + 柱状图消失时的动画改善。参见 [#12543](https://github.com/apache/incubator-echarts/issues/12543)。
+ + 改进了饼图动画。参见 [#12553](https://github.com/apache/incubator-echarts/issues/12553)。
+ + 其他组件样式增强。[#13008](https://github.com/apache/incubator-echarts/pull/13008)、[#13013](https://github.com/apache/incubator-echarts/pull/13013)。
++ [Feature] 增强 i18n，使其可运行时注册，并改进其构建方式。
+ + 构建方式改进。参见 [#13038](https://github.com/apache/incubator-echarts/pull/13038)。
+ + Japanese：[#13470](https://github.com/apache/incubator-echarts/pull/13470)。
+ + German：[#13315](https://github.com/apache/incubator-echarts/pull/13315)。
+ + French：[#13056](): [#13056](https://github.com/apache/incubator-echarts/pull/13056)。
+ + FI/ES/TH：[#13055](https://github.com/apache/incubator-echarts/pull/13055)。
++ [Feature] 在饼图和旭日图上，支持圆角。
+ + 参见 [#13390](https://github.com/apache/incubator-echarts/pull/13390) 和 [#13378](https://github.com/apache/incubator-echarts/pull/13378)。
++ [Feature] 增强 tooltip 的配置能力。
+ + 支持为 tooltip 添加 CSS 类。参见 [#13383](https://github.com/apache/incubator-echarts/pull/13383).支持在tooltip中添加CSS类。
+ + 支持在 tooltip formatter 中返回 DOM。参见 [#13469](https://github.com/apache/incubator-echarts/pull/13469)。
++ [Feature] 支持部分删除组件或替换组件（ replaceMerge ）。
+ + 详情见 [#12987](https://github.com/apache/incubator-echarts/pull/12987)。
++ [Enhancement] 提升一些常见场景下的性能。
+ + 大数据折线图的性能大幅提升。支持了 largest-triangle-three-buckets 采样算法。
+ + 更多细节参见 [#13314](https://github.com/apache/incubator-echarts/pull/13314)、[#13317](https://github.com/apache/incubator-echarts/pull/13317)、[#13337](https://github.com/apache/incubator-echarts/pull/13337)。
+ + 修正问题 [#12249](https://github.com/apache/incubator-echarts/issues/12249)、[#10200](https://github.com/apache/incubator-echarts/issues/10200)、[#4556](https://github.com/apache/incubator-echarts/issues/4556)。
+ + 支持了脏矩形渲染。参见 [#13170](https://github.com/apache/incubator-echarts/pull/13170)。
+ + 其他：[#13339](https://github.com/apache/incubator-echarts/pull/13339)。
++ 其他功能、改进和问题修复。
+ + [Feature] 改进了 `parseDate`。参见 [#13044](https://github.com/apache/incubator-echarts/pull/13044)。
+ + [Feature] 当线处于 emphasis 状态时，加租。参见 [#13013](https://github.com/apache/incubator-echarts/pull/13013)。
+ + [Feature] 桑吉图 （`sankey`）支持了 `lineStyle: {color: 'gradient'}`。
+ + [Feature] `markPoint.data.type` 和 `markArea.data.type` 支持了值 `'median'`。
+ + [Feature] 在一些特定情况下，坐标轴支持了过滤数据。参见 [#12832](https://github.com/apache/incubator-echarts/pull/12832)。
+ + [Enhancement] 当不再进行绘制时，暂停 `requestAnimationFrame` 的循环。
+ + [Fix] 修正 bmap 布局问题：如果容器的布局是 flex 或 grid layout，bmap 首次布局有可能不正确。参见 [#13432](https://github.com/apache/incubator-echarts/pull/13432)。
+ + [Fix] 当鼠标离开图表时，隐藏 tooltip。参见 [#13382](https://github.com/apache/incubator-echarts/pull/13382)。
+ + [Fix] 修正 bmap 自定义 style 不起作用的问题。参见 [#13214](https://github.com/apache/incubator-echarts/pull/13214)。
+ + [Fix] 修正 toolbox 中点击 stack 按钮时标题覆盖问题。参见 [#13372](https://github.com/apache/incubator-echarts/pull/13372)。
+ + [Fix] 修正 ECharts 在 worker 中大数据量时持续空白绘制的问题。参见 [#13283](https://github.com/apache/incubator-echarts/pull/13283)。
+ + [Fix] 使 `contentToOption` 完全可选。参见 [#13139](https://github.com/apache/incubator-echarts/pull/13139)。
+ + [Fix] 当刷新时，保持 tooltip 。参见 [#13100](https://github.com/apache/incubator-echarts/pull/13100)。
+ + [Fix] 当 heatmap 超出坐标系区域时，不渲染。参见 [#12991](https://github.com/apache/incubator-echarts/pull/12991)。
++ [Break] 相比于 v4.9 的 Breaking changes：
+ + 默认的主题颜色被修改了。如果仍打算使用 v4.9 之前版本的主题，请设置 `option.color = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];`。
+ + 移除了内置地图 geoJSON。参见 [#13565](https://github.com/apache/incubator-echarts/pull/13565)。
+ + 放弃了对 IE8 的支持。以前的 `VML` 渲染器（IE8 所须）没有针对 v5.0 进行更新。除非后续有人提出了强需求。
+ + `'echarts/lib/export.js'` 中声明的模块，不再默认挂载到 `'echarts/lib/echarts.js'` 中。如果上层应用之前使用了 `import echarts from 'echarts/lib/echarts'` 并使用了 `'echarts/lib/export.js'` 中的任何一个模块，请将代码改为 `import echarts from 'echarts/index.blank'`，在这里，`'echarts/lib/export.js'` 中的模块，才被默认挂载。
+ + 如果上层应用之前引用了 `src/echarts.js`、`src/chart/*.js`、`src/component/*.js`，则不再能这么引用了。因为 `/src` 文件夹中的所有文件都被迁移为 `*.ts`。上层应用程序可以改为引用 `esm/echarts.js`、`esm/chart/*.js`、`esm/component/*.js`。
+ + 颠倒了 `visualMap` 和 `itemStyle`|`lineStyle`|`areaStyle` 的优先级。也就是说，以前，由`visualMap` 组件生成的视觉效果（即颜色、符号、符号大小等）具有最高优先级，将覆盖 `itemStyle`|`lineStyle`|`areaStyle` 中指定的相同视觉效果。这种设定带来了一些麻烦，比如给一些特定的数据项指定特定的样式时。从 v5.0 开始，`itemStyle`|`lineStyle`|`areaStyle` 中指定的视觉效果具有了最高优先级。
+ + 改变了 `rich.?.padding` 的行为。以前的 `rich.?.padding: [11, 22, 33, 44]` 表示 padding-top 是 `33`，padding-bottom 是 `11`，这是一个有问题的实现，因为它与 CSS 的做法不同。从 v5.0 开始，我们对它进行了修复。`rich.?.padding: [11, 22, 33, 44]` 表示 padding-top `11`，padding-bottom 是`33`。
+ + `aria` 从 v5.0 开始不再包含在 `dist/echarts.simple(.min).js` 中。但它仍然包含在 `dist/echarts.common(.min).js` 和 `dist/echarts(.min).js` 中。
++ [Deprecated] 从 v5.0 开始已不推荐使用做法：
+ + 图形元素 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.phasis.scale` 代替之。
+ + 折线图（`line series`）：
+ + 选项 `series.clipOverflow` 已不推荐使用，使用 `series.clip` 代替之。
+ + 自定义系列（`custom series`）。
+ + 在 `renderItem` 中，`api.style(...)` 和 `api.styleEmphasis(...)` 已不推荐使用。因为这两个接口其实并不真正必要，也很难保证向后兼容。用户可以通过 `api.visual(...)` 获取系统自动分配的视觉信息。
+ + 旭日图（`sunburst`）：
+ +动作类型`highlight`已被废弃，使用`sunburstHigh`。使用`sunburstHighlight`代替。
+ + 动作类型 "downplay "已被弃用，请使用 "sunburstUniversity "代替。使用`sunburstUnhighlight`代替。
+ +选项`series.downplay`已被弃用，请使用`series.blush`代替。使用`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.phasis.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.phasis.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` 已经不推荐使用。
+
+
## v4.9.0
<div class="time">2020-08-06</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-doc] 01/03: doc: add custom series transition.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
commit 98749c9fe119ddde3fde0c4cc9e1354108d6d3da
Author: 100pah <su...@gmail.com>
AuthorDate: Thu Dec 3 14:52:32 2020 +0800
doc: add custom series transition.
---
en/option/partial/zr-graphic.md | 296 +++++++++++++++++++++++++++++++++++++++-
zh/option/partial/zr-graphic.md | 286 +++++++++++++++++++++++++++++++++++++-
2 files changed, 578 insertions(+), 4 deletions(-)
diff --git a/en/option/partial/zr-graphic.md b/en/option/partial/zr-graphic.md
index 6b87722..1cdcda2 100644
--- a/en/option/partial/zr-graphic.md
+++ b/en/option/partial/zr-graphic.md
@@ -1,6 +1,9 @@
{{ target: partial-zr-graphic-elements }}
+
+
+
#${prefix} ${hostName}${symbolDeclare}group(Object)
`group` is the only type that can contain children, so that a group of elements can be positioned and transformed together.
@@ -60,6 +63,11 @@ A list of children, each item is a declaration of an element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
+
{{ if: ${usageType} === 'customSeries' }}
#${prefix} ${hostName}${symbolDeclare}path(Object)
@@ -128,6 +136,17 @@ Optional value:
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -156,8 +175,13 @@ Optional value:
symbolVisit = ${symbolVisit},
symbolDeclare = ${symbolDeclare}
) }}
+
{{ /if }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}image(Object)
{{ use: partial-graphic-cpt-common-props(
@@ -174,7 +198,7 @@ Optional value:
###${prefix} image(string)
-Specify contant of the image, can be a URL, or [dataURI](https://tools.ietf.org/html/rfc2397).
+Specify content of the image, can be a URL, or [dataURI](https://tools.ietf.org/html/rfc2397).
{{ use: partial-graphic-cpt-sub-prop-xy(
prefix = ${prefix},
@@ -221,6 +245,10 @@ Specify contant of the image, can be a URL, or [dataURI](https://tools.ietf.org/
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}text(Object)
Text block.
@@ -303,6 +331,10 @@ Text vertical alignment. Optional values: `'top'`, `'middle'`, `'bottom'`.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}rect(Object)
Rectangle element.
@@ -347,6 +379,17 @@ Abbreviation is enabled, for example:
+ `r`: `[1, 2]` means `[1, 2, 1, 2]`
+ `r`: `[1, 2, 3]` means `[1, 2, 3, 2]`
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -376,6 +419,10 @@ Abbreviation is enabled, for example:
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}circle(Object)
Circle element.
@@ -410,6 +457,16 @@ Circle element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -439,6 +496,10 @@ Circle element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}ring(Object)
Ring element.
@@ -473,6 +534,16 @@ Ring element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -502,6 +573,10 @@ Ring element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}sector(Object)
Sector element.
@@ -545,6 +620,16 @@ Sector element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -574,6 +659,10 @@ Sector element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}arc(Object)
Arc element.
@@ -617,6 +706,16 @@ Arc element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -649,6 +748,10 @@ Arc element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}polygon(Object)
Polygon element.
@@ -674,6 +777,16 @@ Polygon element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -703,6 +816,10 @@ Polygon element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}polyline(Object)
Polyline element.
@@ -728,6 +845,16 @@ Polyline element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -760,6 +887,10 @@ Polyline element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}line(Object)
Line element.
@@ -791,6 +922,16 @@ Specify the percentage of drawing, useful in animation.
Value range: [0, 1].
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -823,6 +964,10 @@ Value range: [0, 1].
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}bezierCurve(Object)
Quadratic bezier curve or cubic bezier curve.
@@ -874,6 +1019,16 @@ Specify the percentage of drawing, useful in animation.
Value range: [0, 1].
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -905,6 +1060,11 @@ Value range: [0, 1].
+
+
+
+
+
{{ target: partial-graphic-cpt-common-props }}
##${prefix} type(string) = ${type}
@@ -949,6 +1109,77 @@ Optional values:
symbolDeclare = ${symbolDeclare}
) }}
+
+{{ if: ${usageType} === 'customSeries' }}
+
+##${prefix} transition(string|Array) = ['x', 'y']
+
+Can be a single property name or an array of property names.
+Enable transition animation when the specified properties changed.
+
+The properties can only be:
++ Transform related properties: [`'x'`](~${optionPath}.${hostName}${symbolVisit}${type}.x), [`'y'`](~${optionPath}.${hostName}${symbolVisit}${type}.y), [`'scaleX'`](~${optionPath}.${hostName}${symbolVisit}${type}.scaleX), [`'scaleY'`](~${optionPath}.${hostName}${symbolVisit}${type}.scaleY), [`'rotation'`](~${optionPath}.${hostName}${symbolVisit}${type}.rotation), [`'originX'`](~${optionPath}.${hostName}${symbolVisit}${type}.originX), [`'originY'`](~${optionPath}.${hostName}${symbolVisit} [...]
+ ```js
+ renderItem: function (params, api) {
+ var coord = api.coord([api.value(0), api.value[1]);
+ return {
+ type: 'rect',
+ x: coord[0],
+ y: coord[1],
+ shape: {
+ x: 0,
+ y: 0,
+ width: api.value(2),
+ height: 100
+ },
+ transition: ['x', 'y', 'width']
+ }
+ }
+ ```
++ Shortcut to transition all of the properties in [`'shape'`](~${optionPath}.${hostName}${symbolVisit}${type}.shape), ['`style'`](~${optionPath}.${hostName}${symbolVisit}${type}.style), [`'extra'`](~${optionPath}.${hostName}${symbolVisit}${type}.extra). For example:
+ ```js
+ renderItem: function (params, api) {
+ return {
+ type: 'rect',
+ shape: {
+ x: api.value(0),
+ y: api.value(1),
+ width: api.value(2),
+ height: api.value(3)
+ },
+ // Indicate that all props in `shape` will
+ // have transition animation.
+ transition: 'shape',
+ };
+ }
+ ```
+ It is equivalent to:
+ ```js
+ renderItem: function (params, api) {
+ return {
+ type: 'rect',
+ shape: {
+ x: api.value(0),
+ y: api.value(1),
+ width: api.value(2),
+ height: api.value(3),
+ // This usage can only enable part of the
+ // properties transition.
+ transition: ['x', 'y', 'width', 'height']
+ }
+ };
+ }
+ ```
+
+By default, [`'x'`](~${optionPath}.${hostName}${symbolVisit}${type}.x) and [`'y'`](~${optionPath}.${hostName}${symbolVisit}${type}.y) are transitioned. If you want to disable the default transition, just set it as:
+```js
+transition: [] // Am empty array.
+```
+
+See this [example](${galleryEditorPath}doc-example/custom-transition-simple&edit=1&reset=1) please.
+
+{{ /if }}
+
{{ if: ${usageType} === 'graphicComponent' }}
##${prefix} left(number|string) = undefined
@@ -1116,6 +1347,17 @@ Y offset of shadow.
color of shadow.
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'style',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
{{ target: partial-graphic-cpt-path-common }}
@@ -1164,13 +1406,61 @@ If [top](~${optionPath}.${hostName}${symbolVisit}${type}.top) or [bottom](~${opt
+{{ target: partial-graphic-cpt-sub-prop-transition }}
+
+{{ if: ${usageType} === 'customSeries' }}
+
+###${prefix} transition(string|Array) = undefined
+
+Can be a single property name or an array of property names.
+Enable transition animation when the specified properties changed.
+Can only specify properties that are under this `${hostProp}`.
+
+For example:
+```js
+renderItem: function (params, api) {
+ return {
+ type: 'xxx',
+ ${hostProp}: {
+ mmm: ...,
+ nnn: ...,
+ ppp: ...,
+ qqq: ...,
+ // This two props will perform transition animation.
+ transition: ['mmm', 'ppp']
+ }
+ };
+}
+```
+We can also specify all of the properties like this:
+```js
+renderItem: function (params, api) {
+ return {
+ type: 'xxx',
+ ${hostProp}: {
+ mmm: ...,
+ nnn: ...,
+ ppp: ...,
+ qqq: ...,
+ },
+ // Indicate that all props in `${hostProp}` will
+ // have transition animation.
+ transition: '${hostProp}',
+ };
+}
+```
+
+{{ /if }}
+
+
+
{{ target: partial-graphic-cpt-sub-prop-xy }}
###${prefix} x(number) = 0
The x value of the left-top corner of the element in the coordinate system of its parent.
-###${prefix} y(numbr) = 0
+###${prefix} y(number) = 0
The y value of the left-top corner of the element in the coordinate system of its parent.
@@ -1253,7 +1543,7 @@ start angle, in radian.
###${prefix} endAngle(number) = Math.PI * 2
-end anble, in radian.
+end angle, in radian.
###${prefix} clockwise(boolean) = true
diff --git a/zh/option/partial/zr-graphic.md b/zh/option/partial/zr-graphic.md
index 185ab0e..429a02f 100644
--- a/zh/option/partial/zr-graphic.md
+++ b/zh/option/partial/zr-graphic.md
@@ -60,6 +60,11 @@ group 是唯一的可以有子节点的容器。group 可以用来整体定位
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
+
{{ if: ${usageType} === 'customSeries' }}
#${prefix} ${hostName}${symbolDeclare}path(Object)
@@ -128,6 +133,18 @@ group 是唯一的可以有子节点的容器。group 可以用来整体定位
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -156,8 +173,13 @@ group 是唯一的可以有子节点的容器。group 可以用来整体定位
symbolVisit = ${symbolVisit},
symbolDeclare = ${symbolDeclare}
) }}
+
{{ /if }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}image(Object)
{{ use: partial-graphic-cpt-common-props(
@@ -221,6 +243,10 @@ group 是唯一的可以有子节点的容器。group 可以用来整体定位
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}text(Object)
文本块。
@@ -303,6 +329,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}rect(Object)
矩形。
@@ -348,6 +378,17 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
+ `r` 缩写为 `[1, 2]` 相当于 `[1, 2, 1, 2]`
+ `r` 缩写为 `[1, 2, 3]1 相当于 `[1, 2, 3, 2]`
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -377,6 +418,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}circle(Object)
圆。
@@ -411,6 +456,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -440,6 +495,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}ring(Object)
圆环。
@@ -474,6 +533,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -503,6 +572,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}sector(Object)
扇形。
@@ -546,6 +619,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -575,6 +658,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}arc(Object)
圆弧。
@@ -618,6 +705,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -650,6 +747,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}polygon(Object)
多边形。
@@ -675,6 +776,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -704,6 +815,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}polyline(Object)
折线。
@@ -729,6 +844,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -761,6 +886,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}line(Object)
直线。
@@ -790,6 +919,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
线画到百分之多少就不画了。值的范围：[0, 1]。
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -822,6 +961,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}bezierCurve(Object)
二次或三次贝塞尔曲线。
@@ -867,6 +1010,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
画到百分之多少就不画了。值的范围：[0, 1]。
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -898,6 +1051,11 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
+
+
+
+
+
{{ target: partial-graphic-cpt-common-props }}
##${prefix} type(string) = ${type}
@@ -917,7 +1075,9 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
id 用于在更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
+
{{ if: ${usageType} === 'graphicComponent' }}
+
##${prefix} $action(string) = 'merge'
setOption 时指定本次对该图形元素的操作行为。
@@ -938,6 +1098,72 @@ setOption 时指定本次对该图形元素的操作行为。
symbolDeclare = ${symbolDeclare}
) }}
+{{ if: ${usageType} === 'customSeries' }}
+##${prefix} transition(string|Array) = ['x', 'y']
+
+可以指定一个属性名，或者一组属性名。被指定的属性值变化时，会开启过渡动画。
+
+属性只可以是：
++ Transform 相关的属性：[`'x'`](~${optionPath}.${hostName}${symbolVisit}${type}.x), [`'y'`](~${optionPath}.${hostName}${symbolVisit}${type}.y)、[`'scaleX'`](~${optionPath}.${hostName}${symbolVisit}${type}.scaleX)、[`'scaleY'`](~${optionPath}.${hostName}${symbolVisit}${type}.scaleY)、[`'rotation'`](~${optionPath}.${hostName}${symbolVisit}${type}.rotation)、[`'originX'`](~${optionPath}.${hostName}${symbolVisit}${type}.originX)、[`'originY'`](~${optionPath}.${hostName}${symbolVisit}${type}.originY)'。例如：
+ ```js
+ renderItem: function (params, api) {
+ var coord = api.coord([api.value(0), api.value[1]);
+ return {
+ type: 'rect',
+ x: coord[0],
+ y: coord[1],
+ shape: {
+ x: 0,
+ y: 0,
+ width: api.value(2),
+ height: 100
+ },
+ transition: ['x', 'y', 'width']
+ }
+ }
+ ```
++ 还可以是这三个属性 [`'shape'`](~${optionPath}.${hostName}${symbolVisit}${type}.shape)、['`style'`](~${optionPath}.${hostName}${symbolVisit}${type}.style)、[`'extra'`](~${optionPath}.${hostName}${symbolVisit}${type}.extra)。表示这三个属性中所有的子属性都开启过渡动画。例如：
+ ```js
+ renderItem: function (params, api) {
+ return {
+ type: 'rect',
+ shape: {
+ x: api.value(0),
+ y: api.value(1),
+ width: api.value(2),
+ height: api.value(3)
+ },
+ // 表示 shape 中所有属性都开启过渡动画。
+ transition: 'shape',
+ };
+ }
+ ```
+ 这等价于：
+ ```js
+ renderItem: function (params, api) {
+ return {
+ type: 'rect',
+ shape: {
+ x: api.value(0),
+ y: api.value(1),
+ width: api.value(2),
+ height: api.value(3),
+ // transition 放在 shape 中，能只指定部分属性开启过渡动画。
+ transition: ['x', 'y', 'width', 'height']
+ }
+ };
+ }
+ ```
+
+当 transition 没有指定时，[`'x'`](~${optionPath}.${hostName}${symbolVisit}${type}.x) 和 [`'y'`](~${optionPath}.${hostName}${symbolVisit}${type}.y) 会默认开启过渡动画。如果想禁用这种默认，可设定：
+```js
+transition: [] // 一个空数组
+```
+
+看这个 [例子](${galleryEditorPath}doc-example/custom-transition-simple&edit=1&reset=1)。
+
+{{ /if }}
+
{{ if: ${usageType} === 'graphicComponent' }}
##${prefix} left(number|string) = undefined
@@ -1105,6 +1331,17 @@ chart.on('click', function (params) {
阴影颜色。
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'style',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
{{ target: partial-graphic-cpt-path-common }}
@@ -1150,13 +1387,60 @@ chart.on('click', function (params) {
+{{ target: partial-graphic-cpt-sub-prop-transition }}
+
+{{ if: ${usageType} === 'customSeries' }}
+
+###${prefix} transition(string|Array) = undefined
+
+可以是一个属性名，或者一组属性名。
+被指定的属性，在其指发生变化时，会开启过渡动画。
+只可以指定本 `${hostProp}` 下的属性。
+
+例如：
+```js
+renderItem: function (params, api) {
+ return {
+ type: 'xxx',
+ ${hostProp}: {
+ mmm: ...,
+ nnn: ...,
+ ppp: ...,
+ qqq: ...,
+ // 这两个属性会开启过渡动画。
+ transition: ['mmm', 'ppp']
+ }
+ };
+}
+```
+我们这样可以指定 `${hostProp}` 下所有属性开启过渡动画：
+```js
+renderItem: function (params, api) {
+ return {
+ type: 'xxx',
+ ${hostProp}: {
+ mmm: ...,
+ nnn: ...,
+ ppp: ...,
+ qqq: ...,
+ },
+ // `${hostProp}` 下所有属性开启过渡动画。
+ transition: '${hostProp}',
+ };
+}
+```
+
+{{ /if }}
+
+
+
{{ target: partial-graphic-cpt-sub-prop-xy }}
###${prefix} x(number) = 0
图形元素的左上角在父节点坐标系（以父节点左上角为原点）中的横坐标值。
-###${prefix} y(numbr) = 0
+###${prefix} y(number) = 0
图形元素的左上角在父节点坐标系（以父节点左上角为原点）中的纵坐标值。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-doc] 02/03: Merge branch 'next' of
github.com:apache/incubator-echarts-doc into next
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
commit 4ea19d497143f5fdc08add59d62eb7a85be42969
Merge: 98749c9 1596d17
Author: 100pah <su...@gmail.com>
AuthorDate: Thu Dec 3 14:52:51 2020 +0800
Merge branch 'next' of github.com:apache/incubator-echarts-doc into next
en/option/partial/parallel.md | 12 ------------
zh/option/partial/parallel.md | 16 ----------------
2 files changed, 28 deletions(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org