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

实现excle表上传生成echarts图

news 文章来源：https://blog.csdn.net/qq_50951790/article/details/129442785 2024/9/22 17:30:46

代码如下

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

利用表驱动法+策略模式优化switch-case

1.前言 我有一个需求&#xff1a;有四个系统需要处理字段&#xff0c;一开始利用switch-case进行区分编码&#xff0c;后期字段处理越来越多&#xff0c;导致switch-case代码冗余&#xff0c;不太好&#xff0c;然后想通过java单继承多实现的性质进行优化。 2.实现 2.1定义S…...

编程日记 2023/3/10 15:26:11

SpringBoot创建和使用

目录 什么是SpringBoot SpringBoot的优点 SpringBoot项目的创建 1、使用idea创建 2、项目目录介绍和运行 Spring Boot配置文件 1、配置文件 2、配置文件的格式 3、properties 3.1、properties基本语法 3.2、读取配置文件 3.3、缺点 4、yml 4.1、优点 4.2、yml基本…...

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

which、whereis、locate文件查找命令

Linux下查找文件的命令有which、whereis、locate和find&#xff0c;find命令因要遍历文件系统&#xff0c;导致速度较慢&#xff0c;而且还会影响系统性能&#xff0c;而且命令选项较多&#xff0c;就单独放一篇介绍&#xff0c;可参见find命令——根据路径和条件搜索指定文件_…...

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

Uipath Excel 自动化系列14-SaveExcelFile(保存Excel)

活动描述 SaveExcelFile 保存Excel:保存工作簿&#xff0c;在修改 Excel 文件的用户界面自动化活动之后使用此活动&#xff0c;以保存对文件的更改 SaveExcelFile As 另存Excel : 将workbook 另存为文件 SaveExcelFile As PDF &#xff1a;将Excel 另存为PDF文件。该三个活…...

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

MyBatis学习

MyBatis优点 轻量级&#xff0c;性能出色 SQL 和 Java 编码分开&#xff0c;功能边界清晰。Java代码专注业务、SQL语句专注数据 开发效率稍逊于HIbernate&#xff0c;但是完全能够接受 补充&#xff1a;POJO 一&#xff1a;什么是POJO POJO的名称有多种&#xff0c;pure old…...

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

高速PCB设计指南系列(二)

第三篇 高速PCB设计 &#xff08;一&#xff09;、电子系统设计所面临的挑战 　　随着系统设计复杂性和集成度的大规模提高&#xff0c;电子系统设计师们正在从事100MHZ以上的电路设计&#xff0c;总线的工作频率也已经达到或者超过50MHZ&#xff0c;有的甚至超过100MHZ。目前…...

编程日记 2023/3/10 15:20:56

uniapp项目打包上线流程

平台&#xff1a;h5小程序app &#xff08;安卓&#xff09;小程序打包上线流程第一步&#xff1a;登录小程序公众平台第二步&#xff1a;hbuilderx打包小程序1.在mainfest.json文件中进行相关配置2.需要将项目中的网络请求改为https协议做为生产环境&#xff08;配置项目的环境…...

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

垃圾回收：垃圾数据如何自动回收

有些数据被使用之后&#xff0c;可能就不再需要了&#xff0c;我们把这种数据称为垃圾数据。如果这些垃圾数据一直保存在内存中&#xff0c;那么内存会越用越多&#xff0c;所以我们需要对这些垃圾数据进行回收&#xff0c;以释放有限的内存空间 不同语言的垃圾回收策略 通常…...

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

苹果笔不用原装可以吗？Apple Pencil平替笔推荐

近些年来&#xff0c;不管是学习还是画画&#xff0c;都有不少人喜欢用ipad。而ipad的用户&#xff0c;也是比较重视它的实用价值&#xff0c;尤其是不少人都想要好好利用来进行学习记笔记。事实上&#xff0c;有很多替代品都能替代Apple Pencil&#xff0c;仅仅用于记笔记就没…...

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

uniCloud基础使用-杂文

