当前位置： 首页 > news >正文

ECharts与Excel的结合实战

news 2026/5/27 22:20:29

引言：本文是一篇ECharts和Excel实战的记录。将Excel与ECharts产生火花，从Excel读取数据然后在ECharts上展示。

1.柱状图前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>echarts-bar</title><script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="js/echarts.min.js"></script><script src="../../plugins/element-ui/index.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:2000px; height:700px;"></div><button onclick="generateExcel()">导出Excel文件</button>
<script type="text/javascript">function generateExcel() {fetch('http://localhost:8080/backend/page/eChart/excel').then(response => response.json()).then(data => {const url = window.URL.createObjectURL(new Blob([data]));const a = document.createElement('a');a.href = url;a.download = '菜品销量.xlsx'; // 你可以根据需要设置文件名a.click();});}// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.setOption({title: {text: '菜品销售情况柱形图'},tooltip: {},legend: {data: ['销量']},xAxis: {data: [],axisLabel: {interval: 0}},yAxis: {},series: [{name: '销量',type: 'bar',data: [],itemStyle: {color: '#91cc75',shadowColor: '#91cc75',borderType: 'dashed',opacity: 0.5,borderWidth:1},}]});myChart.showLoading();var names = [];    //类别数组（实际用来盛放X轴坐标值）var nums = [];    //销量数组（实际用来盛放Y坐标值）$.ajax({type: "get",async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url: "list",    //请求发送到TestServlet处data: {},dataType: "json",        //返回数据形式为jsonsuccess: function (result) {//请求成功时执行该函数内容，result即为服务器返回的json对象var data = result.data;console.log(data);if (data) {for (var i = 0; i < data.length; i++) {names.push(data[i].name);    //挨个取出类别并填入类别数组}for (var i = 0; i < data.length; i++) {nums.push(data[i].count);    //挨个取出销量并填入销量数组}myChart.hideLoading();    //隐藏加载动画myChart.setOption({        //加载数据图表xAxis: {data: names},series: [{// 根据名字对应到相应的系列name: '销量',data: nums}]});}},error: function () {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}})
</script>
</body>
</html>

2.饼图前端代码

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head><meta charset="utf-8"><title>echarts-pie</title><script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="js/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<button onclick="generateExcel()">导出Excel文件</button><script type="text/javascript">function generateExcel() {fetch('http://localhost:8080/backend/page/eChart/excel').then(response => response.json()).then(data => {const url = window.URL.createObjectURL(new Blob([data]));const a = document.createElement('a');a.href = url;a.download = '菜品销量.xlsx'; // 你可以根据需要设置文件名a.click();});}var mychart1 = echarts.init(document.getElementById('main'));mychart1.setOption({title: {text: '菜品销量统计饼状图',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: []}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}});mychart1.showLoading();var names=[];var nums=[];$.ajax({type : "get",async : false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "list",    //请求发送到TestServlet处data : {},dataType : "json",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象var data = result.data;if (data) {for(var i=0;i<data.length;i++){names.push(data[i].name);    //挨个取出类别并填入类别数组nums[i] = {value: data[i].count,name:data[i].name};}/*          for(var i=0;i<data.length;i++){nums.push(data[i].count);    //挨个取出销量并填入销量数组}*/mychart1.hideLoading();    //隐藏加载动画mychart1.setOption({        //加载数据图表series: {type: 'pie',radius: '55%',center: ['50%','60%'],data: nums,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgb(0,0,0,0.5)'}}},});}},error : function() {//请求失败时执行该函数alert("图表请求数据失败!");mychart1.hideLoading();}})window.addEventListener('resize', mychart1.resize);
</script>
</body>
</html>

3.后端通用代码

3.1生成Excel表格

 @RequestMapping(value = "excel", method = RequestMethod.GET)public R<String> getExcel(){File file = new File(path);QueryWrapper<Dish> wrapper = new QueryWrapper<>();wrapper.select("name", "count");List<Dish> list = dishService.list(wrapper);ArrayList<Map<String, Object>> rows = new ArrayList<>();for (Dish dish : list) {Map<String, Object> row = new LinkedHashMap<>();row.put("菜品", dish.getName());row.put("销量", dish.getCount());rows.add(row);}// 通过工具类创建writerExcelWriter writer = ExcelUtil.getWriter(path);// 合并单元格后的标题行，使用默认标题样式writer.merge(1 ,"菜品销量统计");// 一次性写出内容，使用默认样式，强制输出标题writer.write(rows,true);// 关闭writer，释放内存writer.close();r.setCode(1);r.setData("文件导出成功");return r;}

3.2Excel表格数据导入ECharts

        public static final String path = "D:\\java\\excel\\test.xlsx"; File file = new File(path);FileInputStream input = new FileInputStream(file);MultipartFile multipartFile = new MockMultipartFile("file", file.getName(), "text/plain", IOUtils.toByteArray(input));// 1.获取上传文件输入流InputStream inputStream = null;inputStream = multipartFile.getInputStream();// 2.应用HUtool ExcelUtil获取ExcelReader指定输入流和sheetExcelReader excelReader = ExcelUtil.getReader(inputStream, "sheet1");// 可以加上表头验证// 3.读取第二行到最后一行数据//List<List<Object>> read = excelReader.read(1, excelReader.getRowCount());return excelReader.readAll();

相关文章：

ECharts与Excel的结合实战

引言&#xff1a;本文是一篇ECharts和Excel实战的记录。将Excel与ECharts产生火花&#xff0c;从Excel读取数据然后在ECharts上展示。 1.柱状图前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title…...

编程日记 2023/11/29 18:58:05

UDP的特点及应用场景

目录 UDP特点 应用场景 总结 User Datagram Protocol&#xff08;UDP&#xff0c;用户数据报协议&#xff09;是互联网协议套件中的一种传输层协议。与TCP不同&#xff0c;UDP是一种无连接的、不可靠的协议。 UDP特点 要知道UDP可以用来做什么&#xff0c;首先我们要知道它…...

编程日记 2023/11/29 18:57:05

Python开发——工具篇 Pycharm的相关配置，Python相关操作 持续更新

前言 本篇博客是python开发的工具篇相关&#xff0c;介绍pycharm的使用和相关配置&#xff0c;收录python的相关操作&#xff0c;比如如何启动jupyter。 目录 前言引出Pycharmpycharm如何不同等级日志显示不同颜色设置不同pycharm的python环境 Python操作如何启动Jupyter 总结…...

编程日记 2023/11/29 18:56:04

【深度学习】卷积神经网络结构组成与解释

卷积神经网络是以卷积层为主的深度网路结构&#xff0c;网络结构包括有卷积层、激活层、BN层、池化层、FC层、损失层等。卷积操作是对图像和滤波矩阵做内积&#xff08;元素相乘再求和&#xff09;的操作。 1. 卷积层 常见的卷积操作如下&#xff1a; 卷积操作解释图解标准卷…...

编程日记 2023/11/29 18:55:03

从源码解析Containerd容器启动流程

从源码解析Containerd容器启动流程 本文从源码的角度分析containerd容器启动流程以及相关功能的实现。 本篇containerd版本为v1.7.9。 更多文章访问 https://www.cyisme.top 本文从ctr run命令出发&#xff0c;分析containerd的容器启动流程。 ctr命令 查看文件cmd/ctr/comman…...

编程日记 2023/11/29 18:54:02

引迈-JNPF低代码项目技术栈介绍

从 2014 开始研发低代码前端渲染&#xff0c;到 2018 年开始研发后端低代码数据模型&#xff0c;发布了JNPF开发平台。 谨以此文针对 JNPF-JAVA-Cloud微服务 进行相关技术栈展示&#xff1a; 1. 项目前后端分离 前端采用Vue.js&#xff0c;这是一种流行的前端JavaScript框架&a…...

编程日记 2023/11/29 18:53:01

如何处理枚举类型(下)

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 上一篇我们通过编写MyB…...

编程日记 2023/11/29 18:52:00

wsj0数据集原始文件.wv1.wv2转换成wav文件

文章目录 准备一、获取WSJO数据集二、安装sph2pipe三、转换代码四、结果展示 ​ 最近做语音分离实验需要用到wsj0-2mix数据集&#xff0c;但是从李宏毅语音分离教程里面获取的wsj0-2mix只有一部分。从网上获取到了完整的WSJO数据集后&#xff0c;由于原始的语音文件后缀是wv1或…...

编程日记 2023/11/29 18:50:59

Flask Session 登录认证模块

Flask 框架提供了强大的 Session 模块组件&#xff0c;为 Web 应用实现用户注册与登录系统提供了方便的机制。结合 Flask-WTF 表单组件&#xff0c;我们能够轻松地设计出用户友好且具备美观界面的注册和登录页面&#xff0c;使这一功能能够直接应用到我们的项目中。本文将深入探…...

编程日记 2023/11/29 18:49:58

【运维】hive 高可用详解： Hive MetaStore HA、hive server HA原理详解；hive高可用实现

文章目录 一. hive高可用原理说明1. Hive MetaStore HA2. hive server HA 二. hive高可用实现1. 配置2. beeline链接测试3. zookeeper相关操作 一. hive高可用原理说明 1. Hive MetaStore HA Hive元数据存储在MetaStore中&#xff0c;包括表的定义、分区、表的属性等信息。 hi…...

编程日记 2023/11/29 18:48:57

C#开发的OpenRA游戏之属性SelectionDecorations（13）

C#开发的OpenRA游戏之属性SelectionDecorations（13） 在前面分析SelectionDecorations属性类时，会发现它有下面这个属性： public class SelectionDecorations : SelectionDecorationsBase, IRender { readonly Interactable interactable; 它是定义了一个Interactabl…...

编程日记 2023/11/29 18:47:56

接手了一个外包开发的项目，我感觉我的头快要裂开了~

嗨&#xff0c;大家好&#xff0c;我是飘渺。 最近&#xff0c;我和小伙伴一起接手了一个由外包团队开发的微服务项目&#xff0c;这个项目采用了当前流行的Spring Cloud Alibaba微服务架构&#xff0c;并且是基于一个“大名鼎鼎”的微服务开源脚手架&#xff08;附带着模块代…...

编程日记 2023/11/29 18:46:55

git常规使用方法，常规命令

Git是一种分布式版本控制系统&#xff0c;它可以记录软件的历史版本&#xff0c;并提供了多人协作开发、版本回退等功能。以下是Git的基本使用方法&#xff1a; 安装Git&#xff1a;下载安装包并进行安装&#xff0c;安装完成后在命令行中输入 git --version 进行验证。 初始化…...

编程日记 2023/11/29 18:45:53

【JavaScript】3.3 JavaScript工具和库

文章目录 1. 包管理器2. 构建工具3. 测试框架4. JavaScript 库总结 在你的 JavaScript 开发之旅中&#xff0c;会遇到许多工具和库。这些工具和库可以帮助你更有效地编写和管理代码&#xff0c;提高工作效率。在本章节中&#xff0c;我们将探讨一些常见的 JavaScript 工具和库&…...

编程日记 2023/11/29 18:44:52

开发基于 ChatGPT 分析热点事件并生成文章的网站应用【热点问天】把百度等热点用chatGPT来对热点事件分析海量发文章 开发步骤 多种方式获取利润

这样做的优点&#xff1a; 1.不用每个人都问chatGPT同样的问题。 2.已经生成的&#xff0c;反应快速。 3.内容分析的客观&#xff0c;真实&#xff0c;基于数据&#xff0c;无法造假。 4.无其它目的这种基于 ChatGPT 分析热点事件并生成文章的网站&#xff0c;可以通过多种方式…...

编程日记 2023/11/29 18:43:50

龙迅LT8668SXC适用于TPYE-C/DP/HDMI转EDP/VBO同时环出一路HDMI/DP，支持分辨率缩放功能。

1.描述 应用功能&#xff1a;LT8668SXC适用于TYPE-C/DP1.4/HDMI2.1转EDP/VBO同时环出一路HDMI/DP应用方案 分辨率&#xff1a;高达8K30HZ&#xff0c; 工作温度范围&#xff1a;−40C to 85C 产品封装&#xff1a;QFN88 (10*10)最小包装数&#xff1a;1680pcs 2.产品应用 •视频…...

编程日记 2023/11/29 18:42:49

跳板机原理

跳板机原理 跳板机&#xff08;Jump Server&#xff09;是一种网络安全设备或计算机&#xff0c;用于管理和保护内部网络中的其他计算机或系统。跳板机通常位于内部网络和外部网络之间&#xff0c;充当连接这两个网络的中间节点或跳板。以下是跳板机的主要功能和用途&#xff1…...

编程日记 2023/11/29 18:41:48

璞华大数据产品入选中国信通院“铸基计划”

武汉璞华大数据技术有限公司HawkEye设备数字化管理平台产品&#xff0c;凭借优秀的产品技术能力&#xff0c;通过评估后&#xff0c;入选中国信通院“铸基计划”《高质量数字化转型产品及服务全景图&#xff08;2023&#xff09;》的工业数字化领域。 “铸基计划”是中国信通院…...

编程日记 2023/11/29 18:39:45

1146. 新的开始，prim算法，超级原点

发展采矿业当然首先得有矿井&#xff0c;小 FF 花了上次探险获得的千分之一的财富请人在岛上挖了 n 口矿井&#xff0c;但他似乎忘记了考虑矿井供电问题。 为了保证电力的供应&#xff0c;小 FF 想到了两种办法&#xff1a; 在矿井 i 上建立一个发电站&#xff0c;费用为 vi&…...

编程日记 2023/11/29 18:38:44

HTTP常见响应码

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是用于在客户端和服务器之间传输资源的协议。HTTP响应码&#xff08;HTTP status code&#xff09;用来表示服务器对请求的处理结果。以下是常见的HTTP响应码及其概要&#xff1a; 1. 响应码大类&#xff1a; 主要分…...

编程日记 2023/11/29 18:36:41

Allegro等长设置翻车实录：拓扑模板法的3个坑与手工PinPair的救赎

Allegro等长设计避坑指南&#xff1a;从拓扑模板到精准PinPair的实战演进在高速PCB设计中&#xff0c;等长匹配如同精密钟表里的齿轮啮合&#xff0c;差之毫厘便可能导致整个系统时序崩塌。当设计从简单的点对点结构升级到多负载复杂拓扑时&#xff0c;Allegro用户常陷入两种典…...

编程新知 2026/5/26 3:32:09

别再手动改路径了！用LabVIEW + MATLAB Script做自动化测试，这份环境配置指南让你效率翻倍

LabVIEW与MATLAB深度整合&#xff1a;构建自动化测试系统的工程实践指南在工业自动化与测试测量领域&#xff0c;LabVIEW和MATLAB的组合堪称黄金搭档。LabVIEW擅长硬件接口和实时控制&#xff0c;而MATLAB在算法开发和数据分析方面具有无可比拟的优势。本文将深入探讨如何将两者…...

编程新知 2026/5/26 2:59:49

第3篇：系统透视——信息部门如何构建“税务友好型”IT架构

本篇导读&#xff1a;如果你是信息总监或IT负责人&#xff0c;请通读全文&#xff0c;尤其是“系统合规设计的三必须”和“现场检查SOP”&#xff1b;如果你是财税人员&#xff0c;请重点阅读“研产供销全链条的系统对接要求”和“与IT部门的协作要点”&#xff1b;如果你是老板…...

编程新知 2026/5/26 1:19:05

Python合并Excel文档

有若干个Excel文档&#xff0c;每个文档格式一致&#xff0c;及第一行为文件标题&#xff0c;第二行为表格表头&#xff08;表头不完全一致&#xff09;。现需要将他们合并。合并规则为&#xff1a;去掉每个文档的第一行&#xff0c;以第二行为表头&#xff0c;将每个文档的第三…...

编程新知 2026/5/26 1:13:04

从BUG()到panic：深入Linux 5.4内核，看异常处理如何层层递进

从BUG()到panic&#xff1a;Linux内核异常处理的防御体系全解析当你在深夜调试一个内核模块时&#xff0c;突然屏幕刷出一串红色警告——这可能是每个Linux内核开发者都经历过的噩梦时刻。但你是否想过&#xff0c;从第一行警告出现到系统完全崩溃&#xff0c;内核究竟经历了怎…...

编程新知 2026/5/26 0:34:24

保姆级避坑指南：在Ubuntu 22.04上搞定ROS2 Humble、PX4与Gazebo的联合仿真（附Empy版本降级）

保姆级避坑指南&#xff1a;Ubuntu 22.04下ROS2 Humble与PX4联合仿真的21个关键陷阱当你在Ubuntu 22.04上第一次尝试搭建ROS2 Humble、PX4与Gazebo的联合仿真环境时&#xff0c;可能会遇到比预期更多的挑战。这不是一个简单的"复制粘贴命令就能完成"的任务——版本冲…...

编程新知 2026/5/25 23:12:51

交流电机驱动器的三种控制模式：前沿切相、后沿切相与同步模式详解

1. 项目概述&#xff1a;一个能玩出花的交流电机驱动器在汽车改装、工业控制或者一些创客项目里&#xff0c;驱动一个交流电机听起来简单&#xff0c;但想让它听话地变速、正反转&#xff0c;甚至实现软启动和精确同步&#xff0c;往往就得搬出笨重又昂贵的工业变频器。今天分享…...

编程新知 2026/5/25 22:10:18

LaTeX公式一键转Word：3步告别数学公式编辑烦恼

LaTeX公式一键转Word&#xff1a;3步告别数学公式编辑烦恼 【免费下载链接】LaTeX2Word-Equation Copy LaTeX Equations as Word Equations, a Chrome Extension 项目地址: https://gitcode.com/gh_mirrors/la/LaTeX2Word-Equation 还在为Word文档中的数学公式编辑而抓狂…...

编程新知 2026/5/25 21:17:35

对比按量计费与Token Plan套餐的实际成本差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比按量计费与Token Plan套餐的实际成本差异 在构建和运营基于大模型的应用时&#xff0c;成本控制是一个核心的工程考量。Taotok…...

编程新知 2026/5/25 18:30:37

ubuntu环境下为python项目配置taotoken多模型api密钥与端点

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Ubuntu环境下为Python项目配置Taotoken多模型API密钥与端点 1. 准备工作 在Ubuntu系统上为Python项目接入Taotoken&#xff0c;首…...

编程新知 2026/5/25 18:30:30