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 06:46:37 UTC
[echarts-handbook] branch master updated: add en posts list
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 d0077df add en posts list
d0077df is described below
commit d0077dfd856c28f4234667b672a62e7c58fa9161
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jul 21 14:46:26 2021 +0800
add en posts list
---
.../en/application/chart-types/bar/basic-bar.md | 167 ++++++++++++---------
contents/en/{bar.md => get-started.md} | 0
contents/en/posts.js | 1 -
contents/en/posts.yml | 147 ++++++++++++++++++
contents/zh/posts.yml | 6 +-
store/index.js | 4 +-
6 files changed, 246 insertions(+), 79 deletions(-)
diff --git a/contents/en/application/chart-types/bar/basic-bar.md b/contents/en/application/chart-types/bar/basic-bar.md
index 9150b3c..a9f00e5 100755
--- a/contents/en/application/chart-types/bar/basic-bar.md
+++ b/contents/en/application/chart-types/bar/basic-bar.md
@@ -4,51 +4,56 @@ Bar Chart, is a chart that presents the comparisons among discrete data. The len
To set the bar chart, you need to set the `name` of `series` as `'bar'`.
-[[CI Handbook]](${optionPath}series-bar)
+[[Configuraion]](${optionPath}series-bar)
## Simple Example
Let's begin with a basic 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]
- }]
+ 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 define some corresponding values for `'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']
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
},
- yAxis: {},
- series: [{
- type: 'bar',
- data: [23, 24, 18, 25, 27, 28, 25]
- }, {
- type: 'bar',
- data: [26, 24, 18, 22, 23, 20, 27]
- }]
+ {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }
+ ]
};
```
-
## Customized Bar Chart
### Styles
@@ -64,21 +69,25 @@ It is a good idea to install the style of Bar Chart by using ['series.itemStyle'
Here is a example:
<!-- embed -->
+
```js
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'
+ }
+ ]
};
```
@@ -89,21 +98,25 @@ 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
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'
+ }
+ ]
};
```
@@ -114,21 +127,25 @@ 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
option = {
- xAxis: {
- data: ['A', 'B', 'C', 'D', 'E']
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 18],
+ barGap: '20%',
+ barCategoryGap: '40%'
},
- yAxis: {},
- series: [{
- type: 'bar',
- data: [23, 24, 18, 25, 18],
- barGap: '20%',
- barCategoryGap: '40%'
- }, {
- type: 'bar',
- data: [12, 14, 9, 9, 11]
- }]
+ {
+ type: 'bar',
+ data: [12, 14, 9, 9, 11]
+ }
+ ]
};
```
@@ -136,30 +153,32 @@ In this case, the `barGap` is `'20%'`. That means the distance between bars unde
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 use `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.
-
+> 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 enabled by ['showBackground'](${optionPath}series-bar.showBackground) and configured by ['backgroundStyle'](${optionPath}series-bar.backgroundStyle).
<!-- embed -->
+
```js
option = {
- xAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [{
- data: [120, 200, 150, 80, 70, 110, 130],
- type: 'bar',
- showBackground: true,
- backgroundStyle: {
- color: 'rgba(220, 220, 220, 0.8)'
- }
- }]
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ }
+ }
+ ]
};
```
diff --git a/contents/en/bar.md b/contents/en/get-started.md
similarity index 100%
rename from contents/en/bar.md
rename to contents/en/get-started.md
diff --git a/contents/en/posts.js b/contents/en/posts.js
deleted file mode 100644
index 7d50d7e..0000000
--- a/contents/en/posts.js
+++ /dev/null
@@ -1 +0,0 @@
-export default ['bar'];
diff --git a/contents/en/posts.yml b/contents/en/posts.yml
new file mode 100644
index 0000000..35cf92d
--- /dev/null
+++ b/contents/en/posts.yml
@@ -0,0 +1,147 @@
+- title: Get Started
+ dir: get-started
+- title: Basics
+ dir: basics
+ children:
+ - title: Download ECharts
+ dir: download
+ - title: Import ECharts
+ dir: import
+ - title: Resources
+ dir: resource
+ draft: true
+ - title: Inspiration
+ dir: inspiration
+ - title: Get Help
+ dir: help
+ - title: Release Note
+ dir: release-note
+ children:
+ - title: ECharts 5.2.0
+ draft: true
+ dir: 5-2-0
+ - title: ECharts 5 Features
+ dir: v5-feature
+ - title: ECharts 5 Upgrade Guide
+ dir: v5-upgrade-guide
+- title: Concepts
+ dir: concepts
+ children:
+ - title: Chart Container
+ dir: chart-size
+ - title: Chart Option
+ dir: options
+ draft: true
+ - title: Series
+ dir: series
+ draft: true
+ - title: Style
+ dir: style
+ - title: Dataset
+ dir: dataset
+ - title: Data Transform
+ dir: data-transform
+ - title: Coordinate
+ dir: coordinate
+ draft: true
+ - title: Axis
+ dir: axis
+ - title: Visual Mapping
+ dir: visual-map
+ - title: Legend
+ dir: legend
+ - title: Event and Action
+ dir: event
+- title: Application
+ dir: application
+ children:
+ - title: Common Charts
+ dir: chart-types
+ children:
+ - title: Bar
+ dir: bar
+ children:
+ - title: Basic Bar
+ dir: basic-bar
+ - title: Stacked Bar
+ dir: stacked-bar
+ - title: Bar Racing
+ dir: bar-race
+ draft: true
+ - title: Bar Polar
+ dir: polar-bar
+ draft: true
+ - title: Waterfall
+ dir: waterfall
+ draft: true
+ - title: Line
+ dir: line
+ children:
+ - title: Basic Line
+ dir: basic-line
+ - title: Stacked Line
+ dir: stacked-line
+ - title: Area
+ dir: area-line
+ - title: Smoothed Line
+ dir: smooth-line
+ - title: Step Line
+ dir: step-line
+ - title: Pie
+ dir: pie
+ children:
+ - title: Basic Pie
+ dir: basic-pie
+ - title: Ring Style
+ dir: ring
+ - title: Rose Style
+ dir: rose
+ - title: Scatter
+ dir: scatter
+ children:
+ - title: Basic Scatter
+ dir: basic-scatter
+ - title: Mobile
+ dir: mobile
+ draft: true
+ - title: Cross Platform
+ dir: cross-platform
+ children:
+ - title: Server Side Rendering
+ dir: server
+ - title: Data
+ dir: data
+ children:
+ - title: Dynamic Data
+ dir: dynamic-data
+ - title: Drilldown
+ dir: drilldown
+ draft: true
+ - title: Label
+ dir: label
+ children:
+ - title: Rich Text
+ dir: rich-text
+ - title: Interaction
+ dir: interaction
+ children:
+ - title: Drag
+ dir: drag
+ - title: Connect
+ dir: connect
+ draft: true
+- title: 最佳实践
+ dir: best-practice
+ children:
+ - title: 移动端优化
+ dir: mobile
+ draft: true
+ - title: Canvas vs. SVG
+ dir: canvas-vs-svg
+ - title: 无障碍访问
+ dir: aria
+- title: 编辑本文档
+ dir: meta
+ children:
+ - title: 文档编辑指南
+ dir: get-started
diff --git a/contents/zh/posts.yml b/contents/zh/posts.yml
index efc4702..60448a4 100644
--- a/contents/zh/posts.yml
+++ b/contents/zh/posts.yml
@@ -134,9 +134,9 @@
children:
- title: 拖拽的实现
dir: drag
- - title: 多图联动
- dir: connect
- draft: true
+ - title: 多图联动
+ dir: connect
+ draft: true
- title: 最佳实践
dir: best-practice
children:
diff --git a/store/index.js b/store/index.js
index f6f5b47..09d2d4a 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,4 +1,5 @@
import zhPosts from '~/contents/zh/posts.yml'
+import enPosts from '~/contents/en/posts.yml'
import config from '~/configs/config'
export const state = () => ({
@@ -13,7 +14,8 @@ export const state = () => ({
adBlocked: false,
focusMode: false,
posts: {
- zh: zhPosts
+ zh: zhPosts,
+ en: enPosts
},
config: config
})
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org