毕设IDEA2019之ssm+Echarts框架快速入门实现数据可视化（图表统计） |
您所在的位置：网站首页 › 统计数据的图表处理心得体会 › 毕设IDEA2019之ssm+Echarts框架快速入门实现数据可视化（图表统计） |
毕设IDEA2019之ssm+Echarts框架快速入门实现数据可视化（图表统计）
|
当后台管理系统有一定的数据量后，我们可能需要对这些数据进行统计、分析，提炼出更多有用的信息，而为了使这些冰冷的数据显得更平易近人，更直观的传达信息，我们可以使用图表来将数据表达出来，实现数据可视化。Echarts框架就可以让我们快速的构建出图表来展示数据，接下来让我们一起快速入门一下。 前置条件：耐性100%；IDEA2019；Mysql5.7；SSM框架；ajax请求 文章目录 简单了解Echarts下载Echarts引用Echarts测试Echarts 可视化数据库数据（菜单管理为例）数据库建表梳理需求数据库统计数据编写实现类编写Dao接口编写Service接口及实现类编写控制器画图表 结尾 简单了解Echarts 一个进入了阿帕奇基金会的Apache孵化器的百度开源项目；一个使用 JavaScript 实现的开源可视化库；图表直观、交互丰富、兼容性强、可高度个性化定制；具有完善的官方开发文档，开放的社区平台；前端框架，入门简单，登天很难 
下载Echarts
官方提供了三种下载方式： 从下载的源代码或编译产物安装 https://www.echartsjs.com/zh/download.htmlnpm安装（需要先安装node.js） windows打开命令提示符（cmd）/Linux打开终端，输入npm install echarts在线定制下载（可视化界面，本文用这个） 选好后  等待创建… 
OK 将下载好的js文件放入项目的静态资源目录下 根据官方文档的入门教程，我们首先需要准备一个具备高宽的 DOM 容器。 然后通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图 // 基于准备好的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);
可能很多盆友会担心刚入门，不会画图，这里Echarts为我们提供了大量的图表样式，源码都给出来了，可以直接拿来用 因为本人的毕设是饭店点菜管理系统，接下来我们就用上面从官网嫖过来的饼状图统计一下菜单的月销售情况，采用ajax请求来动态加载图表。 数据库建表看过本人之前博客的盆友就很熟悉了，Menu(菜单)表 先在数据库查询一遍我们需要的数据，到时候图表呈现的就是这些数据 IMenuDao.xml SELECT menuname, sell_num FROM menu WHERE YEAR (updatetime) = YEAR (SYSDATE()) AND MONTH (updatetime) = MONTH (SYSDATE()) AND sell_num > 0 AND status='上架' 编写Service接口及实现类接口 package com.qiang.service; import com.qiang.domain.Menu; import java.util.List; import java.util.Map; /** * @author Mr.锵 * date 2020-02-21 */ public interface IMenuService { /** * 统计月销量图表 * @return */ List countsellnum(); }实现类 package com.qiang.service.impl; import com.qiang.dao.IMenuDao; import com.qiang.domain.Menu; import com.qiang.service.IMenuService; import com.qiang.utils.ReadExcel; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; /** * @author Mr.锵 * date 2020-02-21 */ @Service("menuService") public class IMenuServiceImpl implements IMenuService { @Autoward private MenuDao menudao; @Override public List countsellnum() { return menuDao.countsellnum(); } } 编写控制器 package com.qiang.controller; import com.qiang.domain.Menu; import com.qiang.service.IMenuService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import java.util.List; import java.util.Map; /** 1. @author Mr.锵 2. date 2020-02-21 */ @Controller @RequestMapping("/menu") public class MenuController { @Autoward private MenuService menuService; @RequestMapping("/countsellnum") public @ResponseBody List countsellnum(){ List countsellnum = menuService.countsellnum(); return countsellnum; } } 画图表先准备一个容器，再初始化图表，ajax请求数据，显示在图表中 $(function () { var myChart = echarts.init(document.getElementById('sell-main')); var option = { title: { text: '菜品月销数量统计', subtext: '数据库统计', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} {b} : {c} ({d}%)' }, legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: [], selected:{}, }, series: [ { name: '菜名', type: 'pie', radius: '55%', center: ['40%', '50%'], data: [], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; $.ajax({ url : "../menu/countsellnum", datatype : "json", type : "post", async:false,//同步 success : function(data) { var selecteds={} for (var i = 0; i |
创建charts.jsp文件引入echarts（src填实际的文件路径）
到这来我们就成功引用了Echarts实现了简单的数据可视化。
准（wei）备（zao）数据 
【本文地址】