Echart 2

alan9uo

浏览: 47393 次
性别:
来自: 深圳

最近访客更多访客>>

xyzopq100

Robert666

aitouchy

icedcoco

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Echart 2

Echart2 模块化引入

进入公司第三周，之前的笔记都手写。

今天，再次看一下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!!效果如下：