本文介绍了一个使用ECharts绘制柱状图和折线图的具体实例，包括图表的基本配置、数据展示及事件绑定等关键步骤。
|
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时，会阻止数据合并，这行代码上面。
-----------------------------------------------------------------------------------------------------------------------------------------------
如下：
扫一扫
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
