springboot + Vue前后端项目(第十二记)

项目实战第十二记

  • 1.写在前面
  • 2. 整合Echarts
    • 2.1 vue安装Echarts
    • 2.2 使用Echarts
    • 2.3 EchartsController编写
    • 2.4 Home.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,感谢!!不懂的可以在评论区评论,有空会及时回复。
文章会一直更新

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/16470.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Thinkphp5内核宠物领养平台H5源码

源码介绍 Thinkphp5内核流浪猫流浪狗宠物领养平台H5源码 可封装APP&#xff0c;适合做猫狗宠物类的发信息发布&#xff0c;当然懂的修改一下&#xff0c;做其他信息发布也是可以的。 源码预览 源码下载 https://download.csdn.net/download/huayula/89361685

React项目,结合 Antd 的Upload上传组件实现上传前校验

背景 最近工作中&#xff0c;遇到这样一个需求&#xff1a;在登录首页&#xff0c;开发一个上传文件的功能&#xff0c;用户可以在该页面点击该区域上传文件&#xff0c;但是点击前需要做一些判断&#xff0c;若用户未登录&#xff0c;则直接弹出登录弹框&#xff1b;否则&…

Python 开心消消乐

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

《德米安:彷徨少年时》

文前 我之所愿无非是尝试依本性而生活&#xff0c; 却缘何如此之难&#xff1f; 强盗 疏于独立思考和自我评判的人只能顺应现成的世俗法则&#xff0c;让生活变轻松。其他人则有自己的戒条&#xff1a;正派人惯常做的事于他可能是禁忌&#xff0c;而他自认合理的或许遭他人唾…

机器学习笔记(概念)

一.基础概念 1.机器学习的实质为&#xff1a;根据现有数据,寻找输入数据和输出数据的映射关系/函数 2.机器学习的任务&#xff1a; ​ 回归&#xff1a;输出为连续值 ​ 分类&#xff1a;输出为离散值 ​ 聚类&#xff1a;无标记信息的输出(例如根据瓜的外观分为两部分) …

自动驾驶技术现状与需求分析

随着科技的不断进步和智能化浪潮的席卷&#xff0c;自动驾驶技术已成为当今交通领域的热点话题。本文旨在深入探讨自动驾驶技术的当前发展状况&#xff0c;并对其未来的市场需求进行细致分析。首先&#xff0c;我们将回顾自动驾驶技术的起源、发展历程以及当前的技术水平&#…

探秘SpringBoot默认线程池:了解其运行原理与工作方式(@Async和ThreadPoolTaskExecutor)

文章目录 文章导图Spring封装的几种线程池SpringBoot默认线程池TaskExecutionAutoConfiguration&#xff08;SpringBoot 2.1后&#xff09;主要作用优势使用场景如果没有它 2.1版本以后如何查看参数方式一&#xff1a;通过Async注解--采用ThreadPoolTaskExecutordetermineAsync…

光储充一体化平台解决方案——慧哥充电桩开源系统

慧哥充电桩开源平台 慧哥充电桩开源系统 源码下载地址https://gitee.com/chouleng/lengzicharge-cloud 光储充一体化平台解决方案 一、项目背景和目标 随着新能源汽车的普及和可再生能源的发展&#xff0c;光储充一体化平台应运而生。该平台旨在整合光伏发电、储能系统和充电…

Linux - crond任务调度、at定时任务

1 crontab 进行-定时任务的设置 1&#xff09;概述&#xff1a; 任务调度&#xff1a;是指系统在某个时间执行的特定的命令或程序。 任务调度分类&#xff1a; 系统工作&#xff1a;有些重要的工作必须周而复始地执行。如病毒扫描等个别用户工作&#xff1a;个别用户可能希…

数据库(7)——DDL表操作2

添加字段 ALTER TABLE 表名 ADD 字段名 类型 [COMMENT 注释] [约束]; 可以观察到student_information表中成功添加了名为“class”的字段。 修改字段 修改数据类型 ALTER TABLE 表名 MODIFY 字段名 新数据类型&#xff08;长度&#xff09;; 修改字段名和字段类型 ALTER TABLE…

