Ovilia commented on a change in pull request #3:
URL:
https://github.com/apache/incubator-echarts-handbook/pull/3#discussion_r461335927
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
Review comment:
Perhaps no need for `(Bar graph)` here.
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a very easy bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should
enter the tick labels into `xAxis`. Meanwhile, the data type of the y-axis is
numerical. The range of the y-axis will be generated automatically by the
`data` in `series`.
Review comment:
Not sure if `enter` is suitable here. Maybe `define` or `state`?
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a very easy bar chart:
Review comment:
Maybe `basic` is more suitable here than `easy`.
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a very easy bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should
enter the tick labels into `xAxis`. Meanwhile, the data type of the y-axis is
numerical. The range of the y-axis will be generated automatically by the
`data` in `series`.
+
+
+## Multi-series Bar Chart
+
+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
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }, {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }]
+};
+```
+
+
+## Personalize Bar Chart
+
+### Styles
+
+It's good idea to install the style of Bar Chart by using
['series.itemStyle'](${optionPath}series-bar.itemStyle). Description of the SCI:
+
+- Color of column('color');
+- Outline color('borderColor'), width('borderWidth'), type('borderType') of
column;
+- Border radius of column('barBorderRadius');
+- Transparency('opacity');
+- Shadow type('shadowBlur','shadowColor','shadowOffsetX','shadowOffsetY')
Review comment:
Space after `,`
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a very easy bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should
enter the tick labels into `xAxis`. Meanwhile, the data type of the y-axis is
numerical. The range of the y-axis will be generated automatically by the
`data` in `series`.
+
+
+## Multi-series Bar Chart
+
+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
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }, {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }]
+};
+```
+
+
+## Personalize Bar Chart
Review comment:
We use `customized` for this situation.
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a very easy bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should
enter the tick labels into `xAxis`. Meanwhile, the data type of the y-axis is
numerical. The range of the y-axis will be generated automatically by the
`data` in `series`.
+
+
+## Multi-series Bar Chart
+
+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
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }, {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }]
+};
+```
+
+
+## Personalize Bar Chart
+
+### Styles
+
+It's good idea to install the style of Bar Chart by using
['series.itemStyle'](${optionPath}series-bar.itemStyle). Description of the SCI:
+
+- Color of column('color');
Review comment:
Add \` before and after `'`.
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a very easy bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should
enter the tick labels into `xAxis`. Meanwhile, the data type of the y-axis is
numerical. The range of the y-axis will be generated automatically by the
`data` in `series`.
+
+
+## Multi-series Bar Chart
+
+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
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }, {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }]
+};
+```
+
+
+## Personalize Bar Chart
+
+### Styles
+
+It's good idea to install the style of Bar Chart by using
['series.itemStyle'](${optionPath}series-bar.itemStyle). Description of the SCI:
+
+- Color of column('color');
+- Outline color('borderColor'), width('borderWidth'), type('borderType') of
column;
+- Border radius of column('barBorderRadius');
+- Transparency('opacity');
+- Shadow type('shadowBlur','shadowColor','shadowOffsetX','shadowOffsetY')
+
+Here is a example:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }]
+};
+```
+
+In this case, we defined the style of the bar chart by `itemStyle` of
corresponding `series`. For complete configuration items and their usage,
please check the configuration item manual:
[`series.itemStyle`](${optionPath}series-bar.itemStyle)。
+
+### Width and Height of Column
+
+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
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }]
+};
+```
+
+In addition, [`barMaxWidth`](${optionPath}series-bar.barMaxWidth) has limited
the maximum width of the bar. For some small value, you can declare a minimum
height for the bar: [`barMinHeight`](${optionPath}series-bar.barMinHeight).
When the corresponding height of data is smaller than the limit, the system
will take 'barMinHeight' as the replaced height.
+
+### Column Spacing
+
+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
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 18],
+ barGap: '20%',
+ barCategoryGap: '40%'
+ }, {
+ type: 'bar',
+ data: [12, 14, 9, 9, 11]
+ }]
+};
+```
+
+In this case, the `barGap` is `'20%'`. That means the distance between bars
under the same category is 20% of the bar width. For instance, if we set the
`barCategoryGap` to `'40%'`, the gap on each side of the bar will take 40%
place in categories (compared with the width of the column).
+
+Usually, `barWidth` is not necessary to be clarified if `'barGap'` and
`barCategoryGap` was set. If you need to make sure the bar is not too wide
while the graph is large, try to us `barMaxWidth` to limit the maximum width of
bars.
+
+>In the same cartesian coordinate system, the property will be shared by
several column series. To make sure it takes effect on the graph, please set
the property on the last bar chart series of the system.
+
+
+### Add Background Color for Bars
+
+You might want to change the background color of bars sometimes. After ECharts
v4.7.0, this function can be activated by
['showBackground'](${optionPath}series-bar.showBackground) and configured by
['backgroundStyle'](${optionPath}series-bar.backgroundStyle).
Review comment:
`activated` may be replaced with `enabled`.
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a very easy bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should
enter the tick labels into `xAxis`. Meanwhile, the data type of the y-axis is
numerical. The range of the y-axis will be generated automatically by the
`data` in `series`.
+
+
+## Multi-series Bar Chart
+
+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
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }, {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }]
+};
+```
+
+
+## Personalize Bar Chart
+
+### Styles
+
+It's good idea to install the style of Bar Chart by using
['series.itemStyle'](${optionPath}series-bar.itemStyle). Description of the SCI:
+
+- Color of column('color');
+- Outline color('borderColor'), width('borderWidth'), type('borderType') of
column;
+- Border radius of column('barBorderRadius');
+- Transparency('opacity');
+- Shadow type('shadowBlur','shadowColor','shadowOffsetX','shadowOffsetY')
+
+Here is a example:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }]
+};
+```
+
+In this case, we defined the style of the bar chart by `itemStyle` of
corresponding `series`. For complete configuration items and their usage,
please check the configuration item manual:
[`series.itemStyle`](${optionPath}series-bar.itemStyle)。
+
+### Width and Height of Column
+
+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
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }]
+};
+```
+
+In addition, [`barMaxWidth`](${optionPath}series-bar.barMaxWidth) has limited
the maximum width of the bar. For some small value, you can declare a minimum
height for the bar: [`barMinHeight`](${optionPath}series-bar.barMinHeight).
When the corresponding height of data is smaller than the limit, the system
will take 'barMinHeight' as the replaced height.
Review comment:
`the system` may be replaced by `ECharts`.
##########
File path: contents/en/application/chart-types/line/area-line.md
##########
@@ -0,0 +1,27 @@
+# Area Line 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.
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ 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
+ }
+ }]
+};
+```
+
+If you want to change the area style of the line chart, try to use
[`areaStyle`](${optionPath}series-line.areaStyle). Set `areaStyle` to `{}` to
use the default type: use the color of series to fill the area in translucent.
If you want to change the type, try to override the configuration items in
`areaStyle`. For example, the color of the second series was changed to yellow
with 50% opacity.
Review comment:
Not `change the type` but `change the style`.
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart(Bar graph), is a chart that presents the comparisons among discrete
data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a very easy bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should
enter the tick labels into `xAxis`. Meanwhile, the data type of the y-axis is
numerical. The range of the y-axis will be generated automatically by the
`data` in `series`.
+
+
+## Multi-series Bar Chart
+
+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
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }, {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }]
+};
+```
+
+
+## Personalize Bar Chart
+
+### Styles
+
+It's good idea to install the style of Bar Chart by using
['series.itemStyle'](${optionPath}series-bar.itemStyle). Description of the SCI:
+
+- Color of column('color');
+- Outline color('borderColor'), width('borderWidth'), type('borderType') of
column;
+- Border radius of column('barBorderRadius');
+- Transparency('opacity');
+- Shadow type('shadowBlur','shadowColor','shadowOffsetX','shadowOffsetY')
+
+Here is a example:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }]
+};
+```
+
+In this case, we defined the style of the bar chart by `itemStyle` of
corresponding `series`. For complete configuration items and their usage,
please check the configuration item manual:
[`series.itemStyle`](${optionPath}series-bar.itemStyle)。
+
+### Width and Height of Column
+
+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.
Review comment:
\`'barWidth'\`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org
For additional commands, e-mail: dev-h...@echarts.apache.org
