You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/07/21 12:36:44 UTC
[echarts-handbook] branch master updated: en: add bar, line
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new afe1dd1 en: add bar, line
afe1dd1 is described below
commit afe1dd1d2073ff57eee9e19c8b083bdf80d38656
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jul 21 20:36:34 2021 +0800
en: add bar, line
---
.../en/application/chart-types/bar/basic-bar.md | 28 ++--
.../en/application/chart-types/bar/stacked-bar.md | 36 ++---
.../en/application/chart-types/line/area-line.md | 40 +++---
.../en/application/chart-types/line/basic-line.md | 153 +++++++++++----------
.../en/application/chart-types/line/smooth-line.md | 23 ++--
.../application/chart-types/line/stacked-line.md | 10 +-
.../en/application/chart-types/line/step-line.md | 51 +++----
.../en/application/chart-types/pie/doughnut.md | 2 +-
contents/en/posts.yml | 2 +-
.../zh/application/chart-types/bar/basic-bar.md | 2 +-
.../zh/application/chart-types/bar/stacked-bar.md | 4 +-
.../zh/application/chart-types/line/area-line.md | 4 +-
contents/zh/posts.yml | 2 +-
13 files changed, 174 insertions(+), 183 deletions(-)
diff --git a/contents/en/application/chart-types/bar/basic-bar.md b/contents/en/application/chart-types/bar/basic-bar.md
index a9f00e5..1d92a27 100755
--- a/contents/en/application/chart-types/bar/basic-bar.md
+++ b/contents/en/application/chart-types/bar/basic-bar.md
@@ -2,17 +2,15 @@
Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data.
-To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+To set the bar chart, you need to set the `type` of `series` as `'bar'`.
-[[Configuraion]](${optionPath}series-bar)
+[[Option]](${optionPath}series-bar)
## Simple Example
Let's begin with a basic bar chart:
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
@@ -33,9 +31,7 @@ In this case, the x-axis is under the category type. Therefore, you should defin
You may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the `series`.
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
@@ -68,9 +64,7 @@ It is a good idea to install the style of Bar Chart by using ['series.itemStyle'
Here is a example:
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
@@ -97,9 +91,7 @@ In this case, we defined the style of the bar chart by `'itemStyle'` of correspo
You can use [`barWidth`](${optionPath}#series-bar.barWidth) to change the width of the bar. For instance, the `'barWidth'` in the following case was set to `'20%'`. It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% `'barWidth'` means 4% for the entire x-axis.
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
@@ -126,9 +118,7 @@ In addition, [`barMaxWidth`](${optionPath}series-bar.barMaxWidth) has limited th
There are two kinds of column spacing. One is the spacing between different series under the same category: [`barWidth`](${optionPath}series-bar.barWidth). The other is the spacing between categories: [`barCategoryGap`](${optionPath}series-bar.barCategoryGap).
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
@@ -159,9 +149,7 @@ Usually, `barWidth` is not necessary to be clarified if `'barGap'` and `barCateg
You might want to change the background color of bars sometimes. After ECharts v4.7.0, this function can be enabled by ['showBackground'](${optionPath}series-bar.showBackground) and configured by ['backgroundStyle'](${optionPath}series-bar.backgroundStyle).
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
type: 'category',
diff --git a/contents/en/application/chart-types/bar/stacked-bar.md b/contents/en/application/chart-types/bar/stacked-bar.md
index 79fd8af..46de9c0 100755
--- a/contents/en/application/chart-types/bar/stacked-bar.md
+++ b/contents/en/application/chart-types/bar/stacked-bar.md
@@ -4,27 +4,29 @@ Sometimes, we hope to not only figure series separately but also the trend of th
There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in `stack`. The series with the same `stack` value will be in the same category.
-<!-- embed -->
-```js
+```js [live]
option = {
- xAxis: {
- data: ['A', 'B', 'C', 'D', 'E']
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
},
- yAxis: {},
- series: [{
- data: [10, 22, 28, 43, 49],
- type: 'bar',
- stack: 'x'
- }, {
- data: [5, 4, 3, 5, 10],
- type: 'bar',
- stack: 'x'
- }]
+ {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }
+ ]
};
```
-In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.
+In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.
->The value of `stack` explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.
+> The value of `stack` explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.
>
->For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of `stack` is `'male'` and `'female'`. Although meaningless strings like `'a'` and `'b'` can achieve the same effect but the code will have worse readability.
+> For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of `stack` is `'male'` and `'female'`. Although meaningless strings like `'a'` and `'b'` can achieve the same effect but the code will have worse readability.
diff --git a/contents/en/application/chart-types/line/area-line.md b/contents/en/application/chart-types/line/area-line.md
index 2adda34..5fa335d 100755
--- a/contents/en/application/chart-types/line/area-line.md
+++ b/contents/en/application/chart-types/line/area-line.md
@@ -1,26 +1,28 @@
-# Area Line Chart
+# Area Chart
-The area line chart fills the space between the line and axis with the background color, to express the data by the size of the area. Compared with the normal line chart, the area line chart has more intuitive visual effects. It is especially suitable for the scenario with a few series.
+The area chart fills the space between the line and axis with the background color, to express the data by the size of the area. Compared with the normal line chart, the area chart has more intuitive visual effects. It is especially suitable for the scenario with a few series.
-<!-- embed -->
-```js
+```js [live]
option = {
- xAxis: {
- data: ['A', 'B', 'C', 'D', 'E']
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ areaStyle: {}
},
- yAxis: {},
- series: [{
- data: [10, 22, 28, 23, 19],
- type: 'line',
- areaStyle: {}
- }, {
- data: [25, 14, 23, 35, 10],
- type: 'line',
- areaStyle: {
- color: '#ff0',
- opacity: 0.5
- }
- }]
+ {
+ data: [25, 14, 23, 35, 10],
+ type: 'line',
+ areaStyle: {
+ color: '#ff0',
+ opacity: 0.5
+ }
+ }
+ ]
};
```
diff --git a/contents/en/application/chart-types/line/basic-line.md b/contents/en/application/chart-types/line/basic-line.md
index acbe151..686fc9a 100755
--- a/contents/en/application/chart-types/line/basic-line.md
+++ b/contents/en/application/chart-types/line/basic-line.md
@@ -1,49 +1,52 @@
# Basic Line Chart
-
## Simple Example
-We can use the following code to build a line chart which has x-axis as `category`, y-axis as `value`:
+We can use the following code to build a line chart which has x-axis as `category`, y-axis as `value`:
-<!-- embed -->
-```js
+```js [live]
option = {
- xAxis: {
- type: 'category',
- data: ['A', 'B', 'C']
- },
- yAxis: {
- type: 'value'
- },
- series: [{
- data: [120, 200, 150],
- type: 'line'
- }]
+ xAxis: {
+ type: 'category',
+ data: ['A', 'B', 'C']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [120, 200, 150],
+ type: 'line'
+ }
+ ]
};
```
In this case, we set the type of axis to `category` and `value` under `xAxis` and `yAxis`. We also clarified the content on the x-axis through `data`. In `series`, we set the type to `line`, and specify the values of three points through `data`. In this way, we got a simple line chart.
->The `type` here can be omitted because the defaults of the axis are `value` while `xAxis` has specified the category's `data`. In this case, `ECharts` can recognize that this is a category axis.
-
+> The `type` here can be omitted because the defaults of the axis are `value` while `xAxis` has specified the category's `data`. In this case, `ECharts` can recognize that this is a category axis.
## Line Chart in Cartesian Coordinate System
How to implement if we want the line chart to be continuous? The answer is simple, as long as every value in `data` of the `series` is represented by an array containing two elements.
-<!-- embed -->
-```js
+```js [live]
option = {
- xAxis: {},
- yAxis: {},
- series: [{
- data: [[20, 120], [50, 200], [40, 50]],
- type: 'line'
- }]
+ xAxis: {},
+ yAxis: {},
+ series: [
+ {
+ data: [
+ [20, 120],
+ [50, 200],
+ [40, 50]
+ ],
+ type: 'line'
+ }
+ ]
};
```
-
## Customized Line Chart
### Line Style
@@ -52,79 +55,79 @@ Line style can be changed by `lineStyle` setting. You can specify color, line wi
Here is an example of setting color, line width and type.
-
-<!-- embed -->
-```js q q
- xAxis: {
- data: ['A', 'B', 'C', 'D', 'E']
- },
- yAxis: {},
- series: [{
- data: [10, 22, 28, 23, 19],
- type: 'line',
- lineStyle: {
- normal: {
- color: 'green',
- width: 4,
- type: 'dashed'
- }
+```js [live]
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ lineStyle: {
+ normal: {
+ color: 'green',
+ width: 4,
+ type: 'dashed'
}
- }]
+ }
+ }
+ ]
};
```
When we set the line width here, the line width of items will not change. The line style of items needs to be set separately.
-
### Item Style
-Item style can be change by [`series.itemStyle`](${optionPath}series-line.itemStyle). It included `color`, `borderColor`, `borderStyle`, `borderWidth`, `borderType`, `shadowColor`, `opacity` and so on. It works the same as the `lineType`, so we will not do further discuss.
+Item style can be change by [`series.itemStyle`](${optionPath}series-line.itemStyle). It included `color`, `borderColor`, `borderStyle`, `borderWidth`, `borderType`, `shadowColor`, `opacity` and so on. It works the same as the `lineType`, so we will not do further discuss.
## Display Value on Items.
In the series, the label of the item was specified by [`series.label`](${optionPath}series-line.label). If we change the `show` under `label` to `true`, the value will be displayed by default. Otherwise, if [`series.emphasis.label.show`](${optionPath}series-line.emphasis.label.show) is `true`, the label will show only if the mouse moved across the item.
-
-<!-- embed -->
-```js
+```js [live]
option = {
- xAxis: {
- data: ['A', 'B', 'C', 'D', 'E']
- },
- yAxis: {},
- series: [{
- data: [10, 22, 28, 23, 19],
- type: 'line',
- label: {
- show: true,
- position: 'bottom',
- textStyle: {
- fontSize: 20
- }
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ label: {
+ show: true,
+ position: 'bottom',
+ textStyle: {
+ fontSize: 20
}
- }]
+ }
+ }
+ ]
};
```
-
## Empty Data
In a `series`, there are empty data. It has some difference with `0`. While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by.
In ECharts, we use `'-'` to represent null data, It is applicable for data in other series.
-
-<!-- embed -->
-```js
+```js [live]
option = {
- xAxis: {
- data: ['A', 'B', 'C', 'D', 'E']
- },
- yAxis: {},
- series: [{
- data: [0, 22, '-', 23, 19],
- type: 'line'
- }]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [0, 22, '-', 23, 19],
+ type: 'line'
+ }
+ ]
};
-```>
+```
+
> Please note the difference between the empty data and 0.
diff --git a/contents/en/application/chart-types/line/smooth-line.md b/contents/en/application/chart-types/line/smooth-line.md
index ca3d613..b1e0a86 100755
--- a/contents/en/application/chart-types/line/smooth-line.md
+++ b/contents/en/application/chart-types/line/smooth-line.md
@@ -2,17 +2,18 @@
The smooth line chart is also a variant of the basic line graph. It is a better choice for you to perform a comfort visual experience. While using the ECharts, you only need to change the `smooth` to `true` to achieve this effect.
-<!-- embed -->
-```js
+```js [live]
option = {
- xAxis: {
- data: ['A', 'B', 'C', 'D', 'E']
- },
- yAxis: {},
- series: [{
- data: [10, 22, 28, 23, 19],
- type: 'line',
- smooth: true
- }]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ smooth: true
+ }
+ ]
};
```
diff --git a/contents/en/application/chart-types/line/stacked-line.md b/contents/en/application/chart-types/line/stacked-line.md
index 4b6f9c0..7ebe56b 100755
--- a/contents/en/application/chart-types/line/stacked-line.md
+++ b/contents/en/application/chart-types/line/stacked-line.md
@@ -1,10 +1,8 @@
# Stacked Line Chart
-Similar to the [Stacked Bar Chart](./zh/application/chart-types/bar/stacked-bar), Stacked Line Chart use the `'stack'` in `series` to decide which series should be stacked together.
+Similar to the [Stacked Bar Chart](${lang}/application/chart-types/bar/stacked-bar), Stacked Line Chart use the `'stack'` in `series` to decide which series should be stacked together.
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
@@ -27,9 +25,7 @@ option = {
However, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked bar chart.
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
diff --git a/contents/en/application/chart-types/line/step-line.md b/contents/en/application/chart-types/line/step-line.md
index 25aa065..7b02a66 100755
--- a/contents/en/application/chart-types/line/step-line.md
+++ b/contents/en/application/chart-types/line/step-line.md
@@ -2,37 +2,38 @@
The normal line chart connects two points by straight line directly, while the step line chart, also known as square wave chart, uses only horizontal and vertical lines to connect the nearby items together. Compared with the normal line chart, the step line chart significantly shows the sudden changes of analyzed data.
-In ECharts, `step` is used to characterize the connection type of the step line chart. It has three available values: `'start'`, `'end'`, and `'middle'`. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.
+In ECharts, `step` is used to characterize the connection type of the step line chart. It has three available values: `'start'`, `'end'`, and `'middle'`. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.
-
-<!-- embed -->
-```js
+```js [live]
option = {
- xAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [{
- name: 'Step Start',
- type: 'line',
- step: 'start',
- data: [120, 132, 101, 134, 90, 230, 210]
+ legend: {},
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: 'Step Start',
+ type: 'line',
+ step: 'start',
+ data: [120, 132, 101, 134, 90, 230, 210]
},
{
- name: 'Step Middle',
- type: 'line',
- step: 'middle',
- data: [220, 282, 201, 234, 290, 430, 410]
+ name: 'Step Middle',
+ type: 'line',
+ step: 'middle',
+ data: [220, 282, 201, 234, 290, 430, 410]
},
{
- name: 'Step End',
- type: 'line',
- step: 'end',
- data: [450, 432, 401, 454, 590, 530, 510]
- }]
+ name: 'Step End',
+ type: 'line',
+ step: 'end',
+ data: [450, 432, 401, 454, 590, 530, 510]
+ }
+ ]
};
```
diff --git a/contents/en/application/chart-types/pie/doughnut.md b/contents/en/application/chart-types/pie/doughnut.md
index f7411e1..7ca00b4 100755
--- a/contents/en/application/chart-types/pie/doughnut.md
+++ b/contents/en/application/chart-types/pie/doughnut.md
@@ -40,7 +40,7 @@ option = {
If we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome.
-## Show Text In Middle Of Ring From Highlighted Sector
+## Show Text In Middle Of Doughnut From Highlighted Sector
The previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix `label` in the middle of the chart while hiding `label` in default.
diff --git a/contents/en/posts.yml b/contents/en/posts.yml
index ff796d9..5f09d8d 100644
--- a/contents/en/posts.yml
+++ b/contents/en/posts.yml
@@ -81,7 +81,7 @@
dir: basic-line
- title: Stacked Line
dir: stacked-line
- - title: Area
+ - title: Area Chart
dir: area-line
- title: Smoothed Line
dir: smooth-line
diff --git a/contents/zh/application/chart-types/bar/basic-bar.md b/contents/zh/application/chart-types/bar/basic-bar.md
index 9040d77..b65718b 100644
--- a/contents/zh/application/chart-types/bar/basic-bar.md
+++ b/contents/zh/application/chart-types/bar/basic-bar.md
@@ -2,7 +2,7 @@
柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。
-设置柱状图的方式，是将 `series` 的 `name` 设为 `'bar'`。
+设置柱状图的方式，是将 `series` 的 `type` 设为 `'bar'`。
[[配置项手册]](${optionPath}series-bar)
diff --git a/contents/zh/application/chart-types/bar/stacked-bar.md b/contents/zh/application/chart-types/bar/stacked-bar.md
index f96cced..3bd8e75 100644
--- a/contents/zh/application/chart-types/bar/stacked-bar.md
+++ b/contents/zh/application/chart-types/bar/stacked-bar.md
@@ -4,9 +4,7 @@
使用 EChart 实现堆积折线图的方法非常简单，只需要给一个系列的 `stack` 值设置一个字符串类型的值，这一个值表示该系列堆积的类别。也就是说，拥有同样 `stack` 值的系列将堆积在一组。
-<!-- embed -->
-
-```js
+```js [live]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
diff --git a/contents/zh/application/chart-types/line/area-line.md b/contents/zh/application/chart-types/line/area-line.md
index a3d95c8..c14e796 100644
--- a/contents/zh/application/chart-types/line/area-line.md
+++ b/contents/zh/application/chart-types/line/area-line.md
@@ -1,6 +1,6 @@
-# 区域面积折线图
+# 区域面积图
-区域面积折线图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积折线图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。
+区域面积图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。
```js [live]
option = {
diff --git a/contents/zh/posts.yml b/contents/zh/posts.yml
index a20d77e..e91ab8c 100644
--- a/contents/zh/posts.yml
+++ b/contents/zh/posts.yml
@@ -84,7 +84,7 @@
dir: basic-line
- title: 堆叠折线图
dir: stacked-line
- - title: 区域面积折线图
+ - title: 区域面积图
dir: area-line
- title: 平滑曲线图
dir: smooth-line
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org