【机器学习与实现】支持向量机SVM

目录 一、SVM (Support Vector Machine) 概述&#xff08;一&#xff09;支持向量机SVM的主要特点&#xff08;二&#xff09;支持向量与间隔最大化&#xff08;三&#xff09;线性可分/不可分&#xff08;四&#xff09;软间隔 (soft margin) 与核技巧 (kernel trick)&#xf…

[集群聊天服务器]----(九)客户端开发

接着上文的[集群聊天服务器]----(八)群组类、群组操作接口以及业务模块之创建群组&#xff0c;加入群组以及群组聊天开发&#xff0c;项目真正操作&#xff0c;还需要客户端进行相关操作的&#xff0c;接下来我们剖析客户端的实现。 main函数 客户端主要对用户输入的消息进行…

5.21数据库mySQL

服务器存储信息的能力是有限的&#xff0c;需要将信息存储在磁盘上。 存在主要是两个问题&#xff0c;就是将数据从磁盘中读出数据来&#xff0c;将数据从服务器中存储到磁盘上。 那么接下来的问题就是如何对于数据进行存储方便于进行读取&#xff0c;数据库就是起这样的作用…

C++_C++11的学习

1. 统一的列表初始化 1.1&#xff5b;&#xff5d;初始化 在C98 中&#xff0c;标准就已经允许使用花括号 {} 对数组或者结构体元素进行统一的列表初始值设定。而到了C11&#xff0c;标准扩大了用大括号括起的列表 ( 初始化列表 )的使用范围&#xff0c;使其能适用于所有的内…

Python 获取当前IP地址(爬虫代理)

Python 获取当前IP地址&#xff08;爬虫代理&#xff09; 在Python中&#xff0c;获取当前的公网IP地址通常涉及到发送一个请求到外部服务&#xff0c;因为本地IP地址通常只在你的私有网络内部是可见的&#xff0c;而公网IP地址是由你的ISP&#xff08;互联网服务提供商&#x…

J2SE+swing客户端开发进阶总结

Hello &#xff0c; 我是恒。分享一个练手项目一本糊涂账&#xff0c;顺便帮站长宣传一下站点https://how2j.cn 本项目是基于Swing和JDBC开发的图形界面桌面应用&#xff0c;通过这个项目能运用锻炼J2SE知识和技能 结构 ├───src/ │ ├───HutuMainFrame.java │ ├…

Java进阶学习笔记28——StringJoiner

Java中&#xff0c;有没有即能高效&#xff0c;又能实现更方便的拼接呢&#xff1f; StringJoiner&#xff1a; JDK8才开始的&#xff0c;跟StringBuilder一样&#xff0c;也是用来操作字符串的&#xff0c;也可以看成是一个容器&#xff0c;创建之后里面的内容是可变的。 好…

C++发票四要素真伪查验、数电票查验

在数字化转型的浪潮下&#xff0c;财务管理作为企业运营的核心环节之一&#xff0c;正经历着前所未有的变革。近期&#xff0c;随着发票查验接口技术的不断成熟与创新&#xff0c;翔云发票查验接口平台为企业提供了便捷、高效的发票查验服务&#xff0c;极大地提升了企业的财税…

SpringBoot学习小结之RocketMQ

文章目录 前言一、架构设计1.1 架构图1.2 消息1.3 工作流程 二、部署2.1 单机2.2 集群 三、Springboot Producter3.1 准备3.2 pom依赖、yml 配置3.3 普通消息3.4 顺序、批量、延迟消息3.5 事务消息 四、Springboot Consumer4.1 配置4.2 普通Push消费4.3 回复4.4 集群和广播4.5 …

CompletableFuture的使用(详细)

引入 功能和灵活性&#xff1a; Future&#xff1a;是Java 5引入的接口&#xff0c;用于表示一个异步操作的未来结果。它提供了基本的异步操作支持&#xff0c;如检查是否完成、等待结果以及获取结果&#xff0c;但在处理结果、异常和组合等方面功能有限。 CompletableFuture&a…