This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
commit 300222785bacf7e286289c4e247fbad2fbea5ef8 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Mon Aug 23 16:53:15 2021 +0800 add bar-race doc --- components/helper/contributors.ts | 41 ++++++----- components/partials/Contributors.vue | 1 + .../en/application/chart-types/bar/bar-race.md | 79 ++++++++++++++++++++- contents/en/posts.yml | 1 - .../zh/application/chart-types/bar/bar-race.md | 80 +++++++++++++++++++++- contents/zh/posts.yml | 1 - layouts/default.vue | 8 +-- 7 files changed, 182 insertions(+), 29 deletions(-) diff --git a/components/helper/contributors.ts b/components/helper/contributors.ts index c50393b..9c45c7d 100644 --- a/components/helper/contributors.ts +++ b/components/helper/contributors.ts @@ -1,4 +1,21 @@ export default { + "contents/zh/meta/edit-guide.md": [ + "pissang" + ], + "contents/zh/get-started.md": [ + "Ovilia", + "pissang" + ], + "contents/zh/concepts/visual-map.md": [ + "Ovilia", + "pissang" + ], + "contents/zh/concepts/tooltip.md": [ + "Ovilia" + ], + "contents/zh/concepts/style.md": [ + "pissang" + ], "contents/zh/concepts/series.md": [ "Ovilia" ], @@ -334,6 +351,9 @@ export default { "contents/en/basics/release-note/v5-feature.md": [ "pissang" ], + "contents/en/basics/release-note/5-2-0.md": [ + "pissang" + ], "contents/en/basics/inspiration.md": [ "pissang" ], @@ -420,27 +440,6 @@ export default { "contents/.prettierrc": [ "pissang" ], - "contents/zh/concepts/visual-map.md": [ - "Ovilia", - "pissang" - ], - "contents/zh/meta/edit-guide.md": [ - "pissang" - ], - "contents/zh/get-started.md": [ - "Ovilia", - "pissang" - ], - "contents/zh/concepts/tooltip.md": [ - "Ovilia" - ], - "contents/zh/concepts/style.md": [ - "pissang" - ], - "contents/zh/meta/writing.md": [ - "Ovilia", - "pissang" - ], "contents/zh/posts.yml": [ "pissang" ] diff --git a/components/partials/Contributors.vue b/components/partials/Contributors.vue index 40a53ad..dde6d23 100644 --- a/components/partials/Contributors.vue +++ b/components/partials/Contributors.vue @@ -75,6 +75,7 @@ export default defineComponent({ margin-bottom: 50px; padding-top: 10px; border-top: 1px solid #ddd; + @apply text-blue-gray-600; a { @apply text-blue-gray-500; diff --git a/contents/en/application/chart-types/bar/bar-race.md b/contents/en/application/chart-types/bar/bar-race.md index 58b4c3a..4951010 100755 --- a/contents/en/application/chart-types/bar/bar-race.md +++ b/contents/en/application/chart-types/bar/bar-race.md @@ -1,4 +1,81 @@ # Dynamic Sorting Bar Chart -Dynamic Sorting Bar Chart is a new function that recently added in ECharts 5.0. +## Related Options +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` + +## Demo + +A complete demo: + +```js [live] +var data = []; +for (let i = 0; i < 5; ++i) { + data.push(Math.round(Math.random() * 200)); +} + +option = { + xAxis: { + max: 'dataMax', + }, + yAxis: { + type: 'category', + data: ['A', 'B', 'C', 'D', 'E'], + inverse: true, + animationDuration: 300, + animationDurationUpdate: 300, + max: 2 // only the largest 3 bars will be displayed + }, + series: [{ + realtimeSort: true, + name: 'X', + type: 'bar', + data: data, + label: { + show: true, + position: 'right', + valueAnimation: true + } + }], + legend: { + show: true + }, + animationDuration: 0, + animationDurationUpdate: 3000, + animationEasing: 'linear', + animationEasingUpdate: 'linear' +}; + +function run () { + var data = option.series[0].data; + for (var i = 0; i < data.length; ++i) { + if (Math.random() > 0.9) { + data[i] += Math.round(Math.random() * 2000); + } + else { + data[i] += Math.round(Math.random() * 200); + } + } + myChart.setOption(option); +} + +setTimeout(function() { + run(); +}, 0); +setInterval(function () { + run(); +}, 3000); +``` diff --git a/contents/en/posts.yml b/contents/en/posts.yml index 5f09d8d..63a3124 100644 --- a/contents/en/posts.yml +++ b/contents/en/posts.yml @@ -67,7 +67,6 @@ dir: stacked-bar - title: Bar Racing dir: bar-race - draft: true - title: Bar Polar dir: polar-bar draft: true diff --git a/contents/zh/application/chart-types/bar/bar-race.md b/contents/zh/application/chart-types/bar/bar-race.md index 14bb2e0..ff78a8b 100644 --- a/contents/zh/application/chart-types/bar/bar-race.md +++ b/contents/zh/application/chart-types/bar/bar-race.md @@ -1,3 +1,81 @@ # 动态排序柱状图 -动态排序柱状图是 ECharts 5.0 新增的功能。 +## 基本设置 + +动态排序柱状图是一种展示随时间变化的数据排名变化的图表,从 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`,更新数据值,显示下一个时间点对应的柱条排序 + +## 示例 + +完整的例子如下: + +```js [live] +var data = []; +for (let i = 0; i < 5; ++i) { + data.push(Math.round(Math.random() * 200)); +} + +option = { + xAxis: { + max: 'dataMax', + }, + yAxis: { + type: 'category', + data: ['A', 'B', 'C', 'D', 'E'], + inverse: true, + animationDuration: 300, + animationDurationUpdate: 300, + max: 2 // only the largest 3 bars will be displayed + }, + series: [{ + realtimeSort: true, + name: 'X', + type: 'bar', + data: data, + label: { + show: true, + position: 'right', + valueAnimation: true + } + }], + legend: { + show: true + }, + animationDuration: 0, + animationDurationUpdate: 3000, + animationEasing: 'linear', + animationEasingUpdate: 'linear' +}; + +function run () { + var data = option.series[0].data; + for (var i = 0; i < data.length; ++i) { + if (Math.random() > 0.9) { + data[i] += Math.round(Math.random() * 2000); + } + else { + data[i] += Math.round(Math.random() * 200); + } + } + myChart.setOption(option); +} + +setTimeout(function() { + run(); +}, 0); +setInterval(function () { + run(); +}, 3000); +``` diff --git a/contents/zh/posts.yml b/contents/zh/posts.yml index 57a5ad4..1023b27 100644 --- a/contents/zh/posts.yml +++ b/contents/zh/posts.yml @@ -66,7 +66,6 @@ dir: stacked-bar - title: 动态排序柱状图 dir: bar-race - draft: true - title: 极坐标系柱状图 dir: polar-bar draft: true diff --git a/layouts/default.vue b/layouts/default.vue index 862621b..9683598 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -98,23 +98,23 @@ body { h3 { margin: 30px 0 20px 0; font-size: 22px; - @apply text-blue-gray-900; + @apply text-blue-gray-700; } h4 { margin: 25px 0 20px 0; font-size: 18px; - color: #666; + @apply text-blue-gray-600; } h5 { font-size: 16px; - color: #666; + @apply text-blue-gray-500; } h6 { font-size: 14px; - color: #222; + @apply text-blue-gray-500; } .permalink { --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org