springboot + Vue前后端项目（第十二记）

1.写在前面

本篇主要讲解系统整合Echarts

2. 整合Echarts

2.1 vue安装Echarts

npm i echarts -S

2.2 使用Echarts

vue中使用echarts的demo

<template><div><div id="main" style="width: 100%; height: 500px;"></div></div>
</template><script>
import * as echarts from 'echarts'export default {name: "Home",data() {return {}},mounted() {   // 主要用于对DOM进行操作和进行一些需要DOM的逻辑处理this.initEcharts();},methods: {initEcharts() {let chartDom = document.getElementById('main');let myChart = echarts.init(chartDom);let option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]};myChart.setOption(option);}}
}
</script><style scoped></style>

注：可以去Echarts官网进一步实践不同类型的图表
示例地址

2.3 EchartsController编写

该接口主要统计每个季度的用户人数，然后传递数据给前端

package com.ppj.controller;import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.date.LocalDateTimeUtil;
import cn.hutool.core.date.Quarter;
import com.ppj.common.Result;
import com.ppj.entity.User;
import com.ppj.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import java.time.LocalDateTime;
import java.util.Date;
import java.util.List;@RestController
@RequestMapping("/echarts")
public class EchartsController {@Autowiredprivate IUserService userService;/*** 获取每个季度的会员数* @return*/@GetMapping("/members")public Result getMembers(){List<User> userList = userService.list();int q1 = 0;int q2 = 0;int q3 = 0;int q4 = 0;for (User user : userList) {Date createTime = user.getCreateTime();// 季度Quarter quarter = DateUtil.quarterEnum(createTime);switch (quarter){case Q1:q1++;break;case Q2:q2++;break;case Q3:q3++;break;case Q4:q4++;break;default:break;}}return Result.success(CollUtil.newArrayList(q1,q2,q3,q4));}}

2.4 Home.vue编写

模拟各种统计实时展示，用折线，柱状，饼状图展示各月度会员人数

<template><div><el-row :gutter="10" style="margin-bottom: 50px;"><el-col :span="6"><el-card style="color: #409EFF;"><div><i class="el-icon-user-solid"/>用户总数</div><div style="padding: 10px 0;text-align: center;font-weight: bold;">100</div></el-card></el-col><el-col :span="6"><el-card style="color: #67C23A;"><div><i class="el-icon-s-goods"/>销售总量</div><div style="padding: 10px 0;text-align: center;font-weight: bold;">10000</div></el-card></el-col><el-col :span="6"><el-card style="color: #E6A23C;"><div><i class="el-icon-coin"/>收益总额</div><div style="padding: 10px 0;text-align: center;font-weight: bold;">￥999</div></el-card></el-col><el-col :span="6"><el-card style="color: #F56C6C;"><div><i class="el-icon-medal-1"/>门店总数</div><div style="padding: 10px 0;text-align: center;font-weight: bold;">1000</div></el-card></el-col></el-row><el-row><el-col :span="12"><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="line" style="width: 600px; height: 400px"></div></el-col><el-col :span="12"><div id="pie" style="width: 600px; height: 400px"></div></el-col></el-row></div>
</template><script>
import * as echarts from 'echarts'export default {name: "Home",data() {return {}},mounted() {   // 主要用于对DOM进行操作和进行一些需要DOM的逻辑处理this.initEcharts();},methods: {initEcharts() {//页面元素渲染之后再触发let lineChartDom = document.getElementById("line");let lineChart = echarts.init(lineChartDom);let pieChartDom = document.getElementById("pie");let pieChart = echarts.init(pieChartDom);const lineOption = {title: {text: "各季度会员数量统计",subtext: "趋势图",left: "center",},xAxis: {   // 横坐标type: "category",data: ["第一季度", "第二季度", "第三季度", "第四季度"],},yAxis: {type: "value",},// 显示数据series: [{data: [],type: "line",   // 折线数据},{data: [],type: "bar",   // 柱状数据},],};this.request.get("/echarts/members").then(res => {if(res.code === "200"){// 获取数据lineOption.series[0].data =res.datalineOption.series[1].data =res.data}// 绘制图表lineChart.setOption(lineOption)})const pieOption = {title: {text: "各季度会员数量统计",subtext: "比例图",left: "center",},tooltip: {trigger: "item",},legend: {orient: "vertical",left: "left",},series: [{type: "pie",radius: "50%",data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],};this.request.get("/echarts/members").then(res => {if (res.code === "200") {pieOption.series[0].data = [{ value: res.data[0], name: '第一季度' },{ value: res.data[1], name: '第二季度' },{ value: res.data[2], name: '第三季度' },{ value: res.data[3], name: '第四季度' }]pieChart.setOption(pieOption)}})}}
}
</script><style scoped></style>

总结

• 这只是简单的整合echarts使用示例，后期可以根据自己的需求，看官方文档更加深入的使用echarts
• 代码内部有详细的注释

写在最后

如果此文对您有所帮助，请帅戈靓女们务必不要吝啬你们的Zan，感谢！！不懂的可以在评论区评论，有空会及时回复。
文章会一直更新