版权声明：本文为博主原创文章，转载请注明出处 浅然的专栏 https://blog.csdn.net/w_linux/article/details/81150217
该篇博客通过SpringBoot+MongoDB+Echarts实现报表数据可视化的一个简易折线报表demo，该博客是前后分离架构，所以笔者会从后端实现、前端实现来分别阐述
一、Demo效果(实现一个每天人流量的折线图demo)
二、MongoDB造假数据
MongoDB中的数据因为是demo，所以数据都是非真实的
- 数据库名称：test
- 集合名称：time_flow
造假数据
{ "_id" : ObjectId("5b53271bbe55049796eed1aa"), "id" : 1, "2018-01-03" : 21, "2018-01-04" : 2, "2018-01-05" : 33, "2018-01-06" : 3, "2018-01-07" : 44, "2018-01-08" : 43, "2018-01-09" : 22, "2018-01-10" : 12 }
三、SpringBoot后台搭建开发
1、后台项目目录
2、配置application.properties
#服务器端口
server.port=8080
#项目路径
server.servlet.context-path=/api
#mongodb配置
spring.data.mongo.host=127.0.0.1
spring.data.mongo.port=27017
spring.data.mongo.database=test
3、实体类(EchartsPOJO)
package com.example.demo.domain;
/**
* @Author: linjie
* @Description: 时间\人流量实体类
* @Date: 下午 15:55 2018/7/21 0021
*/
public class EchartsPOJO {
private String datetime; //时间
private Integer flow; //流量
/**
*构造方法
**/
public EchartsPOJO(String datetime, Integer flow) {
this.datetime = datetime;
this.flow = flow;
}
public EchartsPOJO(){}
/**
*setter and getter
**/
public String getDatetime() {
return datetime;
}
public void setDatetime(String datetime) {
this.datetime = datetime;
}
public Integer getFlow() {
return flow;
}
public void setFlow(Integer flow) {
this.flow = flow;
}
/**
*toString方法
**/
@Override
public String toString() {
return "EchartsPOJO{" +
"datetime='" + datetime + '\'' +
", flow=" + flow +
'}';
}
}
4、服务层接口及其实现类
ITimeFlow接口
package com.example.demo.service;
import java.util.Map;
/**
* @Author: linjie
* @Description: 时间 人流量接口
* @Date: 下午 16:02 2018/7/21 0021
*/
public interface ITimeFlow {
Map GetTimeFlow();
}
TimeFlowImpl实现类
package com.example.demo.service.impl;
import com.example.demo.domain.EchartsPOJO;
import com.example.demo.service.ITimeFlow;
import com.mongodb.MongoClient;
import com.mongodb.client.FindIterable;
import com.mongodb.client.MongoCollection;
import com.mongodb.client.MongoDatabase;
import org.bson.Document;
import org.springframework.stereotype.Service;
import java.util.*;
/**
* @Author: linjie
* @Description: 时间 人流量接口实现类
* @Date: 下午 16:04 2018/7/21 0022
*/
@Service
public class TimeFlowImpl implements ITimeFlow{
@Override
public Map GetTimeFlow() {
//创建MongoDB数据库对象,连接MongoDB
MongoClient mongoClient = new MongoClient("localhost",27017);
//指定使用的数据库和集合
MongoDatabase mongoDatabase = mongoClient.getDatabase("test");
MongoCollection<Document> collection = mongoDatabase.getCollection("time_flow");
//设定条件
//获取数据
Document query = new Document("id",1);
FindIterable<Document> findIterable = collection.find(query);
/**
*遍历findIterable
*获取时间和流量
**/
int count = 0;//计数器,保证获取的key是date而不是其他数据
List<EchartsPOJO> list = new ArrayList<>();//存储EchartsPOJO
for (Document fi : findIterable){
Iterator<String> iterator = fi.keySet().iterator();
/**
*迭代器遍历
*获取key和value(日期和流量)
**/
while (iterator.hasNext()){
//获得key
String key = iterator.next();
if(count > 1){
Integer value = fi.getInteger(key);
list.add(new EchartsPOJO(key,value));
}
count++;
}
}
Map map = new HashMap();
map.put("list",list);
return map;
}
}
5、控制层请求处理控制器（EchartsController）
package com.example.demo.controller;
import com.example.demo.domain.EchartsPOJO;
import com.example.demo.service.ITimeFlow;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.Map;
/**
* @Author: linjie
* @Description: 请求处理控制器
* @Date: 下午 17:06 2018/7/21 0021
*/
@RestController
//实现跨域
@CrossOrigin(origins = "*",maxAge = 3600)
public class EchartsController {
@Resource
private ITimeFlow iTimeFlow;
@GetMapping("/timeflow")
public Map timeflow(){
return iTimeFlow.GetTimeFlow();
}
}
6、后台数据回显测试
四、前台Echarts+ajax实现
1、前台项目目录
2、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>折线demo</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-gl.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--定义一个Echarts容器-->
<div id="TwoLineChart" style="width: 600px;height:400px;"></div>
<script src="js/timeflow.js"></script>
</body>
</html>
3、timeflow.js
function loadTwoLine() {
var myChart = echarts.init(document.getElementById('TwoLineChart'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '时间流量趋势图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['日流量趋势图']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: false, //取消左侧的间距
data: []
},
yAxis: {
type: 'value',
splitLine: { show: false },//去除网格线
name: ''
},
series: [{
name: '日流量趋势图',
type: 'line',
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
},
symbol: 'emptydiamond', //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var datetimes = []; //类别数组（实际用来盛放X轴坐标值）
var flows = [];
$.ajax({
type: 'get',
url: 'http://localhost:8080/api/timeflow',//请求数据的地址
dataType: "json", //返回数据形式为json
success: function (result) {
// alert(result.itemId)
// console.info(result.itemId);
//请求成功时执行该函数内容，result即为服务器返回的json对象
$.each(result.list, function (index, item) {
datetimes.push(item.datetime); //挨个取出类别并填入类别数组
flows.push(item.flow);
});
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
//加载数据图表
title:{
text: "每日流量趋势图"
},
xAxis: {
data: datetimes
},
yAxis:{},
series: [{
data: flows
}]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
};
loadTwoLine();
关于该项目的跨域解决方案可与转战笔者的另一篇博客，如下
SpringBoot解决CORS跨域（@CrossOrigin）
OK，这个报表数据可视化demo就已经完成了
工程下载