当后台管理系统有一定的数据量后，我们可能需要对这些数据进行统计、分析，提炼出更多有用的信息，而为了使这些冰冷的数据显得更平易近人，更直观的传达信息，我们可以使用图表来将数据表达出来，实现数据可视化。Echarts框架就可以让我们快速的构建出图表来展示数据，接下来让我们一起快速入门一下。
前置条件：耐性100%；IDEA2019；Mysql5.7；SSM框架；ajax请求

文章目录

简单了解Echarts
- 下载Echarts
- 引用Echarts
- 测试Echarts
可视化数据库数据（菜单管理为例）
- 数据库建表
- 梳理需求
- 数据库统计数据
- 编写实现类
- 编写Dao接口
- 编写Service接口及实现类
- 编写控制器
- 画图表
结尾

简单了解Echarts

一个进入了阿帕奇基金会的Apache孵化器的百度开源项目；
一个使用 JavaScript 实现的开源可视化库；
图表直观、交互丰富、兼容性强、可高度个性化定制；
具有完善的官方开发文档，开放的社区平台；
前端框架，入门简单，登天很难

下载Echarts

官方提供了三种下载方式：

从下载的源代码或编译产物安装
https://www.echartsjs.com/zh/download.html
npm安装（需要先安装node.js）
windows打开命令提示符（cmd）/Linux打开终端，输入npm install echarts
在线定制下载（可视化界面，本文用这个）

选好后

等待创建…

引用Echarts

将下载好的js文件放入项目的静态资源目录下

创建charts.jsp文件引入echarts（src填实际的文件路径）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Charts</title><script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
...
</body>
</html>

测试Echarts

根据官方文档的入门教程，我们首先需要准备一个具备高宽的 DOM 容器。

<div id="main" style="width: 600px;height:400px;"></div>

然后通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

    <script type="text/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>

到这来我们就成功引用了Echarts实现了简单的数据可视化。

可能很多盆友会担心刚入门，不会画图，这里Echarts为我们提供了大量的图表样式，源码都给出来了，可以直接拿来用

可视化数据库数据（菜单管理为例）

因为本人的毕设是饭店点菜管理系统，接下来我们就用上面从官网嫖过来的饼状图统计一下菜单的月销售情况，采用ajax请求来动态加载图表。

数据库建表

看过本人之前博客的盆友就很熟悉了，Menu(菜单)表
准（wei）备（zao）数据

梳理需求

要干嘛——统计上架菜品的月销售情况；
要知道什么——菜名，销售量；
什么图表合适——看个人，饼状图比较好观察哪种菜品销售占总销售多少；
选择的图表需要什么数据——菜名，销售量；

数据库统计数据

先在数据库查询一遍我们需要的数据，到时候图表呈现的就是这些数据

编写实现类

package com.qiang.domain;import lombok.Data;
import java.sql.Timestamp;
import java.util.List;/*** @author Mr.锵* date 2020-02-21*/
@Data
public class Menu {private String menuid;private String menuname;private Float price;private String Image;private Timestamp createtime;private Timestamp updatetime;private Integer sell_num;private String status;private String description;private Integer kucun;
}

编写Dao接口

package com.qiang.dao;import com.qiang.domain.Menu;
import org.apache.ibatis.annotations.*;
import org.springframework.stereotype.Repository;import java.util.List;
import java.util.Map;/*** @author Mr.锵* date 2020-02-21*/
@Repository
public interface IMenuDao {/*** 统计月销情况* @return*/List<Map> countsellnum();}

IMenuDao.xml

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qiang.dao.IMenuDao"><resultMap id="CSNMap" type="java.util.Map"><result property="name" column="menuname"  jdbcType="VARCHAR"></result><result property="num" column="sell_num"  jdbcType="VARCHAR"></result></resultMap><select id="countsellnum" resultMap="CSNMap">SELECTmenuname,sell_numFROMmenuWHEREYEAR (updatetime) = YEAR (SYSDATE())AND MONTH (updatetime) = MONTH (SYSDATE())AND sell_num > 0AND status='上架'</select>
</mapper>

编写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<Map> 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;
@Overridepublic List<Map> 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<Map> countsellnum = menuService.countsellnum();return countsellnum;}
}

画图表

先准备一个容器，再初始化图表，ajax请求数据，显示在图表中

<div id="sell-main" style="width: 600px;height:400px;"></div>
<script>
$(function () {var myChart = echarts.init(document.getElementById('sell-main'));var option = {title: {text: '菜品月销数量统计',subtext: '数据库统计',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{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<data.length; i++) {option.series[0].data.push({value:data[i].num,name:data[i].name});option.legend.data.push(data[i].name);selecteds[data[i].name]=i<6;}option.legend.selected=selecteds}})//上面执行完后再执行myChart.setOption(option);})
</script>

结尾

注意事项：

遇到不懂的建议多看看Echarts的官方开发文档；
Echarts不仅有大量的官方图例，社区上面也有很多很好看的图例；
引用图例的时候建议先看一下源码，大概弄懂后再引用；
引用图例报错的话，有一种可能是你的echarts.min.js文件当初下载的时候没有选择引用图例的这种类型；
假如仅仅只是想入门，偶尔用一下图表，并不想从事前端，数据可视化这些方向的盆友，源码不用全弄懂，主要关注 “data:[]” 等注入数据的地方，哪里不会删哪里；
本篇对Echarts的介绍只是冰山一角，Echarts还能用来画地图、线路图、气象图、2D、3D等等

感觉有用就点个赞呗~

下一篇应该是毕设后台的最后一篇了，写一下“简单”的退出功能

毕设IDEA2019之ssm+Echarts框架快速入门实现数据可视化（图表统计）相关推荐

echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
Java基础-SSM之mybatis快速入门篇
Java基础-SSM之mybatis快速入门篇作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 其实你可能会问什么是SSM,简单的说就是spring mvc + Spring + m ...
Quartz 框架快速入门（二）
尽可能的用声明式处理软件配置,其次才考虑编程式的方式.在上一篇<Quartz 框架快速入门(一)>中,如果我们要在 Job 启动之后改变它的执行时间和频度,必须去修改源代码重新编译.这种方 ...
Quartz 框架快速入门（四）
Spring的scheduling.quartz包中对Quartz框架进行了封装,使得开发时不用写任何QuartSpring的代码就可以实现定时任务.Spring通过JobDetailBean,Met ...
Quartz 框架快速入门（三）
在前面两篇文章中简单介绍了在java应用程序中如何使用Quartz框架,这一篇中我们将看到如何在web环境下通过配置文件来完成Quartz的后台作业调度,而不必手工去创建Trigger和Schedul ...
【完结】给新手的12大深度学习开源框架快速入门项目
文/编辑 | 言有三这是一篇总结文,给大家来捋清楚12大深度学习开源框架的快速入门,这是有三AI的GitHub项目,欢迎大家star/fork. https://github.com/longpen ...
java day53【 Mybatis框架概述、 Mybatis 框架快速入门、自定义 Mybatis 框架】
第1章框架概述 1.1 什么是框架 1.1.1 什么是框架框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定 ...
微信小程序wepy框架快速入门
微信小程序wepy框架快速入门微信小程序简介微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一 ...
Python学习笔记--10.Django框架快速入门之后台管理admin（书籍管理系统）
Python学习笔记--10.Django框架快速入门之后台管理一.Django框架介绍二.创建第一个Django项目三.应用的创建和使用四.项目的数据库模型 ORM对象关系映射 sqlite ...

毕设IDEA2019之ssm+Echarts框架快速入门实现数据可视化（图表统计）