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/23 09:09:24 UTC
[echarts-handbook] 01/02: add bar-race doc
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 <zw...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org