1.在ECharts官网，下载ECharts的源码和示例文件。
2.解压缩下载下来的Echars压缩包，找到doc\example\www\echartsjs目录，将里面的js文件全部取出来，放到项目js目录文件夹下。
3.在页面的顶端引入模块加载器esl.js。
|
1
|
<script src=
"js/esl.js"
></script>
|
4.为ECharts准备一个具备大小的Dom。
|
1
|
<div id=
"chartArea"
style=
"height:500px;border:1px solid #ccc;padding:10px;"
></div>
|
5.为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径。
|
1
2
3
4
5
6
7
|
require.config({
paths:{
echarts:
'./js/echarts'
,
'echarts/chart/bar'
:
'./js/echarts'
,
'echarts/chart/line'
:
'./js/echarts'
}
});
|
6.动态加载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
|
require(
[
'echarts'
,
'echarts/chart/bar'
,
'echarts/chart/line'
],
function
(ec) {
var
myChart = ec.init(document.getElementById(
'main'
));
var
option = {
tooltip : {
trigger:
'axis'
},
legend: {
data:[
'蒸发量'
,
'降水量'
]
},
toolbox: {
show :
true
,
feature : {
mark :
true
,
dataView : {readOnly:
false
},
magicType:[
'line'
,
'bar'
],
restore :
true
,
saveAsImage :
true
}
},
calculable :
true
,
xAxis : [
{
type :
'category'
,
data : [
'1月'
,
'2月'
,
'3月'
,
'4月'
,
'5月'
,
'6月'
,
'7月'
,
'8月'
,
'9月'
,
'10月'
,
'11月'
,
'12月'
]
}
],
yAxis : [
{
type :
'value'
,
splitArea : {show :
true
}
}
],
series : [
{
name:
'蒸发量'
,
type:
'bar'
,
data:[
2.0
,
4.9
,
7.0
,
23.2
,
25.6
,
76.7
,
135.6
,
162.2
,
32.6
,
20.0
,
6.4
,
3.3
]
},
{
name:
'降水量'
,
type:
'bar'
,
data:[
2.6
,
5.9
,
9.0
,
26.4
,
28.7
,
70.7
,
175.6
,
182.2
,
48.7
,
18.8
,
6.0
,
2.3
]
}
]
};
myChart.setOption(option);
}
);
|
7.效果图
8.注意事项
在实际项目中，ECharts图标的横坐标和纵坐标，均是在后台返回的数据中的得到的。在前端动态设置data数值时，data的类型必须是数组，EChars才能展现出图标的效果来。
本文转自 genuinecx 51CTO博客，原文链接：http://blog.51cto.com/favccxx/1294417，如需转载请自行联系原作者
