项目中的Echarts图表统计

数据可视化

一、Echarts二、前端（Vue+Echarts）HomeView.vue（完整代码） 三、后端（SpringBoot+MyBatis）BorrowController.javaIBorrSEO靠我owService.javaBorrowService.javadatetimeToDateStr()函数countList()函数 BorrowReturCountPO（自定义类封装）BorrowMSEO靠我apper.javaBorrow.xml

前情提要：本次Echarts数据可视化基于图书管理系统设计

一、Echarts

Echarts是一个开源的可视化图表库，由百度前端技术部开发维护。它基于JavaScSEO靠我ript语言实现，通过简单的配置即可生成丰富多样的图表，包括柱状图、折线图、饼图等等。Echarts支持各种数据格式，如JSON、XML、CSV等，同时也提供了强大的交互功能，可以让用户在图表上进行缩SEO靠我放、平移、标记等操作。Echarts还有丰富的扩展插件和主题，方便用户根据不同需求进行自定义定制。Echarts的优点在于使用简单、灵活性高、可定制性强，并且提供了完善的文档和API参考，方便开发人员SEO靠我快速上手和开发。

二、前端（Vue+Echarts）

Echarts下载：npm i echarts -S

HomeView.vue（完整代码）

<template><div><div style="margSEO靠我in: 20px 0"><el-select class="input" v-model="timeRange" placeholder="请选择" @change="load"><el-optionSEO靠我v-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-seleSEO靠我ct></div><el-card><div id="line" style="width: 100%; height: 400px"></div></el-card></div> <SEO靠我/template><script> import Cookies from js-cookie import request from "@/utils/requesSEO靠我t"; import * as echarts from echartsconst option = {title: {text: 图书借还统计},tooltip: {trigger:SEO靠我 axis},legend: {data: [借书数量, 还书数量]},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolboxSEO靠我: {feature: {saveAsImage: {}}},xAxis: {type: category,boundaryGap: false,data: [] //从后台动态获取},yAxis: SEO靠我{type: value},series: [{name: 借书数量,type: line,stack: Total,smooth: true,data: [] //从后台动态获取},{name: 还SEO靠我书数量,type: line,smooth: true,data: [] //从后台动态获取}] }export default {data() {return {admin: CooSEO靠我kies.get(admin) ? JSON.parse(Cookies.get(admin)) : {},lineBox: null,timeRange: week,options: [{labelSEO靠我: 最近一周, value: week},{label: 最近一个月, value: month},{label: 最近两个月, value: month2},{label: 最近三个月, valueSEO靠我: month3},]}},mounted() { // 等页面元素全部初始化好才开始加载mounth()函数this.load()},methods: {load() {if (!this.lineSEO靠我Box) {this.lineBox = echarts.init(document.getElementById(line)) //初始化echarts容器}//从后台获取数据request.getSEO靠我(/borrow/lineCharts/ + this.timeRange).then(res => {option.xAxis.data = res.data.dateoption.series[0SEO靠我].data = res.data.borrowoption.series[1].data = res.data.returthis.lineBox.setOption(option) //设置容器的SEO靠我属性值，当数据重新发生变化时，一定要重新setOption()})}}} </script><style> .input {width: 300px; SEO靠我} </style>

1、导入echarts

import * as echarts from echarts

2、原始的option代码

option = {title: {text: StSEO靠我acked Line},tooltip: {trigger: axis},legend: {data: [Email, Union Ads, Video Ads, Direct, Search EngSEO靠我ine]},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {}}}SEO靠我,xAxis: {type: category,boundaryGap: false,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: SEO靠我value},series: [{name: Email,type: line,stack: Total,data: [120, 132, 101, 134, 90, 230, 210]},{nameSEO靠我: Union Ads,type: line,stack: Total,data: [220, 182, 191, 234, 290, 330, 310]},{name: Video Ads,typeSEO靠我: line,stack: Total,data: [150, 232, 201, 154, 190, 330, 410]},{name: Direct,type: line,stack: TotalSEO靠我,data: [320, 332, 301, 334, 390, 330, 320]},{name: Search Engine,type: line,stack: Total,data: [820,SEO靠我 932, 901, 934, 1290, 1330, 1320]}] };

