基于echarts3.0做数据统计和联动
- 格式：docx
- 大小：138.47 KB
- 文档页数：7
让每一名学员高薪就业 www.itsource.cn 基于echarts3.0做数据统计和联动 在实际项目中，经常会做数据统计展示。优秀的框架能事半功倍。可以使用百度开源的echarts框架。目前版本是echarts3.0。可以做散点图，折线图，柱状图，地图，饼图，雷达图，k线图，箱线图，热力图，日力图等等，而且百度一直有在维护，整体上是基于json格式，市场认可度非常高，能满足我们日常开发中需要的各种图形。在官方文档中，有详细的demo和api使用。今天将一个饼图和柱状图结合起来，做一个联动下钻demo演示，并对关键信息做了注释。
1、需求：
饼图展示源码时代2015-2017三年JAVA学科、PHP学科、UI学科、WEB前端、大数据各个学科开班期数统计(数据为虚拟构造)。并做联动下钻功能：点击对应学科，使用柱状图展示当前学科各年度开班期数统计(数据为虚拟构造)。整个数据为json格式，因为主要演示echarts的使用，所以虚拟数据写死在json文件中，使用ajax请求异步加载数据。实际项目开发中，将json数据动态从后台获取即可。
2、图解功能：
饼图展示 联动下钻 让每一名学员高薪就业 www.itsource.cn 以下是代码结构：
代码结构图 每一个文件代码如下： Index.html文件代码： Insert title here $(function() { //饼图主方法 maintEcharts.mainFunction(); }); 让每一名学员高薪就业 www.itsource.cn
main.js文件代码： /** *源码时代各近三年学科总开设期数统计echarts */ maintEcharts = { "mainFunction" : function() { // 指定图表的配置项和数据 // 异步加载数据 $.ajax({ url : "json/main.json", dataType : 'json', success : function(d) { maintEcharts.main(d.data); }, error : function(d) { alert("加载数据失败！"); } }); }, "main" : function(d) { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("mainDiv")); //配置项设置 option = { title : { text : '源码时代各近三年(2015-2017)学科总开设期数统计', subtext : '数据纯属虚构', x : 'center' },//标题项设置 让每一名学员高薪就业 www.itsource.cn tooltip : { trigger : 'item', formatter : "{a} {b} : {c} ({d}%)"//提示内容格式化 },//提示框组件:鼠标放上去显示内容 legend : { orient : 'vertical', left : 'left', data : [ 'JAVA学科', 'PHP学科', 'UI学科', 'WEB前端', '大数据' ] },//图例组件 series : [ { name : '总开设期数', type : 'pie',//类型 饼图 radius : '55%',//饼图的半径 center : [ '50%', '60%' ],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标 data : d,//系列中的数据内容数组 itemStyle : { emphasis : { shadowBlur : 10, shadowOffsetX : 0, shadowColor : 'rgba(0, 0, 0, 0.5)' }//图形样式 高亮状态下的样式 } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //绑定点击事件 myChart.on('click', function(params) { //被点击的对象 params.name被点击的名字，通过这个去做唯一匹配 itemEcharts.itemFunction(params.name) }); } }
item.js文件代码： /** *绘制点击学科的年份和开班期数的柱状图 */ itemEcharts = { 让每一名学员高薪就业 www.itsource.cn "itemFunction" : function(n) { //异步加载数据 $.ajax({ url : "json/item.json", dataType : 'json', success : function(data) { var d = data.data; $.each(d, function(index, p) { //获取点击事件的数据 if (n == p.name) { itemEcharts.item(p.sdata,p.xdata, n); } }) }, error : function(data) { alert("加载数据失败！"); } }); }, "item" : function(seriesArr, dataArr, n) { //获取div，并初始化echarts对象 var myItem = echarts.init(document.getElementById("itemDiv")); //配置项设置 option = { color : [ '#3398DB' ], tooltip : { trigger : 'axis', axisPointer : { type : 'shadow' } }, grid : { left : '10%',//组件离容器左侧的距离 right : '12%', bottom : '3%', containLabel : true//区域是否包含坐标轴的刻度标签。 }, xAxis : [ { type : 'category',//坐标轴类型 类目轴 name : '开课年份',//x坐标轴名称 data : dataArr,//数据，数组 axisTick : { alignWithLabel : true 让每一名学员高薪就业 www.itsource.cn } } ], yAxis : [ { type : 'value',// 坐标轴类型 类目轴 name : n+' 开课期数'//y坐标轴名称 } ], series : [ { name : n,//名称 type : 'bar',//显示类型 barWidth : '50%',//轴占的宽度比例 data : seriesArr//数据，数组 } ] }; //给echarts对象设置选择对象 myItem.setOption(option); }
}
main.json文件代码： {"data":[ { "value":"68", "name":"JAVA学科" }, { "value":"58", "name":"PHP学科" }, { "value":"56", "name":"UI学科" }, { "value":"56", "name":"WEB前端" }, { "value":"34", "name":"大数据"
