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:23 UTC
[echarts-handbook] branch master updated (af33fef -> b28a39e)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git.
from af33fef fix echarts version. fix crawler of nav not shown.
new 3002227 add bar-race doc
new b28a39e add waterfall
The 2 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:
components/helper/contributors.ts | 41 +++++----
components/partials/Contributors.vue | 1 +
.../en/application/chart-types/bar/bar-race.md | 79 ++++++++++++++++-
.../en/application/chart-types/bar/waterfall.md | 99 ++++++++++++++++++++++
contents/en/posts.yml | 2 -
.../zh/application/chart-types/bar/bar-race.md | 80 ++++++++++++++++-
.../zh/application/chart-types/bar/waterfall.md | 99 ++++++++++++++++++++++
contents/zh/posts.yml | 4 +-
layouts/default.vue | 8 +-
9 files changed, 381 insertions(+), 32 deletions(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-handbook] 01/02: add bar-race doc
Posted by ov...@apache.org.
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
[echarts-handbook] 02/02: add waterfall
Posted by ov...@apache.org.
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 b28a39e78cb7be4728f3aaa054ef2e186a81f904
Author: Ovilia <zw...@gmail.com>
AuthorDate: Mon Aug 23 17:09:11 2021 +0800
add waterfall
---
.../en/application/chart-types/bar/waterfall.md | 99 ++++++++++++++++++++++
contents/en/posts.yml | 1 -
.../zh/application/chart-types/bar/waterfall.md | 99 ++++++++++++++++++++++
contents/zh/posts.yml | 3 +-
4 files changed, 199 insertions(+), 3 deletions(-)
diff --git a/contents/en/application/chart-types/bar/waterfall.md b/contents/en/application/chart-types/bar/waterfall.md
index e69de29..e806327 100755
--- a/contents/en/application/chart-types/bar/waterfall.md
+++ b/contents/en/application/chart-types/bar/waterfall.md
@@ -0,0 +1,99 @@
+# Waterfall
+
+There is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart.
+
+Assuming that the values in the data array represent an increase or decrease from the previous value.
+
+```js
+var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
+```
+
+That is, the first data is `900` and the second data `345` represents the addition of `345` to `900`, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect; the second series is used to represent positive numbers; and the second series is used to represent negative numbers.
+
+```js [live]
+var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
+var help = [];
+var positive = [];
+var negative = [];
+for (var i = 0, sum = 0; i < data.length; ++i) {
+ if (data[i] >= 0) {
+ positive.push(data[i]);
+ negative.push('-');
+ }
+ else {
+ positive.push('-');
+ negative.push(-data[i]);
+ }
+
+ if (i === 0) {
+ help.push(0);
+ }
+ else {
+ sum += data[i - 1];
+ if (data[i] < 0) {
+ help.push(sum + data[i]);
+ }
+ else {
+ help.push(sum);
+ }
+ }
+}
+
+option = {
+ title: {
+ text: 'Waterfall'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ splitLine: {show:false},
+ data: function (){
+ var list = [];
+ for (var i = 1; i <= 11; i++) {
+ list.push('Oct/' + i);
+ }
+ return list;
+ }()
+ },
+ yAxis: {
+ type : 'value'
+ },
+ series: [
+ {
+ type: 'bar',
+ stack: 'all',
+ itemStyle: {
+ normal: {
+ barBorderColor: 'rgba(0,0,0,0)',
+ color: 'rgba(0,0,0,0)'
+ },
+ emphasis: {
+ barBorderColor: 'rgba(0,0,0,0)',
+ color: 'rgba(0,0,0,0)'
+ }
+ },
+ data: help
+ },
+ {
+ name: 'positive',
+ type: 'bar',
+ stack: 'all',
+ data: positive
+ },
+ {
+ name: 'negative',
+ type: 'bar',
+ stack: 'all',
+ data: negative,
+ itemStyle: {
+ color: '#f33'
+ }
+ }
+ ]
+};
+```
diff --git a/contents/en/posts.yml b/contents/en/posts.yml
index 63a3124..3e67478 100644
--- a/contents/en/posts.yml
+++ b/contents/en/posts.yml
@@ -72,7 +72,6 @@
draft: true
- title: Waterfall
dir: waterfall
- draft: true
- title: Line
dir: line
children:
diff --git a/contents/zh/application/chart-types/bar/waterfall.md b/contents/zh/application/chart-types/bar/waterfall.md
index e69de29..ce995be 100644
--- a/contents/zh/application/chart-types/bar/waterfall.md
+++ b/contents/zh/application/chart-types/bar/waterfall.md
@@ -0,0 +1,99 @@
+# 阶梯瀑布图
+
+Apache ECharts 中并没有单独的瀑布图类型，但是我们可以使用堆叠的柱状图模拟该效果。
+
+假设数据数组中的值是表示对前一个值的增减：
+
+```js
+var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
+```
+
+也就是第一个数据是 `900`，第二个数据 `345` 表示的是在 `900` 的基础上增加了 `345`……将这个数据展示为阶梯瀑布图时，我们可以使用三个系列：第一个是不可交互的透明系列，用来实现“悬空”的柱状图效果；第二个系列用来表示正数；第二个系列用来表示负数。
+
+```js [live]
+var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
+var help = [];
+var positive = [];
+var negative = [];
+for (var i = 0, sum = 0; i < data.length; ++i) {
+ if (data[i] >= 0) {
+ positive.push(data[i]);
+ negative.push('-');
+ }
+ else {
+ positive.push('-');
+ negative.push(-data[i]);
+ }
+
+ if (i === 0) {
+ help.push(0);
+ }
+ else {
+ sum += data[i - 1];
+ if (data[i] < 0) {
+ help.push(sum + data[i]);
+ }
+ else {
+ help.push(sum);
+ }
+ }
+}
+
+option = {
+ title: {
+ text: 'Waterfall'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ splitLine: {show:false},
+ data: function (){
+ var list = [];
+ for (var i = 1; i <= 11; i++) {
+ list.push('Oct/' + i);
+ }
+ return list;
+ }()
+ },
+ yAxis: {
+ type : 'value'
+ },
+ series: [
+ {
+ type: 'bar',
+ stack: 'all',
+ itemStyle: {
+ normal: {
+ barBorderColor: 'rgba(0,0,0,0)',
+ color: 'rgba(0,0,0,0)'
+ },
+ emphasis: {
+ barBorderColor: 'rgba(0,0,0,0)',
+ color: 'rgba(0,0,0,0)'
+ }
+ },
+ data: help
+ },
+ {
+ name: 'positive',
+ type: 'bar',
+ stack: 'all',
+ data: positive
+ },
+ {
+ name: 'negative',
+ type: 'bar',
+ stack: 'all',
+ data: negative,
+ itemStyle: {
+ color: '#f33'
+ }
+ }
+ ]
+};
+```
diff --git a/contents/zh/posts.yml b/contents/zh/posts.yml
index 1023b27..556b3c0 100644
--- a/contents/zh/posts.yml
+++ b/contents/zh/posts.yml
@@ -69,9 +69,8 @@
- title: 极坐标系柱状图
dir: polar-bar
draft: true
- - title: 瀑布图
+ - title: 阶梯瀑布图
dir: waterfall
- draft: true
- title: 视觉映射的柱状图
dir: visual-map
draft: true
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org