后端加前端Echarts画图示例全流程(折线图,饼图,柱状图)

本文将带领读者通过一个完整的Echarts画图示例项目,演示如何结合后端技术(使用Spring Boot框架)和前端技术(使用Vue.js或React框架)来实现数据可视化。我们将实现折线图、饼图和柱状图三种常见的数据展示方式,通过具体的代码和步骤让读者掌握从零开始搭建项目到展示图表的全过程。

开发环境

后端

SpringBoot  2.6.13

Mybatis-Plus 3.4.3

前端

原生JavaScript

前期准备

数据库创建语句

CREATE TABLE sales_data (id INT AUTO_INCREMENT PRIMARY KEY,month VARCHAR(7) NOT NULL,amount DECIMAL(10, 2) NOT NULL
);

具体实现 

实体类

@Data
@TableName("sales_data")
public class SalesRecord {@TableId(type = IdType.AUTO)private Long id;private String month;private Double amount;
}

Mapper层

@Mapper
public interface SalesRecordMapper extends BaseMapper<SalesRecord> {// 自定义查询方法,根据月份范围查询销售记录@Select("SELECT * FROM sales_data WHERE month BETWEEN #{startMonth} AND #{endMonth}")List<SalesRecord> findByMonthBetween(@Param("startMonth") String startMonth, @Param("endMonth") String endMonth);
}

Service层

public interface SalesRecordService {List<SalesRecord> getAllSalesRecords();List<SalesRecord> getSalesRecordsByMonthRange(String startMonth, String endMonth);
}

Impl层

