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

实现excle表上传生成echarts图

news 2026/2/8 9:22:25

代码如下

```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

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/2/5 5:05:56

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/1/3 7:21:08

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2026/2/4 17:50:55

JS红宝书笔记 - 3.3 变量

要定义变量&#xff0c;可以使用var操作符&#xff0c;后跟变量名 ES实现变量初始化&#xff0c;因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符&#xff0c;可以创建一个全局变量 如果需要定义…...

编程新知 2025/11/29 5:47:26

【笔记】AI Agent 项目 SUNA 部署 之 Docker 构建记录

#工作记录 构建过程记录 Microsoft Windows [Version 10.0.27871.1000] (c) Microsoft Corporation. All rights reserved.(suna-py3.12) F:\PythonProjects\suna>python setup.py --admin███████╗██╗ ██╗███╗ ██╗ █████╗ ██╔════╝…...

编程新知 2026/1/26 16:27:02

2025-06-01-Hive 技术及应用介绍

Hive 技术及应用介绍 参考资料 Hive 技术原理Hive 架构及应用介绍Hive - 小海哥哥 de - 博客园https://cwiki.apache.org/confluence/display/Hive/Home(官方文档) Apache Hive 是基于 Hadoop 构建的数据仓库工具&#xff0c;它为海量结构化数据提供类 SQL 的查询能力&#xf…...

编程新知 2026/2/1 18:23:54