This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/next by this push:
new f00cd12 doc: add option and tutorial of bar-race
f00cd12 is described below
commit f00cd1203b7605356994bc97fd531411dfe56fd4
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Wed Aug 5 17:47:28 2020 +0800
doc: add option and tutorial of bar-race
---
en/option/component/x-axis.md | 13 +++++++++++++
en/option/component/y-axis.md | 14 ++++++++++++++
en/tutorial/bar-race.md | 24 ++++++++++++++++++++++++
en/tutorial/tutorial.md | 1 +
src/style/mixin.scss | 1 +
zh/option/component/x-axis.md | 12 ++++++++++++
zh/option/component/y-axis.md | 12 ++++++++++++
zh/tutorial/bar-race.md | 24 ++++++++++++++++++++++++
zh/tutorial/tutorial.md | 1 +
9 files changed, 102 insertions(+)
diff --git a/en/option/component/x-axis.md b/en/option/component/x-axis.md
index e9a49f0..615dfbd 100644
--- a/en/option/component/x-axis.md
+++ b/en/option/component/x-axis.md
@@ -32,6 +32,19 @@ The first x axis in grid defaults to be on the bottom of the
grid, and the secon
Offset of x axis relative to default position. Useful when multiple x axis has
same [position](~xAxis.position) value.
+## realtimeSort = false
+
+`realtimeSort` is used to enable bar race if set to be `true`. It is only
valid if the [type](~xAxis.type) of xAxis is `'value'`.
+
+It should be used along with other options to enable bar race. Please refer to
[bar race](tutorial.html#Bar%20Race) tutorial for more details.
+
+## sortSeriesIndex = 0
+
+The index of series used to sort in bar race. Since only one series is
supported in bar race, `sortSeriesIndex` should always be `0`. It is only valid
if [realtimeSort](~xAxis.realtimeSort) is `true` and [type](~xAxis.type) is
`'value'`.
+
+It should be used along with other options to enable bar race. Please refer to
[bar race](tutorial.html#Bar%20Race) tutorial for more details.
+
+
{{ use: axis-common(
prefix='#',
componentType='xAxis',
diff --git a/en/option/component/y-axis.md b/en/option/component/y-axis.md
index 529806b..88caf49 100644
--- a/en/option/component/y-axis.md
+++ b/en/option/component/y-axis.md
@@ -30,6 +30,20 @@ The first y axis in grid defaults to be the left (`'left'`)
of the grid, and th
Offset of y axis relative to default position. Useful when multiple y axis has
same [position](~yAxis.position) value.
+
+## realtimeSort = false
+
+`realtimeSort` is used to enable bar race if set to be `true`. It is only
valid if the [type](~yAxis.type) of yAxis is `'value'`.
+
+It should be used along with other options to enable bar race. Please refer to
[bar race](tutorial.html#Bar%20Race) tutorial for more details.
+
+## sortSeriesIndex = 0
+
+The index of series used to sort in bar race. Since only one series is
supported in bar race, `sortSeriesIndex` should always be `0`. It is only valid
if [realtimeSort](~yAxis.realtimeSort) is `true` and [type](~yAxis.type) is
`'value'`.
+
+It should be used along with other options to enable bar race. Please refer to
[bar race](tutorial.html#Bar%20Race) tutorial for more details.
+
+
{{ use: axis-common(
prefix='#',
componentType='yAxis',
diff --git a/en/tutorial/bar-race.md b/en/tutorial/bar-race.md
new file mode 100644
index 0000000..4e12bec
--- /dev/null
+++ b/en/tutorial/bar-race.md
@@ -0,0 +1,24 @@
+{{ target: bar-race }}
+
+# Bar Race
+
+Bar race is a chart that shows changes in the ranking of data over time and it
is supported by default sinde ECharts 5.
+
+> Bar race charts usually use horizontal bars. If you want to use vertical
bars, just take the X axis and Y axis in this tutorial to the opposite.
+
+1. Set `yAxis.realtimeSort` to be `true` to enable bar race
+2. Set `yAxis.inverse` to be `true` to display longer bars at top
+3. `yAxis.animationDuration` is suggested to be set to be `300` for bar
reordering animation for the first time
+4. `yAxis.animationDurationUpdate` is suggested to be set to be `300` for bar
reordering animation for later times
+5. Set `yAxis.max` to be *n - 1* where *n* is the number of bars to be
displayed; otherwise, all bars are displayed
+6. `xAxis.max` is suggested to be set to be `'dataMax'` so that the maximum of
data is used as X maximum.
+7. If realtime label changing is required, set `series.label.valueAnimation`
to be `true`
+8. Set `animationDuration` to be `0` so that the first animation doesn't start
from 0; if you wish otherwise, set it to be the same value as
`animationDurationUpdate`
+9. `animationDurationUpdate` is suggested to be set to be `3000` for animation
update duration, which should be the same as the frequency of calling
`setOption`
+10. Call `setOption` to update data to be of next time with `setInterval` at
the frequency of `animationDurationUpdate`
+
+A full example is:
+
+~[700x300](${galleryViewPath}doc-example/bar-race&edit=1&reset=1)
+
+As you see, there are many options to be set to enable bar race effect. We are
going to provide a tool that doesn't require any coding to help you make bar
race charts more easily.
diff --git a/en/tutorial/tutorial.md b/en/tutorial/tutorial.md
index 443cbfa..a61fec7 100644
--- a/en/tutorial/tutorial.md
+++ b/en/tutorial/tutorial.md
@@ -12,6 +12,7 @@
{{ import: media-query }}
{{ import: visual-map }}
{{ import: event }}
+{{ import: bar-race }}
{{ import: drag-example }}
{{ import: custom-series }}
{{ import: rich-text }}
diff --git a/src/style/mixin.scss b/src/style/mixin.scss
index fd084ff..26e14ea 100644
--- a/src/style/mixin.scss
+++ b/src/style/mixin.scss
@@ -77,6 +77,7 @@
font-size: 14px;
}
ol li {
+ margin: 1em 0;
list-style: decimal;
font-size: 14px;
}
diff --git a/zh/option/component/x-axis.md b/zh/option/component/x-axis.md
index 41ac754..19823be 100644
--- a/zh/option/component/x-axis.md
+++ b/zh/option/component/x-axis.md
@@ -72,6 +72,18 @@ x 轴的位置。
X 轴相对于默认位置的偏移，在相同的 `position` 上有多个 X 轴的时候有用。
+## realtimeSort = false
+
+用于制作动态排序柱状图。设为 `true` 时，表示 X 轴开启实时排序效果，仅当 X 轴的 [type](~xAxis.type) 是 `'value'`
时有效。
+
+需要配合其他配置项共同实现动态排序柱状图效果，具体参见[动态排序柱状图](tutorial.html#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE)教程。
+
+## sortSeriesIndex = 0
+
+动态排序柱状图用于排序的系列 id。目前只支持一个系列的柱状图排序效果，所以这个值只能取 0。仅当 X 轴
[realtimeSort](~xAxis.realtimeSort) 为 `true` 并且 [type](~xAxis.type) 是 `'value'`
时有效。
+
+需要配合其他配置项共同实现动态排序柱状图效果，具体参见[动态排序柱状图](tutorial.html#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE)教程。
+
{{ use: axis-common(
prefix='#',
componentType='xAxis',
diff --git a/zh/option/component/y-axis.md b/zh/option/component/y-axis.md
index 885f5e1..ffc58c1 100644
--- a/zh/option/component/y-axis.md
+++ b/zh/option/component/y-axis.md
@@ -116,6 +116,18 @@ y 轴的位置。
Y 轴相对于默认位置的偏移，在相同的 `position` 上有多个 Y 轴的时候有用。
+## realtimeSort = false
+
+用于制作动态排序柱状图。设为 `true` 时，表示 Y 轴开启实时排序效果，仅当 X 轴的 [type](~yAxis.type) 是 `'value'`
时有效。
+
+需要配合其他配置项共同实现动态排序柱状图效果，具体参见[动态排序柱状图](tutorial.html#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE)教程。
+
+## sortSeriesIndex = 0
+
+动态排序柱状图用于排序的系列 id。目前只支持一个系列的柱状图排序效果，所以这个值只能取 0。仅当 Y 轴
[realtimeSort](~yAxis.realtimeSort) 为 `true` 并且 [type](~yAxis.type) 是 `'value'`
时有效。
+
+需要配合其他配置项共同实现动态排序柱状图效果，具体参见[动态排序柱状图](tutorial.html#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE)教程。
+
{{ use: axis-common(
prefix='#',
componentType='yAxis',
diff --git a/zh/tutorial/bar-race.md b/zh/tutorial/bar-race.md
new file mode 100644
index 0000000..7b1eb3a
--- /dev/null
+++ b/zh/tutorial/bar-race.md
@@ -0,0 +1,24 @@
+{{ target: bar-race }}
+
+# 动态排序柱状图
+
+动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。
+
+> 动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。
+
+1. `yAxis.realtimeSort` 设为 `true`，表示开启 Y 轴的动态排序效果
+2. `yAxis.inverse` 设为 `true`，表示 Y 轴从下往上是从小到大的排列
+3. `yAxis.animationDuration` 建议设为 `300`，表示第一次柱条排序动画的时长
+4. `yAxis.animationDurationUpdate` 建议设为 `300`，表示第一次后柱条排序动画的时长
+5. 如果想只显示前 *n* 名，将 `yAxis.max` 设为 *n - 1*，否则显示所有柱条
+6. `xAxis.max` 建议设为 `'dataMax'` 表示用数据的最大值作为 X 轴最大值，视觉效果更好
+7. 如果想要实时改变标签，需要将 `series.label.valueAnimation` 设为 `true`
+8. `animationDuration` 设为 `0`，表示第一份数据不需要从 `0` 开始动画（如果希望从 `0` 开始则设为和
`animationDurationUpdate` 相同的值）
+9. `animationDurationUpdate` 建议设为 `3000` 表示每次更新动画时长，这一数值应与调用 `setOption`
改变数据的频率相同
+10. 以 `animationDurationUpdate` 的频率调用 `setInterval`，更新数据值，显示下一个时间点对应的柱条排序
+
+完整的例子如下：
+
+~[700x300](${galleryViewPath}doc-example/bar-race&edit=1&reset=1)
+
+以上的设置项比较多，如果手动设置比较繁琐，之后我们也会推出不用写代码就能实现动态排序柱状图的工具，敬请期待！
diff --git a/zh/tutorial/tutorial.md b/zh/tutorial/tutorial.md
index 04fe288..008acc8 100644
--- a/zh/tutorial/tutorial.md
+++ b/zh/tutorial/tutorial.md
@@ -12,6 +12,7 @@
{{ import: media-query }}
{{ import: visual-map }}
{{ import: event }}
+{{ import: bar-race }}
{{ import: drag-example }}
{{ import: calendar-example }}
{{ import: sunburst-series }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