@Service
public class SalesRecordServiceImpl extends ServiceImpl<SalesRecordMapper, SalesRecord> implements SalesRecordService {@Resourceprivate SalesRecordMapper salesRecordMapper;@Overridepublic List<SalesRecord> getAllSalesRecords() {return list();}@Overridepublic List<SalesRecord> getSalesRecordsByMonthRange(String startMonth, String endMonth) {// 实现根据月份范围查询的逻辑,使用 repository 或者自定义 SQL 查询数据库return salesRecordMapper.findByMonthBetween(startMonth, endMonth);}
}

Controller层

@RestController
@RequestMapping("/api/sales")
public class SalesRecordController {private final SalesRecordService salesRecordService;@Autowiredpublic SalesRecordController(SalesRecordService salesRecordService) {this.salesRecordService = salesRecordService;}@GetMapping("/records")public List<SalesRecord> getAllSalesRecords() {return salesRecordService.getAllSalesRecords();}@GetMapping("/recordsByMonthRange")public List<SalesRecord> getSalesRecordsByMonthRange(@RequestParam("startMonth") String startMonth,@RequestParam("endMonth") String endMonth) {return salesRecordService.getSalesRecordsByMonthRange(startMonth, endMonth);}}

前端页面

创建路径:src/main/resources/static/sales_bar_chart.html

柱形图(包含按照日期分页)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sales Data Visualization</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><!-- 引入 jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- 时间范围选择表单 -->
<label for="startMonth">开始月份:</label>
<input type="month" id="startMonth" name="startMonth">
<label for="endMonth">结束月份:</label>
<input type="month" id="endMonth" name="endMonth">
<button onclick="updateChart()">更新图表</button><!-- 图表展示 -->
<div id="chart" style="width: 800px; height: 600px;"></div><script>// 初始化页面时渲染默认图表renderDefaultChart();// 渲染默认图表function renderDefaultChart() {var xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8099/api/sales/records');xhr.onload = function () {if (xhr.status === 200) {var salesData = JSON.parse(xhr.responseText);renderChart(salesData);} else {console.error('Failed to fetch sales data:', xhr.statusText);}};xhr.onerror = function () {console.error('Request failed.');};xhr.send();}// 更新图表函数,根据用户选择的时间范围发送请求function updateChart() {var startMonth = document.getElementById('startMonth').value;var endMonth = document.getElementById('endMonth').value;var xhr = new XMLHttpRequest();xhr.open('GET', `http://localhost:8099/api/sales/recordsByMonthRange?startMonth=${startMonth}&endMonth=${endMonth}`);xhr.onload = function () {if (xhr.status === 200) {var salesData = JSON.parse(xhr.responseText);renderChart(salesData);} else {console.error('Failed to fetch sales data:', xhr.statusText);}};xhr.onerror = function () {console.error('Request failed.');};xhr.send();}// 渲染 ECharts 图表function renderChart(data) {var chart = echarts.init(document.getElementById('chart'));var months = data.map(function (item) {return item.month;});var amounts = data.map(function (item) {return item.amount;});var option = {title: {text: 'Monthly Sales Amount'},tooltip: {},xAxis: {data: months},yAxis: {},series: [{name: 'Sales Amount',type: 'bar',data: amounts}]};chart.setOption(option);}
</script>
</body>
</html>

 

饼图

创建路径:src/main/resources/static/pie-chart-ajax.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sales Data Pie Chart</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个具有一定尺寸的 div,用于渲染图表 -->
<div id="pieChart" style="width: 600px; height: 400px;"></div><script>// 使用 AJAX 请求后端数据var xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8099/api/sales/records'); // 修改为实际的后端 API 路径xhr.onload = function () {if (xhr.status === 200) {var salesData = JSON.parse(xhr.responseText);renderPieChart(salesData);} else {console.error('Failed to fetch sales data:', xhr.statusText);}};xhr.onerror = function () {console.error('Request failed.');};xhr.send();// 渲染 ECharts 饼图function renderPieChart(data) {var pieChart = echarts.init(document.getElementById('pieChart'));// 构建饼图所需的数据格式var pieData = data.map(function(item) {return {name: item.month,value: item.amount};});// 配置饼图的选项var option = {title: {text: '销售数据分布'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: data.map(function(item) { return item.month; }) // 设置图例数据},series: [{name: '销售数据',type: 'pie',radius: '55%',center: ['50%', '60%'],data: pieData // 使用从后端获取的数据}]};// 使用配置项设置图表pieChart.setOption(option);}
</script>
</body>
</html>

折线图

创建路径:src/main/resources/static/sales_long_chart.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sales Data Line Chart</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><!-- 引入 jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- 定义一个具有一定尺寸的 div,用于渲染图表 -->
<div id="lineChart" style="width: 800px; height: 600px;"></div><script>// 使用 AJAX 请求后端数据var xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8099/api/sales/records'); // 修改为实际的后端 API 路径xhr.onload = function () {if (xhr.status === 200) {var salesData = JSON.parse(xhr.responseText);renderLineChart(salesData);} else {console.error('Failed to fetch sales data:', xhr.statusText);}};xhr.onerror = function () {console.error('Request failed.');};xhr.send();// 渲染 ECharts 折线图function renderLineChart(data) {var lineChart = echarts.init(document.getElementById('lineChart'));// 构建折线图所需的数据格式var xAxisData = data.map(function(item) {return item.month;});var seriesData = data.map(function(item) {return item.amount;});// 配置折线图的选项var option = {title: {text: '销售数据趋势'},tooltip: {trigger: 'axis',formatter: '{a} <br/>{b} : {c}'},xAxis: {type: 'category',data: xAxisData // 设置 X 轴数据},yAxis: {type: 'value'},series: [{name: '销售额',type: 'line',data: seriesData // 设置折线图数据}]};// 使用配置项设置图表lineChart.setOption(option);}
</script>
</body>
</html>

希望本文对你有所帮助。如果你有任何疑问或建议,欢迎在评论区留言讨论。Happy coding!

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

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

相关文章

黄子韬直播风暴揭秘经济人风波

黄子韬直播风暴&#xff1a;揭秘经纪人风波&#xff0c;真诚道歉小马丁6月27日晚&#xff0c;娱乐圈再次掀起波澜&#xff0c;黄子韬在直播中罕见地谈及了去年那场业界的经纪人风波&#xff0c;并意外地再次回应了与DJ小马丁的演出争议&#xff0c;这无疑让广大粉丝和网友们热血…

葡萄串目标检测YoloV8——从Pytorch模型训练到C++部署

文章目录 软硬件准备数据准备数据处理脚本模型训练模型部署数据分享软硬件准备 训练端 PytorchultralyticsNvidia 3080Ti部署端 fastdeployonnxruntime数据准备 用labelimg进行数据标注 数据处理脚本 xml2yolo import os import glob import xml.etree.ElementTree as ETxm…

黑龙江等保测评视角下的物联网安全策略探索

引言随着物联网技术在黑龙江省各行各业的广泛应用&#xff0c;信息安全问题日益凸显。等保测评作为网络安全保障体系的重要组成部分&#xff0c;对于物联网环境下的数据保护、设备安全及隐私防护具有重要意义。 本文旨在探讨在等保测评框架下&#xff0c;如何构建有效的物联网…

SpringBoot-SpringBoot中文文档

简介 Spring Boot是由Pivotal团队提供的一套开源框架&#xff0c;可以简化spring应用的创建及部署。它提供了丰富的Spring模块化支持&#xff0c;可以帮助开发者更轻松快捷地构建出企业级应用。Spring Boot通过自动配置功能&#xff0c;降低了复杂性&#xff0c;同时支持基于J…

linux 常用的命令、文件路径、其他工具或软件包

命令 sudo apt dist-upgrade 解决显示 暂不升级、未被升级dd if/dev/zero of./rootfs.img bs1G count6 制作一个 6G 的空白镜像。bs 是块字节数&#xff0c;count 是 bs 的个数。dd if./rootfs.img of/dev/sdc2 bs512 烧录 rootfs.img 镜像到 /dev/sdc2。bs 是 512 个字节&…

【51单片机入门】矩阵键盘

文章目录 前言矩阵键盘介绍与检测原理原理图代码讲解总结 前言 在嵌入式系统设计中&#xff0c;键盘输入是一种常见的人机交互方式。其中&#xff0c;矩阵键盘因其简单、方便和易于扩展的特性&#xff0c;被广泛应用于各种设备中。本文将介绍如何使用51单片机来实现矩阵键盘的…

U盘/移动硬盘安装插拔式Ubuntu系统,并将Docker目录挂载到NTFS硬盘

Windows10的WSL2的确给开发人员带来了很多方便&#xff0c;但是仍然有很多缺点。比如&#xff1a;太占系统内存&#xff1b;有些软件无法在WSL2中编译成功&#xff1b;相当于虚拟机&#xff0c;性能不如原装系统。 装双系统&#xff0c;相信大家都不陌生&#xff0c;但它会占用…

若依 ruoyi 分离版 vue 简单的行内编辑实现

需要实现的效果&#xff1a;双击文本 - 修改文本 - 保存修改。 原码&#xff1a;仅文本显示文字内容 <el-table-column label"商品" align"center" prop"goodsName" width"200" v-if"columns[1].visible" /> 实现…

气膜仓库的优势与应用—轻空间

随着现代物流和存储需求的不断增长&#xff0c;传统仓库的建设和运营成本日益增加&#xff0c;企业需要寻找更加灵活、高效和经济的解决方案。在这种背景下&#xff0c;气膜仓库作为一种新型仓储形式&#xff0c;以其独特的优势和广泛的应用前景&#xff0c;逐渐受到市场的青睐…

什么是封装?为什么要封装?

什么是封装&#xff1f; 封装是计算机科学中的一个重要概念&#xff0c;尤其在面向对象编程&#xff08;OOP&#xff09;中占据核心地位。封装主要指的是将数据&#xff08;属性&#xff09;和对这些数据的操作&#xff08;方法&#xff09;组合在一个单元中&#xff08;我们称…

打开数据结构的大门——顺序表详解

前言&#xff1a; 小编在近日刚开始学顺序表&#xff0c;为了巩固学习&#xff0c;小编先写一篇关于顺序表的文章来加强记忆&#xff0c;写完这一篇我将继续书写C语言相关的文章&#xff0c;那么废话不多说&#xff0c;下面小编将打开数据结构的大门&#xff01;顺序表来喽&…

Android中常见的线程池

日常开发中我们常常使用到线程池&#xff0c;其能有效管理线程资源&#xff0c;避免过多线程导致系统资源浪费、又能复用线程资源&#xff0c;避免频繁的创建/销毁线程。在Android中线程池的实现为ThreadPoolExecutor类&#xff0c;本文主要记录该类相关的知识点。 线程池的六…

详述Python环境下配置AI大模型Qwen-72B的步骤

随着人工智能技术的发展&#xff0c;大规模预训练模型如Qwen-72B等逐渐成为研究和应用的重点。本篇博客旨在提供一份详细的指南&#xff0c;帮助Python开发者们在自己的环境中顺利配置并使用Qwen-72B大模型。 请注意&#xff1a;由于Qwen-72B这一模型目前并未公开存在&#xf…

视频监控业务平台LntonCVS国标视频综合管理平台功能及技术优势

随着安防行业的快速进步&#xff0c;传统的视频监控平台正在与先进的技术和互联网技术融合&#xff0c;包括5G通信、GIS、大数据、云计算、边缘计算、AI识别、智能分析和视频直播等。这些技术的整合形成了综合性视频监控管理平台&#xff0c;具备集中管理、多级联网共享、互联互…

【面试系列】网络工程师 高频面试题及详细解答

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来&#xff1a;详细讲解AIGC的概念、核心技术、…

如何深刻理解Redis的底层原理?Redis的运行机制是什么?如何优化Redis提供更高效服务

要深刻理解Redis的底层原理和运行机制&#xff0c;可以从以下几个方面入手&#xff1a; 1. 单线程模型&#xff1a;Redis采用单线程模型&#xff0c;所有的操作都在同一个线程中执行。这种设计可以减少线程切换带来的开销&#xff0c;从而提高性能 。 2. 虽然Redis是单线程的&…

Python日志库logging

日志级别 级别对应的数值: NOTSET&#xff08;0&#xff09;、DEBUG&#xff08;10&#xff09;、INFO&#xff08;20&#xff09;、WARNING&#xff08;30&#xff09;、ERROR&#xff08;40&#xff09;、CRITICAL&#xff08;50&#xff09; INFO、WARNING、ERROR、CRITICA…

华为---OSPF的DR与BDR(六)

9.6 OSPF的DR与BDR 9.6.1 原理概述 在OSPF的广播类型网络和NBMA类型网络中&#xff0c;如果网络中有n台路由器&#xff0c;若任意两台路由器之间都要建立邻接关系&#xff0c;则需要建立n(n-1)/2个邻接关系&#xff0c;即当路由器很多时&#xff0c;则需要建立和维护的邻接关…

6.优化算法之模拟

1.替换所有的问号 . - 力扣&#xff08;LeetCode&#xff09; class Solution {public String modifyString(String s) {char[] sss.toCharArray();int nss.length;for(int i0;i<n;i){if(ss[i]?){for(char cha;ch<z;ch){if((i0||ss[i-1]!ch)&&(in-1||ss[i1]!c…

Processing入门教程

目录&#xff1a; 课程前言认识PROCESSING 关于像素图形代码色彩与填充练习交互关于setup()和draw()第一次进行移动进一步复杂的交互操作代码实现如下&#xff1a;进一步了解PROCESSING 变量使用变量系统内置变量条件语句逻辑运算符循环语句while循环for循环结构化 函数实参对…