ECharts与Excel的结合实战
引言：本文是一篇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的结合实战
引言：本文是一篇ECharts和Excel实战的记录。将Excel与ECharts产生火花，从Excel读取数据然后在ECharts上展示。 1.柱状图前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title…...
UDP的特点及应用场景
目录 UDP特点 应用场景 总结 User Datagram Protocol（UDP，用户数据报协议）是互联网协议套件中的一种传输层协议。与TCP不同，UDP是一种无连接的、不可靠的协议。 UDP特点 要知道UDP可以用来做什么，首先我们要知道它…...
Python开发——工具篇 Pycharm的相关配置，Python相关操作 持续更新
前言 本篇博客是python开发的工具篇相关，介绍pycharm的使用和相关配置，收录python的相关操作，比如如何启动jupyter。 目录 前言引出Pycharmpycharm如何不同等级日志显示不同颜色设置不同pycharm的python环境 Python操作如何启动Jupyter 总结…...
【深度学习】卷积神经网络结构组成与解释
卷积神经网络是以卷积层为主的深度网路结构，网络结构包括有卷积层、激活层、BN层、池化层、FC层、损失层等。卷积操作是对图像和滤波矩阵做内积（元素相乘再求和）的操作。 1. 卷积层 常见的卷积操作如下： 卷积操作解释图解标准卷…...
从源码解析Containerd容器启动流程
从源码解析Containerd容器启动流程 本文从源码的角度分析containerd容器启动流程以及相关功能的实现。 本篇containerd版本为v1.7.9。 更多文章访问 https://www.cyisme.top 本文从ctr run命令出发，分析containerd的容器启动流程。 ctr命令 查看文件cmd/ctr/comman…...
引迈-JNPF低代码项目技术栈介绍
从 2014 开始研发低代码前端渲染，到 2018 年开始研发后端低代码数据模型，发布了JNPF开发平台。 谨以此文针对 JNPF-JAVA-Cloud微服务 进行相关技术栈展示： 1. 项目前后端分离 前端采用Vue.js，这是一种流行的前端JavaScript框架&a…...
如何处理枚举类型(下)
作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO 联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬 上一篇我们通过编写MyB…...
wsj0数据集原始文件.wv1.wv2转换成wav文件
文章目录 准备一、获取WSJO数据集二、安装sph2pipe三、转换代码四、结果展示 最近做语音分离实验需要用到wsj0-2mix数据集，但是从李宏毅语音分离教程里面获取的wsj0-2mix只有一部分。从网上获取到了完整的WSJO数据集后，由于原始的语音文件后缀是wv1或…...
Flask Session 登录认证模块
Flask 框架提供了强大的 Session 模块组件，为 Web 应用实现用户注册与登录系统提供了方便的机制。结合 Flask-WTF 表单组件，我们能够轻松地设计出用户友好且具备美观界面的注册和登录页面，使这一功能能够直接应用到我们的项目中。本文将深入探…...
【运维】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中，包括表的定义、分区、表的属性等信息。 hi…...
C#开发的OpenRA游戏之属性SelectionDecorations（13）
C#开发的OpenRA游戏之属性SelectionDecorations（13） 在前面分析SelectionDecorations属性类时，会发现它有下面这个属性： public class SelectionDecorations : SelectionDecorationsBase, IRender { readonly Interactable interactable; 它是定义了一个Interactabl…...
接手了一个外包开发的项目，我感觉我的头快要裂开了~
嗨，大家好，我是飘渺。 最近，我和小伙伴一起接手了一个由外包团队开发的微服务项目，这个项目采用了当前流行的Spring Cloud Alibaba微服务架构，并且是基于一个“大名鼎鼎”的微服务开源脚手架（附带着模块代…...
git常规使用方法，常规命令
Git是一种分布式版本控制系统，它可以记录软件的历史版本，并提供了多人协作开发、版本回退等功能。以下是Git的基本使用方法： 安装Git：下载安装包并进行安装，安装完成后在命令行中输入 git --version 进行验证。 初始化…...
【JavaScript】3.3 JavaScript工具和库
文章目录 1. 包管理器2. 构建工具3. 测试框架4. JavaScript 库总结 在你的 JavaScript 开发之旅中，会遇到许多工具和库。这些工具和库可以帮助你更有效地编写和管理代码，提高工作效率。在本章节中，我们将探讨一些常见的 JavaScript 工具和库&…...
开发基于 ChatGPT 分析热点事件并生成文章的网站应用【热点问天】把百度等热点用chatGPT来对热点事件分析海量发文章 开发步骤 多种方式获取利润
这样做的优点： 1.不用每个人都问chatGPT同样的问题。 2.已经生成的，反应快速。 3.内容分析的客观，真实，基于数据，无法造假。 4.无其它目的这种基于 ChatGPT 分析热点事件并生成文章的网站，可以通过多种方式…...
龙迅LT8668SXC适用于TPYE-C/DP/HDMI转EDP/VBO同时环出一路HDMI/DP，支持分辨率缩放功能。
1.描述 应用功能：LT8668SXC适用于TYPE-C/DP1.4/HDMI2.1转EDP/VBO同时环出一路HDMI/DP应用方案 分辨率：高达8K30HZ， 工作温度范围：−40C to 85C 产品封装：QFN88 (10*10)最小包装数：1680pcs 2.产品应用 •视频…...
跳板机原理
跳板机原理 跳板机（Jump Server）是一种网络安全设备或计算机，用于管理和保护内部网络中的其他计算机或系统。跳板机通常位于内部网络和外部网络之间，充当连接这两个网络的中间节点或跳板。以下是跳板机的主要功能和用途࿱…...
璞华大数据产品入选中国信通院“铸基计划”
武汉璞华大数据技术有限公司HawkEye设备数字化管理平台产品，凭借优秀的产品技术能力，通过评估后，入选中国信通院“铸基计划”《高质量数字化转型产品及服务全景图（2023）》的工业数字化领域。 “铸基计划”是中国信通院…...
1146. 新的开始，prim算法，超级原点
发展采矿业当然首先得有矿井，小 FF 花了上次探险获得的千分之一的财富请人在岛上挖了 n 口矿井，但他似乎忘记了考虑矿井供电问题。 为了保证电力的供应，小 FF 想到了两种办法： 在矿井 i 上建立一个发电站，费用为 vi&…...
HTTP常见响应码
HTTP（Hypertext Transfer Protocol）是用于在客户端和服务器之间传输资源的协议。HTTP响应码（HTTP status code）用来表示服务器对请求的处理结果。以下是常见的HTTP响应码及其概要： 1. 响应码大类： 主要分…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
LRU 缓存机制详解与实现（Java版） + 力扣解决
📌 LRU 缓存机制详解与实现（Java版） 一、📖 问题背景 在日常开发中，我们经常会使用 缓存（Cache） 来提升性能。但由于内存有限，缓存不可能无限增长，于是需要策略决定&am…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...