springboot+echarts +mysql制作数据可视化大屏（四图）

作者水平低，如有错误，恳请指正！谢谢！！！！！

项目简单，适合大学生参考

分类专栏还有其它的可视化博客哦！

专栏地址：https://blog.csdn.net/qq_55906442/category_11906804.html?spm=1001.2014.3001.5482

成果展示：

 一、数据源

1）可以使用自己的MySQL数据库；

2）使用我提供的数据。（要数据私信/留言——>留下邮箱即可）

二、所需工具

MySQL、IDEA、jdk1.8、Maven等等，总之编写工具要准备好，环境要搭建好

三、项目框架搭建

参考我博客的项目框架搭建，从3.1看到4.3即可springboot+mybatis+echarts +mysql制作数据可视化大屏_spring + 可视化大屏_一个人的牛牛的博客-CSDN博客

四、代码编写

代码简单，后端代码都写在一起了，没有区分controller等等，前端也是一样，没有单独写js等等。

4.1 区域销量统计条形图

4.1.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class Big1 {private final JdbcTemplate jdbcTemplate;@Autowiredpublic Big1(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/chart-data")public Map<String, Object> getChartData() {String query = "SELECT region_name, COUNT(*) AS count FROM ads_area_topic GROUP BY region_name";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> labels = new ArrayList<>();List<Integer> values = new ArrayList<>();for (Map<String, Object> row : result) {String regionName = (String) row.get("region_name");Integer count = ((Number) row.get("count")).intValue();labels.add(regionName);values.add(count);}Map<String, Object> data = new HashMap<>();data.put("labels", labels);data.put("values", values);return data;}
}

验证接口：运行项目，浏览器访问http://localhost:8080/chart-data

4.1.2 前端

<!DOCTYPE html>
<html>
<head><title>区域销量统计</title><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--    <script src="static/js/echarts.min.js"></script>-->
<!--    <script src="static/js/jquery-3.6.0.min.js"></script>--><style>html, body {height: 100%;margin: 0;padding: 0;}#chart {width: 100%;height: 100%;min-height: 280px; /* 设置最小高度，防止内容过小时显示异常 */}</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">var chart = echarts.init(document.getElementById('chart'));// 监听窗口大小变化事件window.addEventListener('resize', function() {chart.resize(); // 调整图表大小});// 使用Ajax异步获取数据$.ajax({url: '/chart-data',type: 'GET',dataType: 'json',success: function(data) {var option = {title: {text: '区域销量统计',textStyle: {textAlign: 'center'}},tooltip: {},xAxis: {data: data.labels},yAxis: {},series: [{name: 'Count',type: 'bar',data: data.values,itemStyle: {color: function(params) {// 设置背景颜色var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'];return colorList[params.dataIndex];}}}]};chart.setOption(option);}});
</script>
</body>
</html>

验证页面：运行项目，浏览器访问http://localhost:8080/big1.html

4.2  订单金额折线图

4.2.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class Big2Controller {private final JdbcTemplate jdbcTemplate;@Autowiredpublic Big2Controller(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/chart-data2")public Map<String, Object> getChartData() {String query = "SELECT dt, order_amount FROM ads_order_daycount";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> labels = new ArrayList<>();List<Integer> values = new ArrayList<>();for (Map<String, Object> row : result) {String dt = row.get("dt").toString();Integer orderAmount = ((Number) row.get("order_amount")).intValue();labels.add(dt);values.add(orderAmount);}Map<String, Object> data = new HashMap<>();data.put("labels", labels);data.put("values", values);return data;}
}

 验证接口：运行项目，浏览器访问​​​​​​​http://localhost:8080/chart-data2

4.2.2 前端

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>折线图</title><style>html, body {height: 100%;margin: 0;padding: 0;}#chart-container {width: 100%;height: 100%;min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */}</style>
</head>
<body>
<div id="chart-container"></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>// 使用 Axios 发送 AJAX 请求axios.get('/chart-data2').then(function (response) {// 处理从后端返回的数据const data = response.data;// 提取 X 轴和 Y 轴数据const xData = data.labels;const yData = data.values;// 创建图表const chartContainer = document.getElementById('chart-container');const chart = echarts.init(chartContainer);// 监听窗口大小变化事件window.addEventListener('resize', function() {chart.resize(); // 调整图表大小});const option = {title: {text: '订单金额折线图'},xAxis: {type: 'category',data: xData},yAxis: {type: 'value'},series: [{type: 'line',data: yData,areaStyle: {color: 'rgba(0, 128, 255, 0.3)' // 设置背景颜色}}]};// 渲染图表chart.setOption(option);}).catch(function (error) {console.log(error);});
</script>
</body>
</html>

验证页面：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/big2.html

4.3  平均支付时间统计

4.3.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class Big3Controller {private final JdbcTemplate jdbcTemplate;@Autowiredpublic Big3Controller(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/chart-data3")public Map<String, Object> getChartData() {String query = "SELECT dt, payment_avg_time FROM ads_payment_daycount";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> labels = new ArrayList<>();List<Integer> values = new ArrayList<>();for (Map<String, Object> row : result) {String dt = row.get("dt").toString();Integer paymentAvgTime = ((Number) row.get("payment_avg_time")).intValue();labels.add(dt);values.add(paymentAvgTime);}Map<String, Object> data = new HashMap<>();data.put("labels", labels);data.put("values", values);return data;}
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/chart-data3

4.3.2 前端

<!DOCTYPE html>
<html>
<head><title>平均支付时间统计</title><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>html, body {height: 100%;margin: 0;padding: 0;}#chart {width: 100%;height: 100%;min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */}</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">var chart = echarts.init(document.getElementById('chart'));// 监听窗口大小变化事件window.addEventListener('resize', function() {chart.resize(); // 调整图表大小});// 使用Ajax异步获取数据$.ajax({url: '/chart-data3',type: 'GET',dataType: 'json',success: function(data) {var option = {title: {text: '平均支付时间统计',textStyle: {textAlign: 'center'}},tooltip: {},angleAxis: {},radiusAxis: {type: 'category',data: data.labels},polar: {},series: [{name: 'Avg Time',type: 'bar',data: data.values,coordinateSystem: 'polar',itemStyle: {color: function(params) {// 设置背景颜色var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'];return colorList[params.dataIndex % colorList.length];}}}]};chart.setOption(option);}});
</script>
</body>
</html>

 验证页面：运行项目，浏览器访问​​​​​​​http://localhost:8080/big3.html

4.4  订单金额统计

4.4.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class Big4Controller {private final JdbcTemplate jdbcTemplate;@Autowiredpublic Big4Controller(JdbcTemplate jdbcTemplate) {this.jdbcTemplate = jdbcTemplate;}@GetMapping("/chart-data4")public Map<String, Object> getChartData() {String query = "SELECT dt, order_amount FROM ads_payment_daycount";List<Map<String, Object>> result = jdbcTemplate.queryForList(query);List<String> labels = new ArrayList<>();List<Integer> values = new ArrayList<>();for (Map<String, Object> row : result) {String dt = row.get("dt").toString();Integer orderAmount = ((Number) row.get("order_amount")).intValue();labels.add(dt);values.add(orderAmount);}Map<String, Object> data = new HashMap<>();data.put("labels", labels);data.put("values", values);return data;}
}

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8080/chart-data4

4.4.2 前端

<!DOCTYPE html>
<html>
<head><title>订单金额统计</title><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>html, body {height: 100%;margin: 0;padding: 0;}#chart {width: 100%;height: 100%;min-height: 300px;}</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">var chart = echarts.init(document.getElementById('chart'));// 监听窗口大小变化事件window.addEventListener('resize', function() {chart.resize(); // 调整图表大小});// 使用Ajax异步获取数据$.ajax({url: '/chart-data4',type: 'GET',dataType: 'json',success: function(data) {var option = {title: {text: '订单金额统计',textStyle: {textAlign: 'center'}},tooltip: {trigger: 'item',formatter: '{b}: {c} ({d}%)'},series: [{name: '订单金额',type: 'pie',radius: '50%',data: data.values.map(function(value, index) {return {name: data.labels[index],value: value};})}]};chart.setOption(option);}});
</script>
</body>
</html>

验证页面：运行项目，浏览器访问​​​​​​​http://localhost:8080/big4.html

五、大屏编写

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>大屏可视化</title><style>/* CSS样式 */body, html {height: 100%;width: 100%;margin: 0;padding: 0;}#header {width: 100%;height: 8%;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;font-size: 20px;font-weight: bold;}#content {width: 100%;height: 92%;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;padding: 20px;}.chart-container {width: 49%;height: 48%;background-color: #ffffff;margin-bottom: 20px;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);}.chart-container:not(:last-child) {margin-right: 5px;}</style>
</head>
<body style="background-color: bisque"><div id="header"><h2>销售数据平面一览大屏</h2></div><div id="content"><div class="chart-container" id="chart1"><iframe src="big1.html" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="chart-container" id="chart2"><iframe src="big2.html" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="chart-container" id="chart3"><iframe src="big3.html" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="chart-container" id="chart4"><iframe src="big4.html" style="width: 100%; height: 100%; border: none;"></iframe></div></div><script src="https://cdn.jsdelivr.net/npm/d3@7.0.0/dist/d3.min.js"></script><script></script>
</body>
</html>

运行项目，浏览器访问​​​​​​​http://localhost:8080/large%20screen.html

注：http://localhost:8080/加上HTML的文件名都能够查看相应的图！

要码源的私聊/评论留下邮箱号，压缩包包括项目源码、数据sql文件，readme.txt。

声明：作品仅可作学习使用​​​​​​​。

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

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

相关文章

操作系统12：I/O系统的功能、模型、接口及 I/O 设备和设备控制器

操作系统12：I/O系统的功能、模型、接口及 I/O 设备和设备控制器

目录 1、I/O系统的功能、模型和接口 &#xff08;1&#xff09;I/O系统的基本功能 1.1 - 隐藏物理设备的细节 1.2 - 与设备的无关性 1.3 - 提高处理机和I/O设备的利用率 1.4 - 对 I/O 设备进行控制 1.5 - 确保对设备的正确共享 1.6 - 错误处理 &#xff08;2&#xff…
阅读更多...
TCP/IP出现的背景及其历史【图解TCP/IP（笔记八）】

TCP/IP出现的背景及其历史【图解TCP/IP（笔记八）】

文章目录 TCP/IP出现的背景及其历史从军用技术的应用谈起ARPANET的诞生TCP/IP的诞生UNIX系统的普及与互联网的扩张商用互联网服务的启蒙 TCP/IP出现的背景及其历史 从军用技术的应用谈起 20世纪60年代&#xff0c;很多大学和研究机构都开始着力于新的通信技术。其中有一家以美…
阅读更多...
DeepSpeed-Chat 打造类ChatGPT全流程 笔记二之监督指令微调

DeepSpeed-Chat 打造类ChatGPT全流程 笔记二之监督指令微调

文章目录 系列文章0x0. 前言0x1. &#x1f415; Supervised finetuning (SFT) 教程翻译&#x1f3c3; 如何训练模型&#x1f3c3; 如何对SFT checkpoint进行评测?&#x1f481; 模型和数据☀️来自OPT-1.3B及其SFT变体&#xff08;使用不同微调数据&#xff09;的提示示例☀️…
阅读更多...
你真的了解JS垃圾回收机制吗？

你真的了解JS垃圾回收机制吗？

目录 前言 堆栈内存管理 JS垃圾回收机制 标记清除&#xff08;Mark and Sweep&#xff09; 标记阶段 清除阶段 标记清除的特点 优点 缺点 引用计数&#xff08;Reference Counting&#xff09; 引用计数器的维护 引用计数的跟踪 垃圾回收的触发 回收对象 引用计…
阅读更多...
第23章：范式

第23章：范式

一、范式 1.什么是范式 关于数据表设计的基本原则&#xff0c;规则就是范式NF。 2.范式都包括哪些&#xff1f; 第一范式&#xff08;1NF&#xff09;、第二范式&#xff08;2NF&#xff09;、第三范式&#xff08;3NF&#xff09;、巴斯-科德范式&#xff08;BCNF - Boyce…
阅读更多...
消息队列黄金三剑客：RabbitMQ、RocketMQ和Kafka全面对决，谁是最佳选择？

消息队列黄金三剑客：RabbitMQ、RocketMQ和Kafka全面对决，谁是最佳选择？

1、应用场景 1.RabbitMQ&#xff1a; 适用于易用性和灵活性要求较高的场景 异步任务处理&#xff1a;RabbitMQ提供可靠的消息传递机制&#xff0c;适用于处理异步任务&#xff0c;例如将耗时的任务放入消息队列中&#xff0c;然后由消费者异步处理&#xff0c;提高系统的响应…
阅读更多...
linux 如何挂载fat32格式u盘，如何挂载NTFS 文件系统的硬盘

linux 如何挂载fat32格式u盘，如何挂载NTFS 文件系统的硬盘

linux系统默认可以识别fat32u盘&#xff0c;对ntfs格式u盘不能识别 具体挂载方式如下 1、插入u盘 2、mkdir /mnt/usb 此命令用于创建挂载u盘的目录&#xff0c;只需创建一次就可以&#xff0c;若已经存在则不需要再次创建 3、fdisk -l 找到u盘路径 上图显示的sdb1,sdb2,sdb5…
阅读更多...
JMeter常用业务知识和组件（5）

JMeter常用业务知识和组件（5）

这里写目录标题 一、信息头管理器1案例、测试开发平台登录接口2案例、测试平台获取测试用例接口 二、HTTP请求默认值案例1&#xff1a;实现登录接口测试 三、Cookie管理器&#xff08;有问题&#xff09;案例1&#xff1a;开源项目TPshop商城登录案例案例2&#xff1a;(有问题)…
阅读更多...
常用数据回归建模算法总结记录

常用数据回归建模算法总结记录

本文的主要目的是总结记录日常学习工作中常用到的一些数据回归拟合算法&#xff0c;对其原理简单总结记录&#xff0c;同时分析对应的优缺点&#xff0c;以后需要的时候可以直接翻看&#xff0c;避免每次都要查询浪费时间&#xff0c;欢迎补充。 (1)线性回归 (Linear Regressio…
阅读更多...
【云原生｜Docker系列第1篇】什么？你竟然还不知道Docker？

【云原生｜Docker系列第1篇】什么？你竟然还不知道Docker？

欢迎来到Docker入门系列的第一篇博客&#xff01;在当今的应用开发和部署领域&#xff0c;Docker已经成为一项极具吸引力的关键技术。本篇博客将为您介绍Docker的基本概念和作用&#xff0c;并解释为什么它成为现代应用开发和部署的终极利器。无论您是开发人员、系统管理员还是…
阅读更多...
Cesium 实战 - AGI_articulations 扩展：模型自定义关节动作

Cesium 实战 - AGI_articulations 扩展：模型自定义关节动作

Cesium 实战 - AGI_articulations 扩展&#xff1a;模型自定义关节动作 简要概述两种方式实现模型组件动作模型添加关节&#xff08;articulations&#xff09;1.导入模型&#xff08;J15.glb&#xff09;2.查看模型内部组件信息&#xff08;名称&#xff09;4.将需要J15.glb复…
阅读更多...
java版本Spring Cloud + Spring Boot +二次开发+企业电子招标采购系统源码

java版本Spring Cloud + Spring Boot +二次开发+企业电子招标采购系统源码

一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点&#xff1a;对草稿进行编辑&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023