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

实现excle表上传生成echarts图

news 2026/3/30 0:49:15

代码如下

```html
<!--这是一个网上关于读取Excel最经典的代码-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><!-- <script src="newjs/js/incubator-echarts-4.8.0/dist/echarts.min.js"></script> --><script src="./echarts.min.js"></script><script src="https://blog-static.cnblogs.com/files/xieyongbin/xlsx.full.min.js"></script><script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head><body><form><input type="file" name="file" onchange="readWorkbookFromLocalFile(this.files[0])" /></form><div id="main" style="width: 800px;height:350px;"></div><script type="text/javascript">// 读取本地excel文件 function readWorkbookFromLocalFile(file) {var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;var workbook = XLSX.read(data, { type: 'binary' });handle(workbook);};reader.readAsBinaryString(file);}// 处理excel文件var date1 = [];var date2 = [];function handle(workbook) {// workbook.SheetNames[0] excel第一个sheetvar datas = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);var title = [];if (datas.length > 0) {// 获取列名是汇总列名，避免某行某个字段没有值，会缺少字段// 标题// 获取每行数据// first:for (var index in datas) { // datas数组，index为索引// second:for (var key in datas[index]) { // datas[index]对象,key为键if (-1 === title.indexOf(key)) {title.push(key);}}}for (var i = 0; i < datas.length; i++) {var a = datas[i].time * 24;//time为第一列的名字var b = (a - parseInt(a)) * 60;var c = (b - parseInt(b)) * 60;date1[i] = parseInt(a).toString() + ":" + parseInt(b).toString() + ":" + parseInt(c).toString();date2[i] = datas[i].sum1;//sum1为第二列的名字}aaa();}}function aaa() {var myChart = echarts.init(document.getElementById('main'));option = {tooltip: {trigger: 'axis',position: function (pt) {return [pt[0], '10%'];}},title: {left: 'center',text: '大数据量面积图',},xAxis: {type: 'category',boundaryGap: false,data: date1},yAxis: {type: 'value',},dataZoom: [{type: 'inside',start: 0,end: 100}],series: [{name: '人流量',type: 'line',smooth: true,symbol: 'none',itemStyle: {color: 'rgb(255, 70, 131)'},data: date2}]};myChart.setOption(option);}</script>
</body></html>

此处的excle表内容如下

注意，需要自己更改echarts.min.js的引入路径

最终效果图如下

相关文章：

实现excle表上传生成echarts图

代码如下html <!--这是一个网上关于读取Excel最经典的代码--> <!DOCTYPE html> <html><head><meta charset"utf-8"><title>ECharts</title><!-- 引入 echarts.js --><!-- <script src"newjs/js/incubato…...

编程日记 2023/3/10 15:48:34

python代码如何打包

网上的文章对小白都不太友好呀&#xff0c;讲得都比较高大上&#xff0c;本文章就用最简单的方式来教会大家如何打包。既然各位已经学习到了python打包了&#xff0c; 深适度应该跟我查不多。 注意事项&#xff1a; 1. 这个插件只能打包 mac 、win系统运行的文件&#xff0c;也…...

编程日记 2023/3/10 15:47:30

MyBatis学习笔记(十二) —— MyBatis的逆向工程

12、MyBatis的逆向工程 正向工程&#xff1a;先创建Java实体类&#xff0c;由框架负责根据实体类生成数据库表。Hibernate是支持正向工程的。 逆向工程&#xff1a;先创建数据库表&#xff0c;由框架负责根据数据库表&#xff0c;反向生成如下资源&#xff1a; Java实体类Mappe…...

编程日记 2023/3/10 15:46:28

4.Elasticsearch深入了解

4.Elasticsearch深入了解[toc]1.Elasticsearch架构原理Elasticsearch的节点类型在Elasticsearch主要分成两类节点&#xff0c;一类是Master&#xff0c;一类是DataNode。Master节点在Elasticsearch启动时&#xff0c;会选举出来一个Master节点。当某个节点启动后&#xff0c;然…...

编程日记 2023/3/10 15:45:25

【HashSet】| 深度剥析Java SE 源码合集Ⅲ

目录一. &#x1f981; HashSet介绍1.1 特点1.2 底层实现二. &#x1f981; 结构以及对应方法分析2.1 结构组成2.1.1 源码实现2.1.2 成员变量及构造方法2.2 常用的方法2.2.1 添加add(E e)方法2.2.2 删除remove(Object o)方法三. 最后想说一. &#x1f981; HashSet介绍 1.1 特…...

编程日记 2023/3/10 15:44:15

你了解线程的状态转换吗

本文概述: 讲述线程的六种状态. 你可能已经了解了六种状态, 但是你知道 sleep 被唤醒之后, wait ()被 notify 之后进入了什么状态吗? 本文只是开胃小菜, 你看看下一篇文章对你有没有帮助. 一共有六种状态: New 新建状态Runnable 运行状态Blocked 阻塞状态Waiting 等待状态Tim…...

编程日记 2023/3/10 15:42:09

MyBatis-Plus联表查询的短板,该如何解决呢

mybatis-plus作为mybatis的增强工具&#xff0c;它的出现极大的简化了开发中的数据库操作&#xff0c;但是长久以来&#xff0c;它的联表查询能力一直被大家所诟病。一旦遇到left join或right join的左右连接&#xff0c;你还是得老老实实的打开xml文件&#xff0c;手写上一大段…...

编程日记 2023/3/10 15:41:06

吲哚菁绿-巯基,ICG-SH,科研级别试剂，吲哚菁绿可用于测定心输出量、肝脏功能、肝血流量,和对于眼科血管造影术。

ICG-THIOL,吲哚菁绿-巯基 中文名称&#xff1a;吲哚菁绿-巯基 英文名称&#xff1a;ICG-THIOL 英文别名&#xff1a;ICG-SH 性状&#xff1a;绿色粉末 溶剂&#xff1a;溶于二氯甲烷等其他常规有机溶剂 稳定性&#xff1a;冷藏保存&#xff0c;避免反复冻融。 存储条件&…...

编程日记 2023/3/10 15:40:04

深度剖析JavaOptional类

Java Optional 类 Optional类在 Java 8中被加了进来，提供了一种处理业务逻辑想要的值可能没有出现(null)也可能出现的情况，可能直到目前，我们还是用null 来表示业务值不存在的情况，但是这可能导致空指针异常，Java 8新添加 Optional类可以从一定程度上来解决这个问题。 O…...

编程日记 2023/3/10 15:39:00

平面设计软件Corel CDR2023又开始放大招啦，CorelDRAW Graphics Suite 2023有哪些新增功能？

CorelDRAW 2023中文版即将于2023年3月14日&#xff0c;在苏州举行线上直播的2023新品发布会&#xff0c;本次发布会主题为“设计新生力&#xff0c;矢量新未来”。 发布会邀请思杰马克丁公司领导、Corel 中国区总经理分享思杰与 Corel 的合作模式及在 CorelDRAW 产品上推动历程…...

编程日记 2023/3/10 15:38:00

初学torch【报错：expected scalar type double but found float、rmse】

目录 一、inout 二、expected scalar type double but found float 报错 三、pytorch中回归评价rmse&#xff1a; 一、inout torch网络训练&#xff0c;输入需要转换为tensor格式&#xff1a; import torch import numpy A torch.arange(12, dtypetorch.float32).reshape((…...

编程日记 2023/3/10 15:36:57

金三银四、金九银十 面试宝典 JAVASE八股文面试题 超级无敌全的面试题汇总（接近3万字的面试题，让你的JAVA语法基础无可挑剔）

JavaSE八股文 - 面试宝典 一个合格的 计算机打工人 &#xff0c;收藏夹里必须有一份 JAVA八股文面试题 &#xff0c;特别是即将找工作的计算机人&#xff0c;希望本篇博客对你有帮助&#xff01; 本文参考了诸多大佬的面试题帖子&#xff0c;ps&#xff1a;白大锅、哪吒、英雄…...

编程日记 2023/3/10 15:35:54

数据结构:链式二叉树初阶

目录 一.链式二叉树的逻辑结构 1.链式二叉树的结点结构体定义 2.链式二叉树逻辑结构 二.链式二叉树的遍历算法 1.前序遍历 2.中序遍历 3.后序遍历 4.层序遍历(二叉树非递归遍历算法) 层序遍历概念: 层序遍历算法实现思路: 层序遍历代码实现: 三.链式二叉树遍历算…...

编程日记 2023/3/10 15:34:50

公式编写1000问9-12

9.问: 买入&#xff1a;日线创100日新高 ,周线(5周&#xff09;BIAS>10 卖出&#xff1a;2日收盘在30线下方 注&#xff1a;买卖都只要单一信号即可&#xff0c;不要连续给出信号 我今天才开始学习编写&#xff0c;可是没有买入信号&#xff0c;不知道哪错了&#xff1f; B1…...

编程日记 2023/3/10 15:33:48

C++11：类的新功能和可变参数模板

文章目录1. 新增默认成员函数1.1 功能1.2 示例2. 类成员变量初始化3. 新关键字3.1 关键字default3.2 关键字delete补充3.3 关键字final和override4. 可变参数模板4.1 介绍4.2 定义方式4.3 展开参数包递归展开参数包优化初始化列表展开参数包逗号表达式展开参数包补充5. emplace…...

编程日记 2023/3/10 15:32:46

【Java学习笔记】15.Java 日期时间(1)

Java 日期时间 java.util 包提供了 Date 类来封装当前的日期和时间。 Date 类提供两个构造函数来实例化 Date 对象。 第一个构造函数使用当前日期和时间来初始化对象。 Date( )第二个构造函数接收一个参数&#xff0c;该参数是从 1970 年 1 月 1 日起的毫秒数。 Date(long …...

编程日记 2023/3/10 15:31:41

在ROS2中，通过MoveIt2控制Gazebo中的自定义机械手

目前的空余时间主要都在研究ROS2&#xff0c;最终目的是控制自己用舵机组装的机械手。 由于种种原因&#xff0c;先控制Gazebo的自定义机械手。 先看看目前的成果 左侧是rviz2中的moveit组件的机械手&#xff0c;右侧是gazebo中的机械手。在moveit中进行路径规划并执行后&#…...

编程日记 2023/3/10 15:30:35

Java-线程池 原子性 类

Java-线程池 原子性 类线程池构造方法调用Executors静态方法创建调用方法直接创建线程池对象原子性volatile-问题出现原因:volatile解决原子性AtomicInteger的常用方法悲观锁和乐观锁synchronized(悲)和CAS(乐)的区别并发工具类Hashtable集合ConcurrentHashMap原理:CountDownLa…...

编程日记 2023/3/10 15:29:23

力扣sql简单篇练习(二十五)

力扣sql简单篇练习(二十五) 1 无效的推文 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 1.2 示例sql语句 # Write your MySQL query statement below SELECT tweet_id FROM Tweets WHERE CHAR_LENGTH(content)>151.3 运行截图 2 求关注者的数量 2.1 基本题目内…...

编程日记 2023/3/10 15:28:21

计算机网络：OSPF协议和链路状态算法

OSPF协议 开放最短路经优先OSPF协议是基于最短路径算法SPF,其主要特征就是使用分布式的链路状态协议OSPF协议的特点&#xff1a; 1.使用泛洪法向自治系统中的所有路由器发送信息&#xff0c;即路由器通过输出端口向所有相邻的路由器发送信息&#xff0c;而每一个相邻的路由器又…...

编程日记 2023/3/10 15:27:17

Dropout、DropConnect、Standout...12种正则化变种，到底该用哪个？一份给炼丹师的避坑指南

Dropout变种全景指南&#xff1a;从理论到实战的12种策略深度解析 当你的神经网络在验证集上表现不佳时&#xff0c;第一个跳入脑海的解决方案是什么&#xff1f;对于大多数从业者来说&#xff0c;Dropout无疑是正则化工具箱中的首选武器。但你是否知道&#xff0c;标准Dropout…...

编程新知 2026/3/30 0:21:38

热量表（热能表）完整指南：原理、公式推导、STM32 嵌入式软件全实现

目录 一、热量表工作原理 1. 核心物理原理 2. 系统组成 3. 工作流程 二、热量计算公式&#xff08;国标 / 欧标 EN1434&#xff09;完整推导 1. 基础定义 2. 最终标准热量公式&#xff08;工业直接用&#xff09; 瞬时热量&#xff1a; 累积热量&#xff1a; 3. 公式…...

编程新知 2026/3/29 21:42:28

FPGA加速二值化CNN：从MNIST手写识别到硬件优化实践

1. 二值化神经网络与FPGA加速基础 二值化神经网络&#xff08;BNN&#xff09;是近年来边缘计算领域的重要突破&#xff0c;它将传统神经网络中的32位浮点权重和激活值压缩到仅用1位表示&#xff08;1或-1&#xff09;。这种极端量化带来的直接好处是存储需求降低32倍&#xff…...

编程新知 2026/3/29 21:32:24

eslint-plugin-compat自定义规则开发：扩展插件功能的完整教程

eslint-plugin-compat自定义规则开发&#xff1a;扩展插件功能的完整教程 【免费下载链接】eslint-plugin-compat Check the browser compatibility of your code 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-compat eslint-plugin-compat是一款强大的浏…...

编程新知 2026/3/29 21:16:19

TOPSIS算法实战：用Python给河流水质排个名，附完整代码与避坑指南

TOPSIS算法实战&#xff1a;用Python给河流水质排个名&#xff0c;附完整代码与避坑指南 当环保部门拿到一份包含含氧量、PH值、细菌数、水草量等指标的河流水质数据时&#xff0c;如何科学评估各条河流的健康状况&#xff1f;传统的主观评分方法往往存在偏差&#xff0c;而TOP…...

编程新知 2026/3/29 20:44:10

全网最全！网络安全全岗位解析（2026版）

全网最全&#xff01;网络安全全岗位解析&#xff08;2026版&#xff09; 摘要&#xff1a;随着数字化转型加速&#xff0c;网络安全已成为企业、政务、互联网大厂的核心刚需&#xff0c;人才缺口持续扩大&#xff0c;2026年国内网络安全人才缺口已突破327万&#xff0c;全球缺…...

编程新知 2026/3/29 17:10:36

纯本地运行！LiuJuan Z-Image Generator隐私安全，生成高质量图片

纯本地运行&#xff01;LiuJuan Z-Image Generator隐私安全&#xff0c;生成高质量图片 想找一个既保护隐私&#xff0c;又能稳定生成高质量图片的AI工具吗&#xff1f;今天介绍的LiuJuan Z-Image Generator&#xff0c;可能就是你的理想选择。它最大的特点&#xff0c;就是“…...

编程新知 2026/3/29 15:09:46

手把手教你部署造相Z-Image v2：内置模型版，开箱即用免配置

手把手教你部署造相Z-Image v2&#xff1a;内置模型版&#xff0c;开箱即用免配置 1. 为什么选择造相Z-Image v2&#xff1f; 如果你正在寻找一个既强大又易于部署的文生图模型&#xff0c;造相Z-Image v2绝对值得考虑。这个由阿里通义万相团队开源的模型&#xff0c;拥有20亿…...

编程新知 2026/3/29 14:57:44

3步实现视频转PPT：extract-video-ppt工具让内容提取效率提升80%

3步实现视频转PPT&#xff1a;extract-video-ppt工具让内容提取效率提升80% 【免费下载链接】extract-video-ppt extract the ppt in the video 项目地址: https://gitcode.com/gh_mirrors/ex/extract-video-ppt 在数字化办公日益普及的今天&#xff0c;视频转PPT工具已…...

编程新知 2026/3/29 14:49:42

Remult项目实战：如何从零构建企业级CRM系统的完整流程

Remult项目实战&#xff1a;如何从零构建企业级CRM系统的完整流程 【免费下载链接】remult Full-stack CRUD, simplified, with SSOT TypeScript entities 项目地址: https://gitcode.com/gh_mirrors/re/remult 在当今快速发展的商业环境中&#xff0c;企业级CRM系统已成…...

编程新知 2026/3/29 14:23:30