You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/12/23 18:31:55 UTC
[incubator-echarts-doc] branch release updated: feat: update
tutorial.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/release by this push:
new 1284591 feat: update tutorial.
new e8f1daa Merge branch 'release' of github.com:apache/incubator-echarts-doc into release
1284591 is described below
commit 128459127dee30e023be1ebc60ea95fec6eb1aea
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Dec 24 02:31:07 2019 +0800
feat: update tutorial.
---
asset-src/basic-concepts-overview/components.html | 166 -----
.../basic-concepts-overview/coord-sys-0-code.png | Bin 0 -> 46037 bytes
asset-src/basic-concepts-overview/coord-sys-0.png | Bin 0 -> 43013 bytes
.../basic-concepts-overview/coord-sys-1-code.png | Bin 0 -> 95940 bytes
asset-src/basic-concepts-overview/coord-sys-1.png | Bin 0 -> 67670 bytes
.../basic-concepts-overview/coord-sys-2-code.png | Bin 0 -> 150171 bytes
asset-src/basic-concepts-overview/coord-sys-2.png | Bin 0 -> 92589 bytes
asset-src/basic-concepts-overview/locate.html | 130 ----
asset-src/basic-concepts-overview/make-img.html | 732 +++++++++++++++++++++
asset-src/basic-concepts-overview/make-img.pptx | Bin 1032112 -> 1535020 bytes
.../multiple-ec-instance.html | 31 -
asset-src/basic-concepts-overview/series.html | 197 ------
asset/img/basic-concepts-overview/components.jpg | Bin 105306 -> 71677 bytes
asset/img/basic-concepts-overview/coord-sys-0.jpg | Bin 0 -> 29259 bytes
asset/img/basic-concepts-overview/coord-sys-1.jpg | Bin 0 -> 45861 bytes
asset/img/basic-concepts-overview/coord-sys-2.jpg | Bin 0 -> 69891 bytes
asset/img/basic-concepts-overview/locate.jpg | Bin 69129 -> 47641 bytes
.../multiple-ec-instance.jpg | Bin 128535 -> 88599 bytes
asset/img/basic-concepts-overview/series-all-a.jpg | Bin 93692 -> 63608 bytes
asset/img/basic-concepts-overview/series-all-b.jpg | Bin 99786 -> 69138 bytes
zh/tutorial/basic-concepts-overview.md | 90 ++-
21 files changed, 813 insertions(+), 533 deletions(-)
diff --git a/asset-src/basic-concepts-overview/components.html b/asset-src/basic-concepts-overview/components.html
deleted file mode 100644
index 96c958b..0000000
--- a/asset-src/basic-concepts-overview/components.html
+++ /dev/null
@@ -1,166 +0,0 @@
-<!DOCTYPE html>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/echarts/theme/vintage.js"></script>
- </head>
- <body>
- <style>
- .chart {
- width: 650px;
- height: 300px;
- margin: 200px auto;
- }
- .chart1 {
- height: 180px;
- }
- .bone {
- color: #aaa;
- margin: 0 20px;
- }
- body {
- /* background: #ddd; */
- padding: 20px;
- }
- </style>
-
-
-
- <div id="main0" class="chart"></div>
-
-
-
-
- <script>
- var dom0 = document.getElementById('main0');
-
- var chart0 = echarts.init(dom0, 'vintage');
-
- var option0 = {
- backgroundColor: '#fff',
- xAxis: [{
- type: 'time',
- splitLine: {show: false},
- axisLabel: {
- formatter: function (params) {
- return echarts.format.formatTime('yyyy-MM-dd', params);
- }
- }
- }],
- yAxis: [{
- splitLine: {show: false}
- }],
- grid: [{
- bottom: 85,
- right: 100
- }],
- legend: {
- data: ['MGT', 'QEL']
- },
- toolbox: {
- right: 5,
- feature: {
- dataZoom: {},
- restore: {},
- saveAsImage: {}
- }
- },
- dataZoom: {
- showDetail: true
- },
- visualMap: {
- type: 'continuous',
- dimension: 3,
- seriesIndex: 1,
- min: 0,
- max: 1000,
- inRange: {
- color: ['#E5F9E0', '#2F9C95']
- },
- outOfRange: {
- color: '#aaa'
- },
- calculable: true,
- right: 5,
- top: 'center'
- },
- tooltip: {
- trigger: 'axis'
- },
- dataset: {
- source: [
- ['2012-09-01', 34, 20, 623],
- ['2012-09-02', 28, 14, 414],
- ['2012-09-03', 45, 32, 355],
- ['2012-09-04', 69, 46, 471],
- ['2012-09-05', 39, 24, 519],
- ['2012-09-06', 43, 23, 813],
- ['2012-09-07', 33, 23, 901],
- ['2012-09-08', 23, 13, 791],
- ['2012-09-09', 23, 16, 413],
- ['2012-09-10', 33, 20, 215],
- ['2012-09-11', 39, 24, 316],
- ['2012-09-12', 42, 32, 613],
- ['2012-09-13', 34, 25, 812],
- ['2012-09-14', 30, 21, 710],
- ['2012-09-15', 22, 15, 601],
- ['2012-09-16', 19, 11, 400],
- ['2012-09-17', 24, 15, 231],
- ['2012-09-18', 29, 19, 124],
- ['2012-09-19', 35, 23, 301],
- ['2012-09-20', 21, 10, 401],
- ['2012-09-21', 26, 19, 501],
- ['2012-09-22', 43, 32, 601],
- ['2012-09-23', 34, 21, 701]
- ]
- },
- series: [{
- name: 'MGT',
- type: 'line',
- showSymbol: false,
- encode: {
- x: 0,
- y: 1
- }
- }, {
- name: 'QEL',
- type: 'bar',
- encode: {
- x: 0,
- y: 2
- }
- }]
- };
-
- chart0.setOption(option0);
-
-
- </script>
-
-
-
-
- </body>
-</html>
diff --git a/asset-src/basic-concepts-overview/coord-sys-0-code.png b/asset-src/basic-concepts-overview/coord-sys-0-code.png
new file mode 100644
index 0000000..d80f349
Binary files /dev/null and b/asset-src/basic-concepts-overview/coord-sys-0-code.png differ
diff --git a/asset-src/basic-concepts-overview/coord-sys-0.png b/asset-src/basic-concepts-overview/coord-sys-0.png
new file mode 100644
index 0000000..977efa5
Binary files /dev/null and b/asset-src/basic-concepts-overview/coord-sys-0.png differ
diff --git a/asset-src/basic-concepts-overview/coord-sys-1-code.png b/asset-src/basic-concepts-overview/coord-sys-1-code.png
new file mode 100644
index 0000000..5a9f1be
Binary files /dev/null and b/asset-src/basic-concepts-overview/coord-sys-1-code.png differ
diff --git a/asset-src/basic-concepts-overview/coord-sys-1.png b/asset-src/basic-concepts-overview/coord-sys-1.png
new file mode 100644
index 0000000..0175777
Binary files /dev/null and b/asset-src/basic-concepts-overview/coord-sys-1.png differ
diff --git a/asset-src/basic-concepts-overview/coord-sys-2-code.png b/asset-src/basic-concepts-overview/coord-sys-2-code.png
new file mode 100644
index 0000000..ece8b8c
Binary files /dev/null and b/asset-src/basic-concepts-overview/coord-sys-2-code.png differ
diff --git a/asset-src/basic-concepts-overview/coord-sys-2.png b/asset-src/basic-concepts-overview/coord-sys-2.png
new file mode 100644
index 0000000..4de218f
Binary files /dev/null and b/asset-src/basic-concepts-overview/coord-sys-2.png differ
diff --git a/asset-src/basic-concepts-overview/locate.html b/asset-src/basic-concepts-overview/locate.html
deleted file mode 100644
index 57b2f1e..0000000
--- a/asset-src/basic-concepts-overview/locate.html
+++ /dev/null
@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/echarts/theme/vintage.js"></script>
- </head>
- <body>
- <style>
- .chart {
- width: 650px;
- height: 300px;
- margin: 200px auto;
- }
- .chart1 {
- height: 180px;
- }
- .bone {
- color: #aaa;
- margin: 0 20px;
- }
- body {
- /* background: #ddd; */
- padding: 20px;
- }
- </style>
-
-
-
- <div id="main0" class="chart"></div>
-
-
-
-
- <script>
- var dom0 = document.getElementById('main0');
-
- var chart0 = echarts.init(dom0, 'vintage');
-
- var option0 = {
- backgroundColor: '#eee',
- xAxis: [{
- type: 'time',
- splitLine: {show: false}
- }],
- yAxis: [{
- splitLine: {show: false}
- }],
- grid: [{
- left: 130,
- right: '30%',
- height: '40%',
- bottom: 110
- }],
- dataset: {
- source: [
- ['2012-09-01', 34, 20, 623],
- ['2012-09-02', 28, 14, 414],
- ['2012-09-03', 45, 32, 355],
- ['2012-09-04', 69, 46, 471],
- ['2012-09-05', 39, 24, 519],
- ['2012-09-06', 43, 23, 813],
- ['2012-09-07', 33, 23, 901],
- ['2012-09-08', 23, 13, 791],
- ['2012-09-09', 23, 16, 413],
- ['2012-09-10', 33, 20, 215],
- ['2012-09-11', 39, 24, 316],
- ['2012-09-12', 42, 32, 613],
- ['2012-09-13', 34, 25, 812],
- ['2012-09-14', 30, 21, 710],
- ['2012-09-15', 22, 15, 601],
- ['2012-09-16', 19, 11, 400],
- ['2012-09-17', 24, 15, 231],
- ['2012-09-18', 29, 19, 124],
- ['2012-09-19', 35, 23, 301],
- ['2012-09-20', 21, 10, 401],
- ['2012-09-21', 26, 19, 501],
- ['2012-09-22', 43, 32, 601],
- ['2012-09-23', 34, 21, 701]
- ]
- },
- series: [{
- name: 'MGT',
- type: 'line',
- showSymbol: false,
- encode: {
- x: 0,
- y: 1
- }
- }, {
- name: 'QEL',
- type: 'bar',
- encode: {
- x: 0,
- y: 2
- }
- }]
- };
-
- chart0.setOption(option0);
-
-
- </script>
-
-
-
-
- </body>
-</html>
diff --git a/asset-src/basic-concepts-overview/make-img.html b/asset-src/basic-concepts-overview/make-img.html
new file mode 100644
index 0000000..70d92ea
--- /dev/null
+++ b/asset-src/basic-concepts-overview/make-img.html
@@ -0,0 +1,732 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/echarts/theme/vintage.js"></script>
+ </head>
+ <body>
+ <style>
+ .chart {
+ width: 650px;
+ height: 300px;
+ margin: 200px auto;
+ }
+ .chart1 {
+ height: 180px;
+ }
+ .bone {
+ color: #aaa;
+ margin: 0 20px;
+ }
+ body {
+ /* background: #ddd; */
+ padding: 20px;
+ }
+ .chart-coord-sys {
+ width: 400px;
+ height: 400px;
+ }
+ .chart-coord-sys2 {
+ width: 500px;
+ height: 400px;
+ }
+ </style>
+
+
+
+ <div id="series-0" class="chart"></div>
+ <div id="series-1" class="chart"></div>
+ <div id="components" class="chart"></div>
+ <div id="locate" class="chart"></div>
+ <div id="coord-sys0" class="chart chart-coord-sys"></div>
+ <div id="coord-sys1" class="chart chart-coord-sys"></div>
+ <div id="coord-sys2" class="chart chart-coord-sys2"></div>
+
+
+
+
+
+
+
+
+ <script>
+ var dom0 = document.getElementById('series-0');
+
+ var chart0 = echarts.init(dom0, 'vintage');
+
+ var option0 = {
+ backgroundColor: '#fff',
+ xAxis: [{
+ type: 'category',
+ splitLine: {show: false}
+ }],
+ yAxis: [{
+ splitLine: {show: false}
+ }],
+ grid: [{
+ }],
+ // legend: {},
+ dataset: {
+ source: [
+ ['Jan', 34, 20, 54],
+ ['Feb', 28, 14, 64],
+ ['Mar', 45, 32, 43],
+ ['Apr', 69, 46, 74],
+ ['May', 39, 24, 94],
+ ['Jun', 43, 23, 64],
+ ['Jul', 33, 23, 44],
+ ['Aug', 23, 13, 30],
+ ['Sep', 23, 16, 21],
+ ['Oct', 33, 20, 28],
+ ['Nov', 39, 24, 34],
+ ['Dec', 22, 15, 25],
+ ]
+ },
+ series: [{
+ name: 'series0',
+ type: 'line'
+ }, {
+ name: 'series1',
+ type: 'bar'
+ }, {
+ name: 'series2',
+ type: 'pie',
+ center: ['65%', 60],
+ radius: 35,
+ data: [
+ {name: 'XX', value: 52},
+ {name: 'YY', value: 54},
+ {name: 'ZZ', value: 42}
+ ]
+ }]
+ };
+
+ chart0.setOption(option0);
+
+
+ </script>
+
+
+
+
+
+
+
+ <script>
+ var dom = document.getElementById('series-1');
+
+ var chart = echarts.init(dom, 'vintage');
+
+ var option = {
+ backgroundColor: '#fff',
+ xAxis: [{
+ type: 'category',
+ splitLine: {show: false}
+ }],
+ yAxis: [{
+ splitLine: {show: false}
+ }],
+ dataset: {
+ source: [
+ ['Jan', 34, 20, 'XX', 52],
+ ['Feb', 28, 14, 'YY', 54],
+ ['Mar', 45, 32, 'ZZ', 42],
+ ['Apr', 69, 46],
+ ['May', 39, 24],
+ ['Jun', 43, 23],
+ ['Jul', 33, 23],
+ ['Aug', 23, 13],
+ ['Sep', 23, 16],
+ ['Oct', 33, 20],
+ ['Nov', 39, 24],
+ ['Dec', 22, 15],
+ ]
+ },
+ series: [{
+ type: 'line',
+ encode: {x:0, y: 1}
+ }, {
+ type: 'bar',
+ encode: {x:0, y: 2}
+ }, {
+ type: 'pie',
+ center: ['65%', 60],
+ radius: 35,
+ encode: {
+ itemName: 3,
+ value: 4
+ }
+ }]
+ };
+
+ chart.setOption(option);
+
+
+ </script>
+
+
+
+
+
+ <script>
+ var dom0 = document.getElementById('components');
+
+ var chart0 = echarts.init(dom0, 'vintage');
+
+ var option0 = {
+ backgroundColor: '#fff',
+ xAxis: [{
+ type: 'time',
+ splitLine: {show: false},
+ axisLabel: {
+ formatter: function (params) {
+ return echarts.format.formatTime('yyyy-MM-dd', params);
+ }
+ }
+ }],
+ yAxis: [{
+ splitLine: {show: false}
+ }],
+ grid: [{
+ bottom: 85,
+ right: 100
+ }],
+ legend: {
+ data: ['MGT', 'QEL']
+ },
+ toolbox: {
+ right: 5,
+ feature: {
+ dataZoom: {},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ dataZoom: {
+ showDetail: true
+ },
+ visualMap: {
+ type: 'continuous',
+ dimension: 3,
+ seriesIndex: 1,
+ min: 0,
+ max: 1000,
+ inRange: {
+ color: ['#E5F9E0', '#2F9C95']
+ },
+ outOfRange: {
+ color: '#aaa'
+ },
+ calculable: true,
+ right: 5,
+ top: 'center'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ dataset: {
+ source: [
+ ['2012-09-01', 34, 20, 623],
+ ['2012-09-02', 28, 14, 414],
+ ['2012-09-03', 45, 32, 355],
+ ['2012-09-04', 69, 46, 471],
+ ['2012-09-05', 39, 24, 519],
+ ['2012-09-06', 43, 23, 813],
+ ['2012-09-07', 33, 23, 901],
+ ['2012-09-08', 23, 13, 791],
+ ['2012-09-09', 23, 16, 413],
+ ['2012-09-10', 33, 20, 215],
+ ['2012-09-11', 39, 24, 316],
+ ['2012-09-12', 42, 32, 613],
+ ['2012-09-13', 34, 25, 812],
+ ['2012-09-14', 30, 21, 710],
+ ['2012-09-15', 22, 15, 601],
+ ['2012-09-16', 19, 11, 400],
+ ['2012-09-17', 24, 15, 231],
+ ['2012-09-18', 29, 19, 124],
+ ['2012-09-19', 35, 23, 301],
+ ['2012-09-20', 21, 10, 401],
+ ['2012-09-21', 26, 19, 501],
+ ['2012-09-22', 43, 32, 601],
+ ['2012-09-23', 34, 21, 701]
+ ]
+ },
+ series: [{
+ name: 'MGT',
+ type: 'line',
+ showSymbol: false,
+ encode: {
+ x: 0,
+ y: 1
+ }
+ }, {
+ name: 'QEL',
+ type: 'bar',
+ encode: {
+ x: 0,
+ y: 2
+ }
+ }]
+ };
+
+ chart0.setOption(option0);
+ </script>
+
+
+
+
+
+
+
+ <script>
+ var dom0 = document.getElementById('locate');
+
+ var chart0 = echarts.init(dom0, 'vintage');
+
+ var option0 = {
+ backgroundColor: '#eee',
+ xAxis: [{
+ type: 'time',
+ splitLine: {show: false}
+ }],
+ yAxis: [{
+ splitLine: {show: false}
+ }],
+ grid: [{
+ left: 130,
+ right: '30%',
+ height: '40%',
+ bottom: 110
+ }],
+ dataset: {
+ source: [
+ ['2012-09-01', 34, 20, 623],
+ ['2012-09-02', 28, 14, 414],
+ ['2012-09-03', 45, 32, 355],
+ ['2012-09-04', 69, 46, 471],
+ ['2012-09-05', 39, 24, 519],
+ ['2012-09-06', 43, 23, 813],
+ ['2012-09-07', 33, 23, 901],
+ ['2012-09-08', 23, 13, 791],
+ ['2012-09-09', 23, 16, 413],
+ ['2012-09-10', 33, 20, 215],
+ ['2012-09-11', 39, 24, 316],
+ ['2012-09-12', 42, 32, 613],
+ ['2012-09-13', 34, 25, 812],
+ ['2012-09-14', 30, 21, 710],
+ ['2012-09-15', 22, 15, 601],
+ ['2012-09-16', 19, 11, 400],
+ ['2012-09-17', 24, 15, 231],
+ ['2012-09-18', 29, 19, 124],
+ ['2012-09-19', 35, 23, 301],
+ ['2012-09-20', 21, 10, 401],
+ ['2012-09-21', 26, 19, 501],
+ ['2012-09-22', 43, 32, 601],
+ ['2012-09-23', 34, 21, 701]
+ ]
+ },
+ series: [{
+ name: 'MGT',
+ type: 'line',
+ showSymbol: false,
+ encode: {
+ x: 0,
+ y: 1
+ }
+ }, {
+ name: 'QEL',
+ type: 'bar',
+ encode: {
+ x: 0,
+ y: 2
+ }
+ }]
+ };
+
+ chart0.setOption(option0);
+ </script>
+
+
+
+
+
+ <script>
+ var dom0 = document.getElementById('coord-sys0');
+
+ var chart0 = echarts.init(dom0, 'vintage');
+
+ var option = {
+ color: ['blue'],
+ backgroundColor: '#fff',
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'scatter',
+ data: [
+ [13, 44],
+ [51, 51],
+ [51, 32],
+ [67, 19],
+ [19, 33]
+ ]
+ }
+ }
+
+ chart0.setOption(option);
+
+
+ </script>
+
+
+
+
+
+
+ <script>
+ var dom0 = document.getElementById('coord-sys1');
+
+ var chart0 = echarts.init(dom0, 'vintage');
+
+ var option = {
+ color: ['#f0cf85', '#61a0a8'],
+ backgroundColor: '#fff',
+ xAxis: {
+ axisLine: {lineStyle: {color: '#aaa'}},
+ axisLabel: {color: '#000'},
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: [
+ {
+ splitLine: {show: false},
+ axisLine: {lineStyle: {width: 4, color: '#f0cf85'}},
+ axisLabel: {color: '#000'}
+ },
+ {
+ splitLine: {show: false},
+ axisLine: {lineStyle: {width: 4, color: '#61a0a8'}},
+ axisLabel: {color: '#000'}
+ }
+ ],
+ series: [{
+ type: 'bar',
+ data: [242, 344, 324, 475, 264, 467, 531],
+ barWidth: '60%'
+ }, {
+ type: 'line',
+ data: [44, 51, 32, 19, 33, 24, 12],
+ lineStyle: {width: 8},
+ symbolSize: 12,
+ yAxisIndex: 1
+ }]
+ };
+
+ chart0.setOption(option);
+
+
+ </script>
+
+
+
+
+
+ <script>
+ var dom0 = document.getElementById('coord-sys2');
+
+ var chart0 = echarts.init(dom0, 'vintage');
+
+ var option = {
+ dataset: {
+ source: [
+ ['Jan', 25, 54, 24],
+ ['Feb', 22, 64, 14],
+ ['Mar', 62, 43, 39],
+ ['Apr', 45, 74, 50],
+ ['May', 34, 94, 25],
+ ['Jun', 43, 64, 23],
+ ['Jul', 33, 44, 23],
+ ['Aug', 23, 30, 13],
+ ['Sep', 43, 21, 20],
+ ['Oct', 33, 28, 24],
+ ['Nov', 39, 34, 33],
+ ['Dec', 45, 44, 39],
+ ]
+ },
+ grid: [{
+ top: 40,
+ bottom: '58%',
+ borderColor: '#ccc',
+ borderWidth: 1,
+ show: true
+ }, {
+ top: '58%',
+ bottom: 40,
+ borderColor: '#ccc',
+ borderWidth: 1,
+ show: true
+ }],
+ xAxis: [{
+ type: 'category',
+ splitLine: {show: false},
+ gridIndex: 0
+ }, {
+ type: 'category',
+ splitLine: {show: false},
+ gridIndex: 1
+ }],
+ yAxis: [{
+ splitLine: {show: false},
+ gridIndex: 0
+ }, {
+ splitLine: {show: false},
+ gridIndex: 1
+ }],
+ series: [{
+ type: 'line',
+ xAxisIndex: 0,
+ yAxisIndex: 0
+ }, {
+ type: 'line',
+ xAxisIndex: 1,
+ yAxisIndex: 1
+ }, {
+ type: 'bar',
+ xAxisIndex: 1,
+ yAxisIndex: 1
+ }]
+ };
+
+ chart0.setOption(option);
+
+
+ </script>
+
+
+
+
+
+
+
+
+ <template>
+
+
+
+ var dom1 = document.getElementById('id1');
+ var instance1 = echarts.init(dom1);
+ var option1 = {
+ xAxis: [{...}, {...}],
+ yAxis: [{...}, {...}],
+ grid: [{...}, {...}],
+ series: [
+ {type: 'line', data: [...]},
+ {type: 'bar', data: [...]},
+ {type: 'bar', data: [...]},
+ {type: 'pie', data: [...]}
+ }]
+ };
+ instance1.setOption(option1);
+
+
+ var dom2 = document.getElementById('id2');
+ var chart2 = echarts.init(dom2);
+ var option2 = {
+ xAxis: {...},
+ yAxis: {...},
+ grid: {...},
+ series: {type: 'bar', data: [...]}
+ };
+ chart2.setOption(option2);
+
+
+
+ var option = {
+ xAxis: {
+ data: [
+ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+ ]
+ },
+ yAxis: {},
+ series: [{
+ type: 'pie',
+ center: ['65%', 60],
+ radius: 35,
+ data: [
+ {name: 'XX', value: 52},
+ {name: 'YY', value: 54},
+ {name: 'ZZ', value: 42}
+ ]
+ }, {
+ type: 'line',
+ data: [34, 28, 45, 69, 39, 43, 33, 23, 23, 33, 39, 22]
+ }, {
+ type: 'bar',
+ data: [20, 14, 32, 46, 24, 23, 23, 13, 16, 20, 24, 15]
+ }]
+ };
+
+
+
+ var option = {
+ xAxis: {type: 'category'},
+ yAxis: {},
+ dataset: {
+ source: [
+ [ 'Jan' , 34 , 20 , 'XX' , 52 ],
+ [ 'Feb' , 28 , 14 , 'YY' , 54 ],
+ [ 'Mar' , 45 , 32 , 'ZZ' , 42 ],
+ [ 'Apr' , 69 , 46 ],
+ [ 'May' , 39 , 24 ],
+ [ 'Jun' , 43 , 23 ],
+ [ 'Jul' , 33 , 23 ],
+ [ 'Aug' , 23 , 13 ],
+ [ 'Sep' , 23 , 16 ],
+ [ 'Oct' , 33 , 20 ],
+ [ 'Nov' , 39 , 24 ],
+ [ 'Dec' , 22 , 15 ],
+ ]
+ },
+ series: [{
+ type: 'pie',
+ center: ['65%', 60],
+ radius: 35,
+ encode: {itemName: 3, value: 4}
+ }, {
+ type: 'line',
+ encode: {x:0, y: 1}
+ }, {
+ type: 'bar',
+ encode: {x:0, y: 2}
+ }]
+ };
+
+
+
+ var option = {
+ legend: {...},
+ toolbox: {...},
+ tooltip: {...},
+ dataZoom: [{...}, {...}],
+ visualMap: {...},
+ xAxis: [{...}],
+ yAxis: [{...}],
+ grid: [{...}],
+ dataset: {
+ source: [...]
+ },
+ series: [{
+ type: 'line',
+ ...
+ }, {
+ type: 'bar',
+ ...
+ }]
+ };
+
+
+ var option = {
+ grid: {
+ left: 130,
+ right: '30%',
+ height: '40%',
+ bottom: 110
+ },
+ xAxis: {...},
+ yAxis: {...},
+ series: [{...}, {...}]
+ };
+
+
+
+ var option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'scatter',
+ data: [
+ [13, 44],
+ [51, 51],
+ [51, 32],
+ [67, 19],
+ [19, 33]
+ ]
+ }
+ }
+
+
+
+ var option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: [
+ {...},
+ {...}
+ ],
+ series: [{
+ type: 'bar',
+ data: [242, 344, 324, 475, 264, 467, 531],
+ yAxisIndex: 0
+ }, {
+ type: 'line',
+ data: [44, 51, 32, 19, 33, 24, 12],
+ yAxisIndex: 1
+ }]
+ };
+
+
+
+ var option = {
+ dataset: {source: [...]},
+ grid: [
+ {top: 40, bottom: '58%'},
+ {top: '58%', bottom: 40}
+ ],
+ xAxis: [
+ {type: 'category', gridIndex: 0},
+ {type: 'category', gridIndex: 1}
+ ],
+ yAxis: [
+ {type: 'value', gridIndex: 0},
+ {type: 'value', gridIndex: 1}
+ ],
+ series: [{
+ type: 'line',
+ xAxisIndex: 0,
+ yAxisIndex: 0
+ }, {
+ type: 'line',
+ xAxisIndex: 1,
+ yAxisIndex: 1
+ }, {
+ type: 'bar',
+ xAxisIndex: 1,
+ yAxisIndex: 1
+ }]
+ };
+ </template>
+
+ </body>
+</html>
diff --git a/asset-src/basic-concepts-overview/make-img.pptx b/asset-src/basic-concepts-overview/make-img.pptx
index dc9a787..6ee0aa8 100644
Binary files a/asset-src/basic-concepts-overview/make-img.pptx and b/asset-src/basic-concepts-overview/make-img.pptx differ
diff --git a/asset-src/basic-concepts-overview/multiple-ec-instance.html b/asset-src/basic-concepts-overview/multiple-ec-instance.html
index 41a24a9..530856b 100644
--- a/asset-src/basic-concepts-overview/multiple-ec-instance.html
+++ b/asset-src/basic-concepts-overview/multiple-ec-instance.html
@@ -185,37 +185,6 @@ under the License.
</script>
- <!-- Brief -->
- <template>
-
- var dom0 = document.getElementById('id0');
- var chart0 = echarts.init(dom0);
- var option0 = {
- xAxis: [{...}, {...}],
- yAxis: [{...}, {...}],
- grid: [{...}, {...}],
- series: [
- {type: 'line', data: [...]},
- {type: 'bar', data: [...]},
- {type: 'bar', data: [...]},
- {type: 'pie', data: [...]}
- }]
- };
- chart0.setOption(option0);
-
-
- var dom1 = document.getElementById('id1');
- var chart1 = echarts.init(dom1);
- var option1 = {
- xAxis: {...},
- yAxis: {...},
- grid: {...},
- series: {type: 'bar', data: [...]}
- };
- chart1.setOption(option1);
-
- </template>
-
</body>
</html>
diff --git a/asset-src/basic-concepts-overview/series.html b/asset-src/basic-concepts-overview/series.html
deleted file mode 100644
index 41de5f3..0000000
--- a/asset-src/basic-concepts-overview/series.html
+++ /dev/null
@@ -1,197 +0,0 @@
-<!DOCTYPE html>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-
-<html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/echarts/theme/vintage.js"></script>
- </head>
- <body>
- <style>
- .chart {
- width: 450px;
- height: 500px;
- margin: 200px auto;
- }
- .chart1 {
- height: 180px;
- }
- .bone {
- color: #aaa;
- margin: 0 20px;
- }
- body {
- /* background: #ddd; */
- padding: 20px;
- }
- </style>
-
-
-
- <div id="main0" class="chart"></div>
-
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
-
- <div id="main1" class="chart"></div>
-
-
-
-
-
- <script>
- var dom0 = document.getElementById('main0');
-
- var chart0 = echarts.init(dom0, 'vintage');
-
- var option0 = {
- backgroundColor: '#fff',
- xAxis: [{
- type: 'category',
- splitLine: {show: false}
- }],
- yAxis: [{
- splitLine: {show: false}
- }],
- grid: [{
- }],
- // legend: {},
- dataset: {
- source: [
- ['Jan', 34, 20, 54],
- ['Feb', 28, 14, 64],
- ['Mar', 45, 32, 43],
- ['Apr', 69, 46, 74],
- ['May', 39, 24, 94],
- ['Jun', 43, 23, 64],
- ['Jul', 33, 23, 44],
- ['Aug', 23, 13, 30],
- ['Sep', 23, 16, 21],
- ['Oct', 33, 20, 28],
- ['Nov', 39, 24, 34],
- ['Dec', 22, 15, 25],
- ]
- },
- series: [{
- name: 'series0',
- type: 'line'
- }, {
- name: 'series1',
- type: 'bar'
- }, {
- name: 'series2',
- type: 'pie',
- center: ['65%', 60],
- radius: 35,
- data: [
- {name: 'XX', value: 52},
- {name: 'YY', value: 54},
- {name: 'ZZ', value: 42}
- ]
- }]
- };
-
- chart0.setOption(option0);
-
-
- </script>
-
-
-
-
-
-
-
- <script>
- var dom = document.getElementById('main1');
-
- var chart = echarts.init(dom, 'vintage');
-
- var option = {
- backgroundColor: '#fff',
- xAxis: [{
- type: 'category',
- splitLine: {show: false}
- }],
- yAxis: [{
- splitLine: {show: false}
- }],
- dataset: {
- source: [
- ['Jan', 34, 20, 'XX', 52],
- ['Feb', 28, 14, 'YY', 54],
- ['Mar', 45, 32, 'ZZ', 42],
- ['Apr', 69, 46],
- ['May', 39, 24],
- ['Jun', 43, 23],
- ['Jul', 33, 23],
- ['Aug', 23, 13],
- ['Sep', 23, 16],
- ['Oct', 33, 20],
- ['Nov', 39, 24],
- ['Dec', 22, 15],
- ]
- },
- series: [{
- type: 'line',
- encode: {x:0, y: 1}
- }, {
- type: 'bar',
- encode: {x:0, y: 2}
- }, {
- type: 'pie',
- center: ['65%', 60],
- radius: 35,
- encode: {
- itemName: 3,
- value: 4
- }
- }]
- };
-
- chart.setOption(option);
-
-
- </script>
-
-
-
-
-
-
-
-
-
-
-
-
- </body>
-</html>
diff --git a/asset/img/basic-concepts-overview/components.jpg b/asset/img/basic-concepts-overview/components.jpg
index 74fd3f4..8a1aae2 100644
Binary files a/asset/img/basic-concepts-overview/components.jpg and b/asset/img/basic-concepts-overview/components.jpg differ
diff --git a/asset/img/basic-concepts-overview/coord-sys-0.jpg b/asset/img/basic-concepts-overview/coord-sys-0.jpg
new file mode 100644
index 0000000..be9e808
Binary files /dev/null and b/asset/img/basic-concepts-overview/coord-sys-0.jpg differ
diff --git a/asset/img/basic-concepts-overview/coord-sys-1.jpg b/asset/img/basic-concepts-overview/coord-sys-1.jpg
new file mode 100644
index 0000000..9f1ccde
Binary files /dev/null and b/asset/img/basic-concepts-overview/coord-sys-1.jpg differ
diff --git a/asset/img/basic-concepts-overview/coord-sys-2.jpg b/asset/img/basic-concepts-overview/coord-sys-2.jpg
new file mode 100644
index 0000000..d01d249
Binary files /dev/null and b/asset/img/basic-concepts-overview/coord-sys-2.jpg differ
diff --git a/asset/img/basic-concepts-overview/locate.jpg b/asset/img/basic-concepts-overview/locate.jpg
index 4e3af31..0c03d09 100644
Binary files a/asset/img/basic-concepts-overview/locate.jpg and b/asset/img/basic-concepts-overview/locate.jpg differ
diff --git a/asset/img/basic-concepts-overview/multiple-ec-instance.jpg b/asset/img/basic-concepts-overview/multiple-ec-instance.jpg
index d87db8c..912a80f 100644
Binary files a/asset/img/basic-concepts-overview/multiple-ec-instance.jpg and b/asset/img/basic-concepts-overview/multiple-ec-instance.jpg differ
diff --git a/asset/img/basic-concepts-overview/series-all-a.jpg b/asset/img/basic-concepts-overview/series-all-a.jpg
index 65b2810..f76eee7 100644
Binary files a/asset/img/basic-concepts-overview/series-all-a.jpg and b/asset/img/basic-concepts-overview/series-all-a.jpg differ
diff --git a/asset/img/basic-concepts-overview/series-all-b.jpg b/asset/img/basic-concepts-overview/series-all-b.jpg
index fc21a17..bb9b133 100644
Binary files a/asset/img/basic-concepts-overview/series-all-b.jpg and b/asset/img/basic-concepts-overview/series-all-b.jpg differ
diff --git a/zh/tutorial/basic-concepts-overview.md b/zh/tutorial/basic-concepts-overview.md
index bfe1768..cd9d9b2 100644
--- a/zh/tutorial/basic-concepts-overview.md
+++ b/zh/tutorial/basic-concepts-overview.md
@@ -13,11 +13,11 @@
## 系列（series）
-`系列`（`series`）是很常见的名词。在 echarts 里，`系列`（`series`）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 `系列` 包含的要素有：一组数值、图表类型（`series.type`）、以及其他的对于该图的的设定参数。
+`系列`（[series](option.html#series)）是很常见的名词。在 echarts 里，`系列`（[series](option.html#series)）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 `系列` 包含的要素有：一组数值、图表类型（`series.type`）、以及其他的对于该图的的设定参数。
-echarts 里系列类型（`series.type`）就是图表类型。系列类型（`series.type`）至少有：`line`（折线图）、`bar`（柱状图）、`pie`（饼图）、`scatter`（散点图）、`graph`（关系图）、`tree`（树图）、...
+echarts 里系列类型（`series.type`）就是图表类型。系列类型（`series.type`）至少有：[line](option.html#series-line)（折线图）、[bar](option.html#series-bar)（柱状图）、[pie](option.html#series-pie)（饼图）、[scatter](option.html#series-scatter)（散点图）、[graph](option.html#series-graph)（关系图）、[tree](option.html#series-tree)（树图）、...
-如下图，右侧的 `option` 中声明了三个 `系列`（`series`）：`pie`（饼图系列）、`line`（折线图系列）、`bar`（柱状图系列），每个系列中有他所需要的数据（`series.data`）。
+如下图，右侧的 `option` 中声明了三个 `系列`（[series](option.html#series)）：[pie](option.html#series-pie)（饼图系列）、[line](option.html#series-line)（折线图系列）、[bar](option.html#series-bar)（柱状图系列），每个系列中有他所需要的数据（[series.data](option.html#series.data)）。
@@ -28,9 +28,9 @@ echarts 里系列类型（`series.type`）就是图表类型。系列类型（`s
## 组件（component）
-在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：`xAxis`（直角坐标系 X 轴）、`yAxis`（直角坐标系 Y 轴）、`grid`（直角坐标系底板）、`angleAxis`（极坐标系角度轴）、`radiusAxis`（极坐标系半径轴）、`polar`（极坐标系底板）、`geo`（地理坐标系）、`dataZoom`（数据区缩放组件）、`visualMap`（视觉映射组件）、`tooltip`（提示框组件）、`toolbox`（工具栏组件）、`series`（系列）、...
+在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：[xAxis](option.html#xAxis)（直角坐标系 X 轴）、[yAxis](option.html#yAxis)（直角坐标系 Y 轴）、[grid](option.html#grid)（直角坐标系底板）、[angleAxis](option.html#angleAxis)（极坐标系角度轴）、[radiusAxis](option.html#radiusAxis)（极坐标系半径轴）、[polar](option.html#polar)（极坐标系底板）、[geo](option.html#geo)（地理坐标系）、[dataZoom](option.html#dataZoom)（数据区缩放组件）、[visualMap](option.html#visualMap)（视觉映射组件）、[tooltip](option.html#tooltip)（提示框组件）、[toolbox](option.html#toolbox)（工具栏组件）、[series](option.h [...]
-我们注意到，其实系列（`series`）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
+我们注意到，其实系列（[series](option.html#series)）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
如下图，右侧的 `option` 中声明了各个组件（包括系列），各个组件就出现在图中。
@@ -68,9 +68,9 @@ var option = {
// 这里有多个系列，也是构成一个数组。
series: [
// 每个系列，也有 type 描述“子类型”，即“图表类型”。
- {type: 'line', data: [...]},
- {type: 'line', data: [...]},
- {type: 'line', data: [...]}
+ {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
+ {type: 'line', data: [2231, 1234, 552, ... ]},
+ {type: 'line', data: [[4, 51], [8, 12], ... ]}
}]
};
@@ -78,10 +78,44 @@ var option = {
chart.setOption(option);
```
+系列里的 [series.data](option.html#series.data) 是本系列的数据。而另一种描述方式，系列数据从 [dataset](option.html#dataset) 中取：
+
+```js
+var option = {
+ dataset: {
+ source: [
+ [121, 'XX', 442, 43.11],
+ [663, 'ZZ', 311, 91.14],
+ [913, 'ZZ', 312, 92.12],
+ ...
+ ]
+ },
+ xAxis: {},
+ yAxis: {},
+ series: [
+ // 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
+ {type: 'bar', encode: {x: 1, y: 0}},
+ {type: 'bar', encode: {x: 1, y: 2}},
+ {type: 'scatter', encode: {x: 1, y: 3}},
+ ...
+ ]
+};
+```
+
+
## 组件的定位
-不同的组件、系列，常有不同的定位方式。但是往往首先有一种通用的定位方式：基于 `top` / `right` / `down` / `left` / `width` / `height` 的绝对定位。这种绝对定位的方式，类似于 `CSS` 的绝对定位（`position: absolute`）。绝对定位基于的是 echarts 容器 DOM 节点。
+不同的组件、系列，常有不同的定位方式。
+
+<br>
+
+**[类 CSS 的绝对定位]**
+
+<br>
+
+多数组件和系列，都能够基于 `top` / `right` / `down` / `left` / `width` / `height` 绝对定位。
+这种绝对定位的方式，类似于 `CSS` 的绝对定位（`position: absolute`）。绝对定位基于的是 echarts 容器 DOM 节点。
其中，他们每个值都可以是：
+ 绝对数值（例如 `bottom: 54` 表示：距离 echarts 容器底边界 `54` 像素）。
@@ -93,5 +127,43 @@ chart.setOption(option);
我们可以注意到，`left` `right` `width` 是一组（横向）、`top` `bottom` `height` 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 `left` 和 `right` 就可以了，`width` 会被自动算出。
+<br>
+
+**[中心半径定位]**
+
+<br>
+
+少数圆形的组件或系列，可以使用“中心半径定位”，例如，[pie](option.html#series-pie)（饼图）、[sunburst](option.html#series-sunburst)（旭日图）、[polar](option.html#polar)（极坐标系）。
+
+中心半径定位，往往依据 [center](option.html#series-pie.center)（中心）、[radius](option.html#series-pie.radius)（半径）来决定位置。
+
+<br>
+
+**[其他定位]**
+
+<br>
+
+少数组件和系列可能有自己的特殊的定位方式。
+
+
+## 坐标系
+
+很多系列，例如 [line](option.html#series-line)（折线图）、[bar](option.html#series-bar)（柱状图）、[scatter](option.html#series-scatter)（散点图）、[heatmap](option.html#series-heatmap)（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 echarts 中至少支持这些坐标系：[直角坐标系](option.html#grid)、[极坐标系](option.html#polar)、[地理坐标系（GEO）](option.html#geo)、[日历坐标系](option.html#calendar) 等。其他一些系列，例如 [pie](option.html#series-pie)（饼图）、[tree](option.html#series-tree)（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 [graph](option.html#series-graph)（关系图）等，既能独立存在 [...]
+
+一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 [xAxis](option.html#xAxis)（直角坐标系 X 轴）、[yAxis](option.html#yAxis)（直角坐标系 Y 轴）、[grid](option.html#grid)（直角坐标系底板）三种组件。`xAxis`、`yAxis` 被 `grid` 自动引用并组织起来，共同工作。
+
+我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 `xAxis`、`yAxis` 和一个 `scatter`（散点图系列），echarts 暗自为他们创建了 `grid` 并关联起他们：
+
+
+
+再来看下图，两个 `yAxis`，共享了一个 `xAxis`。两个 `series`，也共享了这个 `xAxis`，但是分别使用不同的 `yAxis`，使用 [yAxisIndex](option.html#series-line.yAxisIndex) 来指定它自己使用的是哪个 `yAxis`：
+
+
+
+再来看下图，一个 echarts 实例中，有多个 `grid`，每个 `grid` 分别有 `xAxis`、`yAxis`，他们使用 `xAxisIndex`、`yAxisIndex`、`gridIndex` 来指定引用关系：
+
+
+
+另外，一个系列，往往能运行在不同的坐标系中。例如，一个 [scatter](option.html#series-scatter)（散点图）能运行在 [直角坐标系](option.html#grid)、[极坐标系](option.html#polar) 、[地理坐标系（GEO）](option.html#geo) 等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，[直角坐标系](option.html#grid) 里承载了 [line](option.html#series-line)（折线图）、[bar](option.html#series-bar)（柱状图）等等。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org