进入公司第三周,之前的笔记都手写。
今天,再次看一下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!!效果如下: