拓冰网站定制 
第11章 图形报表、POI报表1. 套餐预约占比饼形图1.1 需求分析会员可以通过移动端自助进行体检预约在预约时需要选择预约的体检套餐。本章节我们需要通过饼形图直观的展示出会员预约的各个套餐占比情况。展示效果如下图1.2 完善页面套餐预约占比饼形图对应的页面为/pages/report_setmeal.html。1.2.1 导入ECharts库script src../plugins/echarts/echarts.js/script1.2.2 参照官方实例导入饼形图div classbox !-- 为 ECharts 准备一个具备大小宽高的 DOM -- div idchart1 styleheight:600px;/div /divscript typetext/javascript // 基于准备好的dom初始化echarts实例 var myChart1 echarts.init(document.getElementById(chart1)); //发送ajax请求获取动态数据 axios.get(/report/getSetmealReport.do).then((res){ myChart1.setOption({ title : { text: 套餐预约占比, subtext: , x:center }, tooltip : {//提示框组件 trigger: item,//触发类型在饼形图中为item formatter: {a} br/{b} : {c} ({d}%)//提示内容格式 }, legend: { orient: vertical, left: left, data: res.data.data.setmealNames }, series : [ { name: 套餐预约占比, type: pie, radius : 55%, center: [50%, 60%], data:res.data.data.setmealCount, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } } } ] }); }); /script根据饼形图对数据格式的要求我们发送ajax请求服务端需要返回如下格式的数据{ data:{ setmealNames:[套餐1,套餐2,套餐3], setmealCount:[ {name:套餐1,value:10}, {name:套餐2,value:30}, {name:套餐3,value:25} ] }, flag:true, message:获取套餐统计数据成功 }1.3 后台代码1.3.1 Controller在health_backend工程的ReportController中提供getSetmealReport方法Reference private SetmealService setmealService; /** * 套餐占比统计 * return */ RequestMapping(/getSetmealReport.do) public Result getSetmealReport(){ ListMapString, Object list setmealService.findSetmealCount(); MapString,Object map new HashMap(); map.put(setmealCount,list); ListString setmealNames new ArrayList(); for(MapString,Object m : list){ String name (String) m.get(name); setmealNames.add(name); } map.put(setmealNames,setmealNames); return new Result(true, MessageConstant.GET_SETMEAL_COUNT_REPORT_SUCCESS,map); }1.3.2 服务接口在SetmealService服务接口中扩展方法findSetmealCountpublic ListMapString,Object findSetmealCount();1.3.3 服务实现类在SetmealServiceImpl服务实现类中实现findSetmealCount方法public ListMapString, Object findSetmealCount() { return setmealDao.findSetmealCount(); }1.3.4 Dao接口在SetmealDao接口中扩展方法findSetmealCountpublic ListMapString,Object findSetmealCount();1.3.5 Mapper映射文件在SetmealDao.xml映射文件中提供SQL语句select idfindSetmealCount resultTypemap select s.name,count(o.id) as value from t_order o ,t_setmeal s where o.setmeal_id s.id group by s.name /select 第11章：数据统计与分析-01-套餐预约占比饼形图（全）
第11章 图形报表、POI报表1. 套餐预约占比饼形图1.1 需求分析会员可以通过移动端自助进行体检预约在预约时需要选择预约的体检套餐。本章节我们需要通过饼形图直观的展示出会员预约的各个套餐占比情况。展示效果如下图1.2 完善页面套餐预约占比饼形图对应的页面为/pages/report_setmeal.html。1.2.1 导入ECharts库script src../plugins/echarts/echarts.js/script1.2.2 参照官方实例导入饼形图div classbox !-- 为 ECharts 准备一个具备大小宽高的 DOM -- div idchart1 styleheight:600px;/div /divscript typetext/javascript // 基于准备好的dom初始化echarts实例 var myChart1 echarts.init(document.getElementById(chart1)); //发送ajax请求获取动态数据 axios.get(/report/getSetmealReport.do).then((res){ myChart1.setOption({ title : { text: 套餐预约占比, subtext: , x:center }, tooltip : {//提示框组件 trigger: item,//触发类型在饼形图中为item formatter: {a} br/{b} : {c} ({d}%)//提示内容格式 }, legend: { orient: vertical, left: left, data: res.data.data.setmealNames }, series : [ { name: 套餐预约占比, type: pie, radius : 55%, center: [50%, 60%], data:res.data.data.setmealCount, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } } } ] }); }); /script根据饼形图对数据格式的要求我们发送ajax请求服务端需要返回如下格式的数据{ data:{ setmealNames:[套餐1,套餐2,套餐3], setmealCount:[ {name:套餐1,value:10}, {name:套餐2,value:30}, {name:套餐3,value:25} ] }, flag:true, message:获取套餐统计数据成功 }1.3 后台代码1.3.1 Controller在health_backend工程的ReportController中提供getSetmealReport方法Reference private SetmealService setmealService; /** * 套餐占比统计 * return */ RequestMapping(/getSetmealReport.do) public Result getSetmealReport(){ ListMapString, Object list setmealService.findSetmealCount(); MapString,Object map new HashMap(); map.put(setmealCount,list); ListString setmealNames new ArrayList(); for(MapString,Object m : list){ String name (String) m.get(name); setmealNames.add(name); } map.put(setmealNames,setmealNames); return new Result(true, MessageConstant.GET_SETMEAL_COUNT_REPORT_SUCCESS,map); }1.3.2 服务接口在SetmealService服务接口中扩展方法findSetmealCountpublic ListMapString,Object findSetmealCount();1.3.3 服务实现类在SetmealServiceImpl服务实现类中实现findSetmealCount方法public ListMapString, Object findSetmealCount() { return setmealDao.findSetmealCount(); }1.3.4 Dao接口在SetmealDao接口中扩展方法findSetmealCountpublic ListMapString,Object findSetmealCount();1.3.5 Mapper映射文件在SetmealDao.xml映射文件中提供SQL语句select idfindSetmealCount resultTypemap select s.name,count(o.id) as value from t_order o ,t_setmeal s where o.setmeal_id s.id group by s.name /select