|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<!DOCTYPE html>
<head>
<meta charset=
"utf-8"
>
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id=
"barMain"
style=
"height:400px"
></div>
<div id=
"lineMain"
style=
"height:400px"
></div>
<!-- ECharts單文件引入 -->
<script src=
"http://echarts.baidu.com/build/dist/echarts.js"
></script>
<script type=
"text/javascript"
>
// 路徑配置
require.config({
paths: {
echarts:
'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts'
,
'echarts/chart/bar'
,
'echarts/chart/line'
],
drawEcharts
);
function
drawEcharts(ec){
drawBar(ec);
drawLine(ec);
}
function
drawBar(ec){
var
myBarChart = ec.init(document.getElementById(
'barMain'
));
var
option = {
tooltip: {
show:
true
},
legend: {
data:[
'銷量'
]
},
xAxis : [
{
type :
'category'
,
data : [
"襯衫"
,
"羊毛衫"
,
"雪紡衫"
,
"褲子"
,
"高跟鞋"
,
"襪子"
]
}
],
yAxis : [
{
type :
'value'
}
],
series : [
{
"name"
:
"銷量"
,
"type"
:
"bar"
,
"data"
:[5, 20, 40, 10, 10, 20]
}
]
};
myBarChart.setOption(option,
true
);
//當setOption第二個參數為true時，會阻止數據合並
}
function
drawLine(ec){
var
myLineChart = ec.init(document.getElementById(
'lineMain'
));
var
option2 = {
title : {
text:
'未來一周氣溫變化'
,
subtext:
'純屬虛構'
},
tooltip : {
trigger:
'axis'
},
legend: {
data:[
'最高氣溫'
,
'最低氣溫'
]
},
toolbox: {
show :
true
,
feature : {
mark : {show:
true
},
dataView : {show:
true
, readOnly:
false
},
magicType : {show:
true
, type: [
'line'
,
'bar'
]},
restore : {show:
true
},
saveAsImage : {show:
true
}
}
},
calculable :
true
,
xAxis : [
{
type :
'category'
,
boundaryGap :
false
,
data : [
'周一'
,
'周二'
,
'周三'
,
'周四'
,
'周五'
,
'周六'
,
'周日'
]
}
],
yAxis : [
{
type :
'value'
,
axisLabel : {
formatter:
'{value} °C'
}
}
],
series : [
{
name:
'最高氣溫'
,
type:
'line'
,
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
data : [
{type :
'max'
, name:
'最大值'
},
{type :
'min'
, name:
'最小值'
}
]
},
markLine : {
data : [
{type :
'average'
, name:
'平均值'
}
]
}
},
{
name:
'最低氣溫'
,
type:
'line'
,
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name :
'周最低'
, value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type :
'average'
, name :
'平均值'
}
]
}
}
]
};
myLineChart.setOption(option2,
true
);
}
</script>
</body>
|
補充：給圖表綁定事件（以上面柱狀圖為例，綁定click事件）
|
1
2
3
4
5
6
|
/* 給柱狀圖綁定click事件 */
var
ecConfig = require(
'echarts/config'
);
function
eConsole(param) {
alert(param.value);
// 彈出當前柱子的數值
}
myBarChart.on(ecConfig.EVENT.CLICK, eConsole);
|
這段代碼加在 myBarChart.setOption(option,true); //當setOption第二個參數為true時，會阻止數據合並，這行代碼上面。
-----------------------------------------------------------------------------------------------------------------------------------------------
如下：
