进入公司第三周，之前的笔记都手写。
今天，再次看一下Echart2，再次复习一下如何使用Echart（模块导入）。
IDE：Elipse
1.准备工作：下载EChart2的相关文件（哈？随便你放哪，你找得到就好）：
地址：http://echarts.baidu.com/build/echarts-2.2.7.zip *直接复制到浏览器或者下载工具会自动下载咯。
如果地址不行，那么登陆EChart2 官网：http://echarts.baidu.com/echarts2/
然后下载。*注意本文是EChart2，而不是3.所以下载的时候需要注意咯
2.下载完成是一个压缩包，打开结构如下：
进入根文件夹----->
3.按照官方doc的说明，我们大致需要的是
1）build下面的dist文件夹
2）dist下面的echarts.js文件
我们需要把这2个文件复制到你项目存放js的地方。
所以此时Eclipse--WebContent结构如下：
*js文件夹就是存放js文件的地方。EChart是我存放html文件的地方。
*以上，文件部分完毕，下面可以写代码了。
4.新建一个HTML页面。大致如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试模块化引入EChart</title> </head> <body> </body> </html>
5.创建一个div来装入图表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试模块化引入EChart</title> </head> <body> <div id="main" style="width: 600px; height: 400px;"></div> </body> </html>
6.引入相关js文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模块化引入EChart</title> <script src="../js/echarts.js"></script> <script src="../js/jquery-1.8.3.min.js"></script> </head> <body> <div id="main" style="width: 600px; height: 400px;"></div> </body> </html>
7.写js代码，这里使用了jQuery。$(function (){ .... }); 就是jQuery的预加载，所以，我们就可以把js代码写在html的头上啦。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模块化引入EChart</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>
8.引入主文件：dist。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模块化引入EChart</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
/* 在主文件引入后你将获得一个AMD环境，配置require.conifg如下： */
require.config({
paths : {
echarts : '../js/dist'
}
});
});
</script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>
9.可以动态加载需要的表格了。（嗯？什么意思？其实我也不大懂。大概就是你需要bar(柱状)，那么你就可以再require里面加入'echarts/chart/bar'，然后，你就能获得需要的图表的js啦！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模块化引入EChart</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
/* 在主文件引入后你将获得一个AMD环境，配置require.conifg如下： */
require.config({
paths : {
echarts : '../js/dist'
}
});
/* require.config配置后就可以通过动态加载使用echarts */
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
]
);
});
</script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>
10.然后写表格部分咯！直接都放在function里面。（我直接从官网复制了一个例子下来）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>柱状图转换为饼状图</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
/* 在主文件引入后你将获得一个AMD环境，配置require.conifg如下： */
require.config({
paths : {
echarts : '../js/dist'
}
});
/* require.config配置后就可以通过动态加载使用echarts */
require([
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar',
'echarts/chart/pie'
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text : '某站点用户访问来源',
subtext : '纯属虚构',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'pie', 'funnel' ],
option : {
funnel : {
x : '25%',
width : '50%',
funnelAlign : 'left',
max : 1548
}
}
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
series : [ {
name : '访问来源',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data : [ {
value : 335,
name : '直接访问'
}, {
value : 310,
name : '邮件营销'
}, {
value : 234,
name : '联盟广告'
}, {
value : 135,
name : '视频广告'
}, {
value : 1548,
name : '搜索引擎'
} ]
} ]
}
myChart.setOption(option);
})
});
</script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>
11.Done!!效果如下：