3、修改

目录：

text: 图书借还统计

折线：

legend: {data: [借书数量, 还书数量]},

横坐标SEO靠我：

xAxis: {type: category,boundaryGap: false,data: []},

纵坐标：

yAxis: {type: value},

series（与相应折线legend对应）

sSEO靠我eries: [{name: 借书数量,type: line,stack: Total,smooth: true,data: []},{name: 还书数量,type: line,stack: TotSEO靠我al,smooth: true,data: []}]

4、定义echart图标对应的dom元素 html

<el-card><div id="line" style="width: 100%; heightSEO靠我: 400px"></div></el-card>

5、定义echarts容器 js

data() {return {lineBox: null,}}

6、根据时间范围加载最新的数据 html

<div stylSEO靠我e="margin: 20px 0"><el-select class="input" v-model="timeRange" placeholder="请选择" @change="load"><elSEO靠我-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></SEO靠我el-select></div>

js

mounted() { // 等页面元素全部初始化好才开始加载mounth()函数this.load()},methods: {load() {if (!this.SEO靠我lineBox) {this.lineBox = echarts.init(document.getElementById(line)) //初始化echarts容器}//从后台获取数据requestSEO靠我.get(/borrow/lineCharts/ + this.timeRange).then(res => {option.xAxis.data = res.data.dateoption.seriSEO靠我es[0].data = res.data.borrowoption.series[1].data = res.data.returthis.lineBox.setOption(option) //设SEO靠我置容器的属性值，当数据重新发生变化时，一定要重新setOption()})}}

三、后端（SpringBoot+MyBatis）

1、请求接口 2、返回前端的数据

BorrowController.java

/SEO靠我/timeRange:week、month、month2、month3@GetMapping("/lineCharts/{timeRange}")public Result lineCharts(@PSEO靠我athVariable String timeRange) {return Result.success(borrowService.getCountByTimeRange(timeRange));}SEO靠我

IBorrowService.java

Map<String, Object> getCountByTimeRange(String timeRange);

BorrowService.java

导入

impSEO靠我ort cn.hutool.core.collection.CollUtil;

import cn.hutool.core.date.DateField;

import cn.hutool.core.daSEO靠我te.DateTime;

import cn.hutool.core.date.DateUtil;

Java工具类库Hutool 提供的方法:

DateUtil.rangeToList()

返回从开始时间到结SEO靠我束时间的一个时间范围 返回类型 List < DateTime >

DateUtil.offsetDay() 计算时间的一个工具方法 返回类型 DateTime

通过自定义函数 datetimeToDateSSEO靠我tr() 把 DateTime类型 的 List 转换成一个 String类型

的 List

原因是前端里 “data”:[ ]、“return”:[ ]、“borrow”:[ ] 数组存储的是String类型的SEO靠我元素

@Overridepublic Map<String, Object> getCountByTimeRange(String timeRange) {Map<String, Object> mapSEO靠我 = new HashMap<>();Date today = new Date();List<DateTime> dateRange;switch (timeRange) {case "week":SEO靠我dateRange = DateUtil.rangeToList(DateUtil.offsetDay(today, -6), today, DateField.DAY_OF_WEEK);break;SEO靠我case "month":dateRange = DateUtil.rangeToList(DateUtil.offsetDay(today, -29), today, DateField.DAY_OSEO靠我F_MONTH);break;case "month2":dateRange = DateUtil.rangeToList(DateUtil.offsetDay(today, -59), today,SEO靠我 DateField.DAY_OF_MONTH);break;case "month3":dateRange = DateUtil.rangeToList(DateUtil.offsetDay(todSEO靠我ay, -89), today, DateField.DAY_OF_MONTH);break;default:dateRange = new ArrayList<>();}List<String> dSEO靠我ateStrRange = datetimeToDateStr(dateRange);map.put("date", dateStrRange); // x轴的时间日期数据生成完毕//1 borrowSEO靠我 2 retrun//getCountByTimeRange：不会统计数据库没有的日期，比如没有2022.11.4，他不会返回 **data=2022-11-04,count=0**List<BorrSEO靠我owReturCountPO> borrowCount = borrowMapper.getCountByTimeRange(timeRange, 1);List<BorrowReturCountPOSEO靠我> returnCount = borrowMapper.getCountByTimeRange(timeRange, 2);map.put("borrow", countList(borrowCouSEO靠我nt, dateStrRange));map.put("retur", countList(returnCount, dateStrRange));return map;}

注意：

getCountByTSEO靠我imeRange sql语句：不会统计数据库没有的日期，比如没有2022.11.4，他不会返回 data=2022-11-04,count=0这个数据，所以又写countList()函数对在统计数据库时其SEO靠我中不存在的数据进行处理

datetimeToDateStr()函数

把 DateTime类型 的 List 转换成一个 String类型 的 List

private List<String> datetiSEO靠我meToDateStr(List<DateTime> dateTimeList) {List<String> list = CollUtil.newArrayList();if (CollUtil.iSEO靠我sEmpty(dateTimeList)) {return list;}for (DateTime dateTime : dateTimeList) {String date = DateUtil.fSEO靠我ormatDate(dateTime);list.add(date);}return list;}

countList()函数

1、对在统计数据库时其中不存在的数据进行处理

2、.map(BorrowRetSEO靠我urCountPO::getCount) 取出对象里的count值

3、有就取出，没有就.orElse(0)对没匹配的数据返回 0private List<Integer> countList(ListSEO靠我<BorrowReturCountPO> countPOList, List<String> dateRange) {List<Integer> list = CollUtil.newArrayLisSEO靠我t();if (CollUtil.isEmpty(countPOList)) {return list;}for (String date : dateRange) {Integer count = SEO靠我countPOList.stream().filter(countPO -> date.equals(countPO.getDate())).map(BorrowReturCountPO::getCoSEO靠我unt).findFirst().orElse(0);list.add(count);}/* "date": ["2023-06-01","2023-06-02","2023-06-03","2023SEO靠我-06-04","2023-06-05","2023-06-06","2023-06-07"],"retur": [0,0,0,0,0,0,2],"borrow": [0,0,0,0,0,0,3]*/SEO靠我return list;}

BorrowReturCountPO（自定义类封装）

@Data public class BorrowReturCountPO {private StringSEO靠我 date;private Integer count; }

BorrowMapper.java

List<BorrowReturCountPO> getCountByTimeRange(SEO靠我@Param("timeRange") String timeRange, @Param("type") int type); // 1 borrow 2 return

Borrow.xml

1、DATESEO靠我_FORMAT(createtime,‘%Y-%m-%d’) ：把DateTime类型的数据格式化为 yyyy-MM-dd 2、getCountByTimeRange

sql语句：如果是1查 borrow表SEO靠我，2查 return表

3、DATE_SUB(NOW(),INTERVAL 1 WEEK) ：数据库进行时间计算的函数（对当前的时间减去一周）<select id="getCountByTimeRangSEO靠我e" resultType="com.example.springboot.mapper.po.BorrowReturCountPO">select count(id) as count, DATE_SEO靠我FORMAT(createtime,%Y-%m-%d) as date from<if test="type == 1">borrow</if><if test="type == 2">retur</SEO靠我if>where<choose><when test="timeRange == week">createtime >= DATE_SUB(NOW(),INTERVAL 1 WEEK)</when><SEO靠我when test="timeRange == month">createtime >= DATE_SUB(NOW(),INTERVAL 1 MONTH)</when><when test="timeSEO靠我Range == month2">createtime >= DATE_SUB(NOW(),INTERVAL 2 MONTH)</when><when test="timeRange == monthSEO靠我3">createtime >= DATE_SUB(NOW(),INTERVAL 3 MONTH)</when><otherwise>createtime > now()</otherwise></cSEO靠我hoose>group by date</select>