获取openID云函数use strict; exports.main async (event, context) > {//event为客户端上传的参数console.log(event : , event)// jscode2session 微信小程序登录接口&#xff0c;获取openidconst {code} event;// 云函数中如需要请求其他http服务&#xff0c;则使用uni…...

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

vector的模拟实现

文章目录vector的模拟实现vector 结构定义1. vector的迭代器的实现2. vector四个默认成员函数2.1 构造函数2.1.1 无参2.1.2 n个val初始化2.1.3 迭代器初始化2.2 析构函数2.3 拷贝构造函数2.3.1 传统写法2.3.2 现代写法2.4 赋值重载运算符3. 管理数组相关接口3.1 reserve3.2 res…...

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

【无标题】compose系列教程-4.相对布局ConstraintLayout的使用

相对布局在Compose中被称为ConstraintLayout&#xff0c;它可以让您以相对于其他元素的方式放置元素。 以下是使用ConstraintLayout实现相对布局的示例代码&#xff1a; Composable fun ConstraintLayoutExample() { ConstraintLayout(modifier Modifier.fillMaxSize()…...

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

JavaEE简单示例——Bean管理

简单介绍&#xff1a; 在这一章节我们会比较详细的介绍我们在之前的测试类中以及Bean管理XML配置文件中所使用到的类和方法&#xff0c;以及XML中配置的属性所代表的详细含义。以及之前我们反复提到但是一直没有详细的讲解的一个东西&#xff1a;容器。我们可以大致的有一个概…...

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

react+antdpro+ts实现企业级项目四：注册页面实现及useEmotionCss的介绍

创建文件路径并注册register路由 在pages/User下创建Register文件夹并创建index.tsx文件 然后在config/routes创建register注册路由。注册完后&#xff0c;当在登陆页面点击注册按钮时就可以跳转到此注册页面而不会报404了。 export default [{path: /user,layout: false,rou…...

编程日记 2023/3/10 15:12:24

Shifu基础功能：数据采集

数据采集 我们可以通过HTTP/gRPC与deviceShifu进行通信&#xff0c;deviceShifu会将我们发送的请求转换成设备所支持协议的形式&#xff0c;并发送给设备。 当设备接收到指令之后&#xff0c;数据会传输到deviceShifu中&#xff0c;之后deviceShifu将数据作为我们请求的返回值…...

编程日记 2023/3/10 15:11:22

代码随想录算法训练营day54 | 动态规划之子序列 392.判断子序列 115.不同的子序列

day54392.判断子序列1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义2.确定递推公式3.dp数组如何初始化4.确定遍历顺序5.举例推导dp数组115.不同的子序列1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义2.确定递推公式3.dp数组如何初始化4.确定遍历顺…...

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

MCAL知识点（三）：Port与Dio配置

目录 1、概述 2、 Port的EB-tresos配置 2.1、创建模块 2.2 General配置 2.3、PortCnfigSet 2.4、Port的属性...

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

初识C++需要了解的一些东西（1）

目录&#x1f947;命名空间&#x1f3c5;存在原因&#x1f3f5;命名空间定义&#x1f3a7;命名空间的3种使用方式&#x1f3c6;C输入和输出&#x1f31d;缺省参数&#x1f31c;缺省参数概念⭐️缺省参数分类☀️函数重载&#x1f525;引用&#x1f31a;引用概念&#x1f313;引…...

编程日记 2023/3/10 15:08:11

友元函数的使用大全

概述 我们知道&#xff0c;C的类具有封装和信息隐藏的特性。一般情况下&#xff0c;我们会封装public的成员函数供用户调用&#xff0c;而将成员变量设置为private或protected。但在一些比较复杂的业务情况下&#xff0c;可能需要去访问对象中大量的private或protected成员变量…...

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

QT学习笔记-QT多项目系统中如何指定各项目的编译顺序

QT学习笔记-QT多项目系统中如何指定各项目的编译顺序背景环境解决思路具体操作背景 为了更好的复用程序功能以及更优雅的管理程序&#xff0c;有经验的程序员通常要对程序进行分层和模块化设计。在QT/C这个工具中同样可以通过创建子项目的方式对程序进行模块化&#xff0c;在这…...

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

JWT令牌解析及刷新令牌(十一)

写在前面&#xff1a;各位看到此博客的小伙伴&#xff0c;如有不对的地方请及时通过私信我或者评论此博客的方式指出&#xff0c;以免误人子弟。多谢&#xff01;如果我的博客对你有帮助&#xff0c;欢迎进行评论✏️✏️、点赞&#x1f44d;&#x1f44d;、收藏⭐️⭐️&#…...

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

Hibernate学习（一）

Hibernate学习&#xff08;一&#xff09; Hibernate框架的概述&#xff1a; 一&#xff1a;什么是框架&#xff1a;指软件的半成品&#xff0c;已经完成了部分功能。 二&#xff1a;EE的三层架构&#xff1a; 1.EE的三层经典架构&#xff1a; 我在这里主要学的是ssh框架。 三…...

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

Go的 context 包的使用

文章目录背景简介主要方法获得顶级上下文当前协程上下文的操作创建下级协程的Context场景示例背景 在父子协程协作过程中, 父协程需要给子协程传递信息, 子协程依据父协程传递的信息来决定自己的操作. 这种需求下可以使用 context 包 简介 Context通常被称为上下文&#xff…...

编程日记 2023/3/10 15:02:52

微服务为什么要用到 API 网关？

本文介绍了 API 网关日志的价值&#xff0c;并以知名网关 Apache APISIX 为例&#xff0c;展示如何集成 API 网关日志。 作者程小兰&#xff0c;API7.ai 技术工程师&#xff0c;Apache APISIX Contributor。 原文链接 什么是微服务 微服务架构&#xff08;通常简称为微服务&a…...

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

SWUST OJ 1042: 中缀表达式转换为后缀表达式【表达式转逆波兰表达式】

题目描述 中缀表达式是一个通用的算术或逻辑公式表示方法&#xff0c;操作符是以中缀形式处于操作数的中间&#xff08;例&#xff1a;3 4&#xff09;&#xff0c;中缀表达式是人们常用的算术表示方法。后缀表达式不包含括号&#xff0c;运算符放在两个运算对象的后面&#…...

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

Matlab基础知识

MATLAB批量读入文件和导出文件一、 批量读入文件1.若文件名称有序&#xff0c;则按照文件名称规律循环读取文件(1)读入不同的excelfor i1:1:10strstrcat(F:\数据\v,int2str(i),.xlsx); %连接字符串形成文件名Axlsread(str); end注&#xff1a;变量i为整数时&#xff0c;可以用i…...

编程日记 2023/3/10 14:59:33

动手学深度学习【2】——softmax回归

动手学深度学习网址&#xff1a;动手学深度学习 注&#xff1a;本部分只对基础知识进行简单的介绍并附上完整的代码实现&#xff0c;更多内容可参考上述网址。 前言 前面一节我们谈到了线性回归&#xff0c;它解决的是预测某个值的问题。但是在日常生活这&#xff0c;除了预测…...

编程日记 2023/3/10 14:58:32

深入理解Activity的生命周期

之前学习安卓的时候只是知道生命周期是什么&#xff0c;有哪几个&#xff0c;但具体的详细的东西却不知道&#xff0c;后来看过《Android开发艺术探索》和大量博客之后&#xff0c;才觉得自己真正有点理解生命周期&#xff0c;本文是我对生命周期的认识的总结。废话少说先上图。…...

编程日记 2023/3/10 14:57:29

Go语言刷题常用数据结构和算法

数据结构 字符串 string 访问字符串中的值 通过下标访问 s1 : "hello world"first : s[0]通过切片访问 s2 : []byte(s1) first : s2[0]通过for-range循环访问 for i, v : range s1 {fmt.Println(i, v) }查询字符是否属于特定字符集 // 判断字符串中是否包含a、b、…...

编程日记 2023/3/10 14:56:23

深入vue2.x源码系列:手写代码来模拟Vue2.x的响应式数据实现

前言 Vue响应式原理由以下三个部分组成&#xff1a; 数据劫持&#xff1a;Vue通过Object.defineProperty()方法对data中的每个属性进行拦截&#xff0c;当属性值发生变化时&#xff0c;会触发setter方法&#xff0c;通知依赖更新。发布-订阅模式&#xff1a;Vue使用发布-订阅…...

编程日记 2023/3/10 14:55:17