当后台管理系统有一定的数据量后，我们可能需要对这些数据进行统计、分析，提炼出更多有用的信息，而为了使这些冰冷的数据显得更平易近人，更直观的传达信息，我们可以使用图表来将数据表达出来，实现数据可视化。Echarts框架就可以让我们快速的构建出图表来展示数据，接下来让我们一起快速入门一下。
前置条件：耐性100%；IDEA2019；Mysql5.7；SSM框架；ajax请求
文章目录
简单了解Echarts
- 一个进入了阿帕奇基金会的Apache孵化器的百度开源项目；
- 一个使用 JavaScript 实现的开源可视化库；
- 图表直观、交互丰富、兼容性强、可高度个性化定制；
- 具有完善的官方开发文档，开放的社区平台；
- 前端框架，入门简单，登天很难
下载Echarts
官方提供了三种下载方式：
- 从下载的源代码或编译产物安装
https://www.echartsjs.com/zh/download.html - npm安装（需要先安装node.js）
windows打开命令提示符（cmd）/Linux打开终端，输入npm install echarts - 在线定制下载（可视化界面，本文用这个）
选好后
等待创建…
OK
引用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">
SELECT
menuname,
sell_num
FROM
menu
WHERE
YEAR (updatetime) = YEAR (SYSDATE())
AND MONTH (updatetime) = MONTH (SYSDATE())
AND sell_num > 0
AND 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;
@Override
public 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等等
感觉有用就点个赞呗~
下一篇应该是毕设后台的最后一篇了，写一下“简单”的退出功能
