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