ECharts配置語法
# ECharts 配置語法
本章節我們將為大家介紹使用 ECharts 產生圖表的一些配置。
# 1. 建立HTML頁面
建立一個 HTML 頁面，引入echarts.min.js。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 檔案 -->
<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
</head>
</html>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 2. 為 ECharts 準備一個具備高寬的 DOM 容器
在上面的</head>標籤後面增加以下部分。
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
1
2
3
4
2
3
4
然後就可以通過echarts.init方法初始化一個 echarts 實體並通過 setOption 方法產生一個簡單的柱狀圖，下面是完整程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
這樣你的第一個圖表就誕生了！
https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started (opens new window)
# 3. 配置資訊說明
在上面的示例成功后，我們回過頭來看一下配置的部分，其中以var option開頭的部分就是圖表設定選項的編寫部分。我們重點來關注一下這部分的結構。這部分的內容是以json規格化設定的，主要目錄結構參考下方的註釋說明。
var option = {
//標題：為圖表配置標題
title: {
text: '第一個 ECharts 實體'
},
//提示資訊
tooltip: {},
/*****
圖例元件展現了不同系列的標記(symbol)，
顏色和名字。可以通過點選圖例控制哪些系列不顯示。
******/
legend: {
//數據源欄位名稱
data:['銷量']
},
//配置要在 X 軸顯示的項
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
//配置要在 Y 軸顯示的項
yAxis: {},
//每個系列通過 type 決定自己的圖表型別
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
每個系列通過 type 決定自己的圖表型別：
type: 'bar'：柱狀/條形圖type: 'line'：折線/面積圖type: 'pie'：餅圖type: 'scatter'：散點（氣泡）圖type: 'effectScatter'：帶有漣漪特效動畫的散點（氣泡）type: 'radar'：雷達圖type: 'tree'：樹型圖type: 'treemap'：樹型圖type: 'sunburst'：旭日圖type: 'boxplot'：箱形圖type: 'candlestick'：K線圖type: 'heatmap'：熱力圖type: 'map'：地圖type: 'parallel'：平行座標系的系列type: 'lines'：線圖type: 'graph'：關係圖type: 'sankey'：桑基圖type: 'funnel'：漏斗圖type: 'gauge'：儀表盤type: 'pictorialBar'：象形柱圖type: 'themeRiver'：主題河流type: 'custom'：自定義系列