ECharts
ECharts缩写来自Enterprise Charts,商业级数据图表,是百度的一个开源的使用JavaScript实现的数据可视化工具,
官网:https://echarts.baidu.com/
下载地址:https://echarts.baidu.com/download.html
// 使用
echarts.min.js
下载完成可以得到如下文件:
解压zip文件,我们只需要将dist目录下的echarts.js文件引入到页面上就可以使用了
1. 入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="main" style="height: 600px;width: 400px;">
</div>
<script type="text/javascript">
var mycharts = 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]
}]
};
// 使用刚指定的配置项和数据显示图表。
mycharts.setOption(option);
</script>
</body>
</html>
1.引入echarts.js文件
2.编写一个div用于echarts展示
3.生成echarts对象,并且传入我们的div的dom元素
4.指定图标的配置项和数据
5.使用刚指定的配置项和数据显示图表
echarts教程:
https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
2. 官方实例
ECharts提供了很多官方实例,我们可以通过这些官方实例来查看展示效果和使用方法。
官方实例地址:https://www.echartsjs.com/examples/
在实际应用中,数据往往存储在数据库中,所以可以发送ajax请求获取
数据库中的数据并转为图表所需的数据即可。
3. 折线图
通过折线图可以直观的反映出会员数量的增长趋势。本章节我们需要展示过去一年
时间内每个月的会员总数据量。
需要统计在每个月用户数量是多少
4. 页面调整
第一步:将echarts.js文件复制到health_backend工程的plugins目录下
第二步:在report_member.html页面引入echarts.js文件
<script src="../plugins/echarts/echarts.js"></script>
页面代码:
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>健康</title>
<meta name="description" content="健康">
<meta name="keywords" content="健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>统计分析<small>会员数量</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>统计分析</el-breadcrumb-item>
<el-breadcrumb-item>会员数量</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="chart1" style="height:600px;"></div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
axios.get("/report/getMemberReport.do").then((res)=>{
myChart1.setOption(
{
title: {
text: '会员数量'
},
tooltip: {},
legend: {
data:['会员数量']
},
xAxis: {
data: res.data.data.months//动态数据 [2018.12 2019.01]
},
yAxis: {
type:'value'
},
series: [{
name: '会员数量',
type: 'line',
data: res.data.data.memberCount //[1,2]
}]
});
});
</script>
</html>
x轴显示月份
y轴显示会员数量
根据折线图对数据格式的要求,我们发送ajax请求,服务端需要返回如下格式的数据:
{
"data":{
"months":["2019.01","2019.02","2019.03","2019.04"],
"memberCount":[3,4,8,10]
},
"flag":true,
"message":"获取会员统计数据成功"
}
5. 后台代码(Controller中提供模拟数据)
创建ReportController并提供getMemberReport方法
使用模拟数据
package com.ittest.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.ittest.constant.MessageConstant;
import com.ittest.entity.Result;
import com.ittest.service.MemberService;
import com.ittest.utils.DateUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.text.SimpleDateFormat;
import java.util.*;
/**
* 报表操作
*/
@RestController
@RequestMapping("/report")
public class ReportController {
@Reference
private MemberService memberService;
//会员数量折线图数据
@RequestMapping("/getMemberReport")
public Result getMemberReport(){
Map<String,Object> map = new HashMap<>();
List<String> months = new ArrayList();
List<Integer> memberCount = new ArrayList();
map.put("months",months);
map.put("memberCount",memberCount);
months.add("2019.01");
months.add("2019.02");
months.add("2019.03");
months.add("2019.04");
memberCount.add(3);
memberCount.add(4);
memberCount.add(8);
memberCount.add(10);
return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map);
}
}
6. 后台代码(Controller从后台获取数据)
package com.ittest.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.ittest.constant.MessageConstant;
import com.ittest.entity.Result;
import com.ittest.service.MemberService;
import com.ittest.utils.DateUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.text.SimpleDateFormat;
import java.util.*;
/**
* 报表操作
*/
@RestController
@RequestMapping("/report")
public class ReportController {
@Reference
private MemberService memberService;
//会员数量折线图数据
@RequestMapping("/getMemberReport")
public Result getMemberReport(){
Map<String,Object> map = new HashMap<>();
List<String> months = new ArrayList();
//2020年3月18日
Calendar calendar = Calendar.getInstance();//获得日历对象,模拟时间就是当前时间
//计算过去一年的11个月 2019年4月18日
calendar.add(Calendar.MONTH,-12);//获得当前时间往前推12个月的时间
for(int i=0;i<12;i++){
//2019年4月18日
Date date = calendar.getTime();
//"2019-04"
months.add(DateUtils.parseDateToString(date,"yyyy-MM"));
//2019年5月18日
calendar.add(Calendar.MONTH,1);//获得当前时间往后推一个月日期
}
//2019.01 2019.02 ... 2019.12
map.put("months",months);
List<Integer> memberCount = memberService.findMemberCountByMonths(months);
//[1,2,3,4,5]
map.put("memberCount",memberCount);
return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map);
}
}
main.html中修改菜单
{
"path": "5", //菜单项所对应的路由路径
"title": "统计分析", //菜单项名称
"icon":"fa-heartbeat",
"children":[//是否有子菜单,若没有,则为[]
{
"path": "/5-1",
"title": "会员数量统计",
"linkUrl":"report_member.html",
"children":[]
}
]
}
在MemberService服务接口中扩展方法findMemberCountByMonth
public List<Integer> findMemberCountByMonth(List<String> month);
6. 后台代码(服务器实现类)
在MemberServiceImpl服务实现类中实现findMemberCountByMonth方法
//根据月份统计会员数量
public List<Integer> findMemberCountByMonth(List<String> month) {
List<Integer> list = new ArrayList<>();
for(String m : month){
m = m + ".31";//格式:2019.04.31
Integer count = memberDao.findMemberCountBeforeDate(m);
list.add(count);
}
return list;
}
在MemberDao接口中扩展方法findMemberCountBeforeDate
public Integer findMemberCountBeforeDate(String date);
在MemberDao.xml映射文件中提供SQL语句
<!‐‐根据日期统计会员数,统计指定日期之前的会员数‐‐>
<select id="findMemberCountBeforeDate" parameterType="string"
resultType="int">
select count(id) from t_member where regTime <= #{value}
</select>
传入的日期格式是2019.04.31
20190431
2019-04-31
…
这类都可以用于比较时间,且结果都正确
备注:
记录以下mybatis中的转义字符,方便以后自己看一下
< | < | 小于 |
---|---|---|
> | > | 大于 |
& | & | 与 |
' | ’ | 单引号 |
" | " | 双引号 |
需要注意的是分号是必不可少的。 比如 a > b 我们就写成 a > b
当然啦, 我们也可以用另外一种,就是<![CDATA[ ]]>符号。 在mybatis中这种符号将不会解析。 比如
<![CDATA[ when min(starttime)<='12:00' and max(endtime)<='12:00' ]]>