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