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:25 UTC
[echarts-handbook] 02/02: add waterfall
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