首先声明本次前端框架使用是vue，服务端使用Springboot , mybatis plus
前台
1. 前端使用npm 安装echarts
npm install --save echarts@4.1.0
2. 选择表格（echarts官网拷贝自己需要的表格）
- echarts官网:https://echarts.apache.org/zh/index.html
在这里插入图片描述我选择了一个简单的折线图
在这里插入图片描述
3. 创建组件（把自己选择的echarts代码拷贝）
a.为ECharts准备一个具备大小（宽高）的Dom
<template>
<div class="app-container">
<--为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>
b.编写js代码
<script>
import echarts from 'echarts'
import sta from '@/api/sta' //导入编写好的api接口
export default {
data() {
return {
//要像服务端发送查询数据,,类型(我举的例子是查询8.3-8.4登录数据)按照自己实际情况进行使用
searchObj: {
type: 'login_num',
begin: '2020-7-1',
end: '2020-8-4'
},
xData: [],
yData: []
}
},
Created(){
this.showChart() //初始化调用接口获取数据展示图表
},
methods: {
showChart() {
sta.selectStatisics(this.searchObj)
.then(response =>{
this.xData = response.data.data.dayList
this.yData = response.data.data.MList
this.setChart() //获取到数据后调用图表参数进行显示
})
},
// 设置图标参数
setChart() {
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(document.getElementById('chart'))
// console.log(this.chart)
// 指定图表的配置项和数据
var option = {
// x轴是类目轴（离散数据）,必须通过data设置类目数据
xAxis: {
type: 'category',
data: this.xData
},
// y轴是数据轴（连续数据）
yAxis: {
type: 'value'
},
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [{
// 系列中的数据内容数组
data: this.yData,
// 折线图
type: 'line'
}],
//显示标题
title: {
text: "用户信息图"
},
//x坐标轴触发提示
tooltip: {
trigger: 'axis'
}
}
//使用刚指定的配置项和数据显示图表
this.chart.setOption(option)
}
}
}
</script>
4.编写与服务端通信的api接口（使用axios）
import request from '@/utils/request' //导入编写的axios工具类
export default{
//获取图表数据，并显示
selectStatisics(searchObj){
return request({
//服务端接口地址，因为我后端接收的为3个参数，所以要从页面传来的对象里取出来
url:`/statistics/daily/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,
method:'get'
})
}
}
服务端
5.编写后台
a.编写controller
@RestController
@RequestMapping("/statistics/daily")
@CrossOrigin //因为是前后端分离,所以要跨域 --我写的只是跨域中的一种
public class DailyController {
@Autowired
private DailyService dailyService; //注入服务
//获取数据图表 返回2部分数据，日期json数据 数量json数据
@GetMapping("showData/{type}/{begin}/{end}")
public R showData(@PathVariable String type ,
@PathVariable String begin,
@PathVariable String end){
Map<String,Object> map = dailyService.getShowData(type,begin,end);
return R.ok().data(map);
}
}
b.编写service
@Service
public class DailyServiceImpl extends ServiceImpl<DailyMapper, Daily> implements DailyService {
//获取数据图表 返回2部分数据，日期json数据 数量json数据
@Override
public Map<String, Object> getShowData(String type, String begin, String end) {
QueryWrapper<Daily> queryWrapper = new QueryWrapper<>();
queryWrapper.between("date_calculated",begin,end);
queryWrapper.select("date_calculated",type); //查出这2个字段
List<Daily> dailyList = baseMapper.selectList(queryWrapper);
//要封装2个list 然后放到map里
Map<String,Object> map = new HashMap<>();
List<String> dayList = new ArrayList<>();
List<Integer> MList = new ArrayList<>();
for (int i = 0; i < dailyList.size(); i++) {
Daily daily = dailyList.get(i);
dayList.add(daily.getDateCalculated());
//封装
MList.add(daily.getLoginNum());
}
//将封装好的2个list集合放到map集合中进行返回
map.put("dayList",dayList);
map.put("MList",MList);
return map;
}
}
前后联调
6.联调
在这里插入图片描述
