2. 图形报表ECharts2.1 ECharts简介ECharts缩写来自Enterprise Charts商业级数据图表是百度的一个开源的使用JavaScript实现的数据可视化工具可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖轻量级的矢量图形库 ZRender提供直观、交互丰富、可高度个性化定制的数据可视化图表。官网https://echarts.apache.org/zh/index.html下载地址https://echarts.apache.org/zh/download.html下载完成可以得到如下文件解压上面的zip文件我们只需要将dist目录下的echarts.js文件引入到页面上就可以使用了2.2 5分钟上手ECharts我们可以参考官方提供的5分钟上手ECharts文档感受一下ECharts的使用方式地址如下https://echarts.apache.org/handbook/zh/get-started/第一步创建html页面并引入echarts.js文件!DOCTYPE html html head meta charsetutf-8 !-- 引入 ECharts 文件 -- script srcecharts.js/script /head /html第二步在页面中准备一个具备宽高的DOM容器。body !-- 为 ECharts 准备一个具备大小宽高的 DOM -- div idmain stylewidth: 600px;height:400px;/div /body第三步通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个简单的柱状图script typetext/javascript // 基于准备好的dom初始化echarts实例 var myChart echarts.init(document.getElementById(main)); // 指定图表的配置项和数据 var option { title: { text: ECharts 入门示例 }, tooltip: {}, legend: { data:[销量] }, xAxis: { data: [衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子] }, yAxis: {}, series: [{ name: 销量, type: bar, data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); /script效果如下2.3 查看ECharts官方实例ECharts提供了很多官方实例我们可以通过这些官方实例来查看展示效果和使用方法。官方实例地址https://echarts.apache.org/examples/zh/index.html可以点击具体的一个图形会跳转到编辑页面编辑页面左侧展示源码js部分源码右侧展示图表效果如下要查看完整代码可以点击右下角的Download按钮将完整页面下载到本地。通过官方案例我们可以发现使用ECharts展示图表效果关键点在于确定此图表所需的数据格式然后按照此数据格式提供数据就可以了我们无须关注效果是如何渲染出来的。在实际应用中我们要展示的数据往往存储在数据库中所以我们可以发送ajax请求获取数据库中的数据并转为图表所需的数据即可。3. 会员数量折线图3.1 需求分析会员信息是体检机构的核心数据其会员数量和增长数量可以反映出机构的部分运营情况。通过折线图可以直观的反映出会员数量的增长趋势。本章节我们需要展示过去一年时间内每个月的会员总数据量。展示效果如下图3.2 完善页面会员数量折线图对应的页面为/pages/report_member.html。3.2.1 导入ECharts库第一步将echarts.js文件复制到health_backend工程的plugins目录下第二步在report_member.html页面引入echarts.js文件script src../plugins/echarts/echarts.js/script3.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/getMemberReport.do).then((res){ myChart1.setOption( { title: { text: 会员数量 }, tooltip: {}, legend: { data:[会员数量] }, xAxis: { data: res.data.data.months }, yAxis: { type:value }, series: [{ name: 会员数量, type: line, data: res.data.data.memberCount }] }); }); /script根据折线图对数据格式的要求我们发送ajax请求服务端需要返回如下格式的数据{ data:{ months:[2019.01,2019.02,2019.03,2019.04], memberCount:[3,4,8,10] }, flag:true, message:获取会员统计数据成功 }3.3 后台代码3.3.1 Controller在health_backend工程中创建ReportController并提供getMemberReport方法package com.liusp.controller; import com.alibaba.dubbo.config.annotation.Reference; import com.liusp.constant.MessageConstant; import com.liusp.entity.Result; import com.liusp.service.MemberService; import org.apache.poi.xssf.usermodel.XSSFRow; import org.apache.poi.xssf.usermodel.XSSFSheet; import org.apache.poi.xssf.usermodel.XSSFWorkbook; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.math.BigDecimal; import java.text.SimpleDateFormat; import java.util.*; /** * 统计报表 */ RestController RequestMapping(/report) public class ReportController { Reference private MemberService memberService; /** * 会员数量统计 * return */ RequestMapping(/getMemberReport.do) public Result getMemberReport(){ //获得日历对象 Calendar calendar Calendar.getInstance(); calendar.add(Calendar.MONTH,-12);//获得当前日期之前12个月的日期 ListString list new ArrayList(); for(int i0;i12;i){ calendar.add(Calendar.MONTH,1); list.add(new SimpleDateFormat(yyyy.MM).format(calendar.getTime())); } MapString,Object map new HashMap(); map.put(months,list); ListInteger memberCount memberService.findMemberCountByMonth(list); map.put(memberCount,memberCount); return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map); } }3.3.2 服务接口在MemberService服务接口中扩展方法findMemberCountByMonthpublic ListInteger findMemberCountByMonth(ListString month);3.2.3 服务实现类在MemberServiceImpl服务实现类中实现findMemberCountByMonth方法//根据月份统计会员数量 public ListInteger findMemberCountByMonth(ListString month) { ListInteger list new ArrayList(); for(String m : month){ m m .31;//格式2019.04.31 Integer count memberDao.findMemberCountBeforeDate(m); list.add(count); } return list; }3.3.4 Dao接口在MemberDao接口中扩展方法findMemberCountBeforeDatepublic Integer findMemberCountBeforeDate(String date);3.3.5 Mapper映射文件在MemberDao.xml映射文件中提供SQL语句!--根据日期统计会员数统计指定日期之前的会员数。lt;是号转义字符-- select idfindMemberCountBeforeDate parameterTypestring resultTypeint select count(id) from t_member where regTime lt; #{value} /select修改main.html 左侧导航点击会员数量统计跳转到我们的report_member.html页面{ path: 5, //菜单项所对应的路由路径 title: 统计分析, //菜单项名称 icon:fa-heartbeat, children:[//是否有子菜单若没有则为[] { path: /5-1, title: 会员数量统计, linkUrl:report_member.html, children:[] } ] }
2. 图形报表ECharts2.1 ECharts简介ECharts缩写来自Enterprise Charts商业级数据图表是百度的一个开源的使用JavaScript实现的数据可视化工具可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖轻量级的矢量图形库 ZRender提供直观、交互丰富、可高度个性化定制的数据可视化图表。官网https://echarts.apache.org/zh/index.html下载地址https://echarts.apache.org/zh/download.html下载完成可以得到如下文件解压上面的zip文件我们只需要将dist目录下的echarts.js文件引入到页面上就可以使用了2.2 5分钟上手ECharts我们可以参考官方提供的5分钟上手ECharts文档感受一下ECharts的使用方式地址如下https://echarts.apache.org/handbook/zh/get-started/第一步创建html页面并引入echarts.js文件!DOCTYPE html html head meta charsetutf-8 !-- 引入 ECharts 文件 -- script srcecharts.js/script /head /html第二步在页面中准备一个具备宽高的DOM容器。body !-- 为 ECharts 准备一个具备大小宽高的 DOM -- div idmain stylewidth: 600px;height:400px;/div /body第三步通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个简单的柱状图script typetext/javascript // 基于准备好的dom初始化echarts实例 var myChart echarts.init(document.getElementById(main)); // 指定图表的配置项和数据 var option { title: { text: ECharts 入门示例 }, tooltip: {}, legend: { data:[销量] }, xAxis: { data: [衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子] }, yAxis: {}, series: [{ name: 销量, type: bar, data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); /script效果如下2.3 查看ECharts官方实例ECharts提供了很多官方实例我们可以通过这些官方实例来查看展示效果和使用方法。官方实例地址https://echarts.apache.org/examples/zh/index.html可以点击具体的一个图形会跳转到编辑页面编辑页面左侧展示源码js部分源码右侧展示图表效果如下要查看完整代码可以点击右下角的Download按钮将完整页面下载到本地。通过官方案例我们可以发现使用ECharts展示图表效果关键点在于确定此图表所需的数据格式然后按照此数据格式提供数据就可以了我们无须关注效果是如何渲染出来的。在实际应用中我们要展示的数据往往存储在数据库中所以我们可以发送ajax请求获取数据库中的数据并转为图表所需的数据即可。3. 会员数量折线图3.1 需求分析会员信息是体检机构的核心数据其会员数量和增长数量可以反映出机构的部分运营情况。通过折线图可以直观的反映出会员数量的增长趋势。本章节我们需要展示过去一年时间内每个月的会员总数据量。展示效果如下图3.2 完善页面会员数量折线图对应的页面为/pages/report_member.html。3.2.1 导入ECharts库第一步将echarts.js文件复制到health_backend工程的plugins目录下第二步在report_member.html页面引入echarts.js文件script src../plugins/echarts/echarts.js/script3.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/getMemberReport.do).then((res){ myChart1.setOption( { title: { text: 会员数量 }, tooltip: {}, legend: { data:[会员数量] }, xAxis: { data: res.data.data.months }, yAxis: { type:value }, series: [{ name: 会员数量, type: line, data: res.data.data.memberCount }] }); }); /script根据折线图对数据格式的要求我们发送ajax请求服务端需要返回如下格式的数据{ data:{ months:[2019.01,2019.02,2019.03,2019.04], memberCount:[3,4,8,10] }, flag:true, message:获取会员统计数据成功 }3.3 后台代码3.3.1 Controller在health_backend工程中创建ReportController并提供getMemberReport方法package com.liusp.controller; import com.alibaba.dubbo.config.annotation.Reference; import com.liusp.constant.MessageConstant; import com.liusp.entity.Result; import com.liusp.service.MemberService; import org.apache.poi.xssf.usermodel.XSSFRow; import org.apache.poi.xssf.usermodel.XSSFSheet; import org.apache.poi.xssf.usermodel.XSSFWorkbook; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.math.BigDecimal; import java.text.SimpleDateFormat; import java.util.*; /** * 统计报表 */ RestController RequestMapping(/report) public class ReportController { Reference private MemberService memberService; /** * 会员数量统计 * return */ RequestMapping(/getMemberReport.do) public Result getMemberReport(){ //获得日历对象 Calendar calendar Calendar.getInstance(); calendar.add(Calendar.MONTH,-12);//获得当前日期之前12个月的日期 ListString list new ArrayList(); for(int i0;i12;i){ calendar.add(Calendar.MONTH,1); list.add(new SimpleDateFormat(yyyy.MM).format(calendar.getTime())); } MapString,Object map new HashMap(); map.put(months,list); ListInteger memberCount memberService.findMemberCountByMonth(list); map.put(memberCount,memberCount); return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map); } }3.3.2 服务接口在MemberService服务接口中扩展方法findMemberCountByMonthpublic ListInteger findMemberCountByMonth(ListString month);3.2.3 服务实现类在MemberServiceImpl服务实现类中实现findMemberCountByMonth方法//根据月份统计会员数量 public ListInteger findMemberCountByMonth(ListString month) { ListInteger list new ArrayList(); for(String m : month){ m m .31;//格式2019.04.31 Integer count memberDao.findMemberCountBeforeDate(m); list.add(count); } return list; }3.3.4 Dao接口在MemberDao接口中扩展方法findMemberCountBeforeDatepublic Integer findMemberCountBeforeDate(String date);3.3.5 Mapper映射文件在MemberDao.xml映射文件中提供SQL语句!--根据日期统计会员数统计指定日期之前的会员数。lt;是号转义字符-- select idfindMemberCountBeforeDate parameterTypestring resultTypeint select count(id) from t_member where regTime lt; #{value} /select修改main.html 左侧导航点击会员数量统计跳转到我们的report_member.html页面{ path: 5, //菜单项所对应的路由路径 title: 统计分析, //菜单项名称 icon:fa-heartbeat, children:[//是否有子菜单若没有则为[] { path: /5-1, title: 会员数量统计, linkUrl:report_member.html, children:[] } ] }
