| 使用echarts绘制统计分析图表（动态从后台获取数据） | 您所在的位置：网站首页 › 统计做图 › 使用echarts绘制统计分析图表（动态从后台获取数据） |
使用echarts绘制统计分析图表（动态从后台获取数据）
|
说明：实际项目中的统计分析模块不仅需要数据以表格的方式显示，还需要用图形化的方式进一步渲染，以提升数据的可观性，以下是使用echarts来进行绘制统计分析图表的案例： 文章目录 一。第一个静态echarts示例二。动态echarts示例（从后台获取数据） 一。第一个静态echarts示例1.echarts的使用教程在官方网站上有详细说明：echarts官网 如下图所示： 5.打开index.html页面，页面效果如图所示： 7.数据可以根据你的需求进行修改，效果图如下： 说明：在echarts中各个类型数据的显示都需要不同数据来进行传入，我们需要在后台封装好我们所需要显示的数据，再利用ajax去进行调用，获得相应的图表数据。简单来说，每种echarts示例类型所需要的数据都是不尽相同的，echarts需要什么数据我们就把数据封装成什么样子，然后再去给echarts使用，从而达到页面图表渲染的效果。 1.控制器端代码如下所示： /** * 工地预警类型统计 */ @RequestMapping("/cList") @ResponseBody public Object cList(@RequestParam(required = false) String beginTime, @RequestParam(required = false) String endTime){ ArrayList constructionIdList=new ArrayList(); //初始化工地名称集合 ArrayList constructionNameList=new ArrayList(); //初始化告警类型为安全帽类型集合 ArrayList safetyHatTypeList=new ArrayList(); //初始化告警类型为工作服类型集合 ArrayList coverallTypeList=new ArrayList(); //初始化告警类型为安全带类型集合 ArrayList safetyBeltTypeList=new ArrayList(); //初始化告警类型为越界告警类型集合 ArrayList crossBoundaryTypeList=new ArrayList(); //得到所有告警工地id list constructionIdList=dataStatisticsService.getConstructionId(); //初始化告警类型vo集合 ArrayList alarmTypeVoList=new ArrayList(); //便利所有告警工地id for(Integer id:constructionIdList){ //初始化告警类型vo类 AlarmTypeVo alarmTypeVo=new AlarmTypeVo(); alarmTypeVo.setBeginTime(beginTime); alarmTypeVo.setEndTime(endTime); //根据告警工地id得到告警工地名称 String conStructionName=dataStatisticsService.getConstructionNameByConstructionId(id); //加入告警工地名称list中 constructionNameList.add(conStructionName); alarmTypeVo.setConstructionSite(conStructionName); //根据工地id查询告警类型为0（安全帽）的总数 int safetyHatCount=dataStatisticsService.getCameraTypeNumber(id,0,beginTime,endTime); //加入告警类型为0（安全帽）List中 safetyHatTypeList.add(safetyHatCount); alarmTypeVo.setSafetyHatCount(safetyHatCount); //根据工地id查询告警类型为1（工作服）的总数 int coverallCount=dataStatisticsService.getCameraTypeNumber(id,1,beginTime,endTime); //加入告警类型为0（安全帽）List中 coverallTypeList.add(coverallCount); alarmTypeVo.setCoverallCount(coverallCount); //根据工地id查询告警类型为2（安全带）的总数 int safetyBeltCount=dataStatisticsService.getCameraTypeNumber(id,2,beginTime,endTime); //加入告警类型为0（安全帽）List中 safetyBeltTypeList.add(safetyBeltCount); alarmTypeVo.setSafetyBeltCount(safetyBeltCount); //根据工地id查询告警类型为3（越界施工）的总数 int crossBoundaryCount=dataStatisticsService.getCameraTypeNumber(id,3,beginTime,endTime); //加入告警类型为0（安全帽）List中 crossBoundaryTypeList.add(crossBoundaryCount); alarmTypeVo.setCrossBoundaryCount(crossBoundaryCount); //加入list中 alarmTypeVoList.add(alarmTypeVo); } //初始化json对象 JSONObject jsonData=new JSONObject(); //把需要的数据放入json对象中 jsonData.put("alarmTypeVoList",alarmTypeVoList); jsonData.put("constructionNameList",constructionNameList); jsonData.put("safetyHatTypeList",safetyHatTypeList); jsonData.put("coverallTypeList",coverallTypeList); jsonData.put("safetyBeltTypeList",safetyBeltTypeList); jsonData.put("crossBoundaryTypeList",crossBoundaryTypeList); //返回json对象 return jsonData; }2.前台html页面代码如下： // An highlighted block @layout("/common/_container.html"){ 工地预警数据统计 开始时间 结束时间 工地地址 安全帽 工作服 安全带 越界施工 //时间选择控件 laydate.render({ elem: '#beginTime' }); laydate.render({ elem: '#endTime' }); //从后台获取图表所需要的json数据 function dataJson(a){ var data=[]; $.ajax({ type : "post", async : false, //同步执行 url : Feng.ctxPath +"/dataStatistics/cList", //带入的参数查询条件 data :{beginTime:$("#beginTime").val(),endTime:$("#endTime").val()}, dataType : "json", //返回数据形式为json success : function(result) { switch (a) { //获取工地名称数据 case 0:data=result.constructionNameList;break; //获取告警类型为安全帽数据 case 1:data=result.safetyHatTypeList;break; //获取告警类型为工作服数据 case 2:data=result.coverallTypeList;break; //获取告警类型为安全带数据 case 3:data=result.safetyBeltTypeList;break; //获取告警类型为越界施工数据 case 4:data=result.crossBoundaryTypeList;break; //获取告警类型vo集合 case 5:data=result.alarmTypeVoList;break; } }, error : function(errorMsg) { alert("不好意思,图表请求数据失败啦!"); myChart.hideLoading(); } }) return data; } //条件查询为空时 //定义一个接收工地名称数据的变量 var alarmTypeName=dataJson(0); //定义一个告警类型为安全帽数据的变量 var safetyHat=dataJson(1); //定义一个告警类型为工作服数据的变量 var coverall=dataJson(2); //定义一个告警类型为安全带数据的变量 var safetyBelt=dataJson(3); //定义一个告警类型为越界施工数据的变量 var crossBoundary=dataJson(4); //初始加载加载图表（无条件时查询时） initChart(); //初始化以及加载图表 function initChart() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { //图表颜色变化 //color:['#05DDDF', '#E44F5E','#FFB642','#39DD68','#3261FE'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { /* data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']*/ data: ['安全帽', '工作服', '安全带', '越界施工'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value' }, yAxis: { type: 'category', /* data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']*/ data:alarmTypeName }, series: [ { name: '安全帽', type: 'bar', stack: '总量', label: { show: true, position: 'insideRight' }, data:safetyHat }, { name: '工作服', type: 'bar', stack: '总量', label: { show: true, position: 'insideRight' }, data:coverall }, { name: '安全带', type: 'bar', stack: '总量', label: { show: true, position: 'insideRight' }, data:safetyBelt }, { name: '越界施工', type: 'bar', stack: '总量', label: { show: true, position: 'insideRight' }, data:crossBoundary } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } //获得后台返回的告警类型vo集合 var data = dataJson(5); //初始化表格 function initTable() { $('#table').bootstrapTable({data: data}); } //初始化加载表格（无条件时查询时） initTable(); //点击搜素事件 function search(){ //输入条件查询后重新得到条件查询后的数值 alarmTypeName=dataJson(0); safetyHat=dataJson(1); coverall=dataJson(2); safetyBelt=dataJson(3); crossBoundary=dataJson(4); //带条件之后重新加载图表 initChart(); //输入条件查询后重新得到条件查询后的数值 data = dataJson(5); //bootstrapTable清空表格重新加载 $('#table').bootstrapTable('destroy'); //带条件之后重新加载表格 initTable(); } @}3.页面效果图如下所示： 总结：echarts通过图表的渲染可以让数据变得更加的可视化，在统计分析模块我们只需要在echarts官网上找到我们所需要的图表实例，根据实例中的data来封装我们的数据，得到相应的图表数据。可视化的图表数据能够提高用户的使用体验，使数据变得直观明了，便于用户对数据的统计分析 |
2.这里做一个简单的介绍：首先你需要下载一个echarts官方源码包echarts官方源码包 在其中选择自己所需要下载的版本，如下图所示： 
3.下载完成后解压，echarts.min.js就是我们需要引用的js文件，把它复制到我们需要进行引用的项目路径下，如下图所示： 
4.然后我们在index.html文件中引入该echarts.min.js文件，并在页面定义好显示图表的控件，源代码如下：
6.如果需要实现不同的图表显示功能，在echarts官网上找到对应的实例，更换JavaScript代码块中的option变量就行了，如下图所示： 
4.输入时间条件查询过后，图表数据发生变化，如下图所示： 
【本文地址】
公司简介
联系我们