echarts:导入excel生成桑葚图

前言

前两天帮别人实现了一个小功能,主要是选择excel文件,读取里面的数据,将数据生成桑葚图

echarts官方桑葚图案例

实现

因为就是一个单纯的html文件,用到的库都是通过CDN的方式加载的,会有一些慢

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#main {width: 800px;height: 600px;border: 1px solid red;}</style><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
</head><body><input type="file" id="excelFileInput" /><div id="main"></div><script type="text/javascript">// 解析exceldocument.getElementById('excelFileInput').addEventListener('change', function (event) {const file = event.target.files[0];const dom = document.getElementById('main')var myChart = echarts.init(dom);console.log("加载:", window.echarts, dom)if (file) {const reader = new FileReader();reader.onload = function (e) {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });// 假设我们要解析第一个工作表const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];// 将工作表转换为JSONconst jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });console.log("json数据:", jsonData, jsonData.length)// 自己的数据const excelData = {// 节点nodes: [],links: []}// 循环生成数据for (let i = 1; i < jsonData.length; i++) {// 生成节点,避免添加重复数据if (!excelData.nodes.find(e => e.name == jsonData[i][0])) {excelData.nodes.push({name: jsonData[i][0]})}if (!excelData.nodes.find(e => e.name == jsonData[i][1])) {excelData.nodes.push({name: jsonData[i][1]})}// 生成线段if (!excelData.nodes.find(e => e.source == jsonData[i][0] && e.target == jsonData[i][1])) {excelData.links.push({source: jsonData[i][0],target: jsonData[i][1],value: jsonData[i][2]})}}console.log("数据:", excelData)// 指定图表的配置项和数据var option = {title: {text: '桑基图',left: 'center'},// 触发方式tooltip: {trigger: 'item',triggerOn: 'mousemove'},series: [{// 图表类型type: 'sankey',// 节点data: excelData.nodes,// 线条links: excelData.links,emphasis: {focus: 'adjacency'},// 线的类型lineStyle: {color: 'gradient',curveness: 0.5}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);};reader.readAsArrayBuffer(file);}});</script>
</body></html>

excel文件格式
在这里插入图片描述
效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/457406.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IPC 进程间通信 信号量集合 Linux环境 C语言实现

只用于多进程间的并发控制 一个信息量集合(信号量集 或 信息量数组)中顺序存储着多个信号量 相关接口函数&#xff1a; 实际项目&#xff0c;直接调用semop函数来作为某个或某几个信号量的PV操作函数会很不方便&#xff0c;因此会对信号量集合的接口进行二次封装&#xff0c;封…

AI实操Excel:在Excel中学习人工智能基础算法

人工智能&#xff08;AI&#xff09;已经成为当今科技领域最热门的话题之一&#xff0c;但对于初学者来说&#xff0c;直接上手复杂的编程和算法可能会感到有些困难。今天&#xff0c;我要向大家介绍一个非常实用的工具——AI实操Excel&#xff0c;这是一个通过Excel实现人工智…

「二叉树进阶题解:构建、遍历与结构转化全解析」

文章目录 根据二叉树创建字符串思路代码 二叉树的层序遍历思路代码 二叉树的最近公共祖先思路代码 二叉搜索树与双向链表思路代码 从前序与中序遍历序列构造二叉树思路代码 总结 根据二叉树创建字符串 题目&#xff1a; 样例&#xff1a; 可以看见&#xff0c;唯一特殊的就…

影刀RPA实战:常见实用功能指令

1. 电脑锁屏与解屏 在实际工作中&#xff0c;我们为了自身工作电脑数据文件的安全&#xff0c;都会为电脑设置密码&#xff0c;当我们离开电脑时&#xff0c;直接锁屏&#xff0c;即使不手动锁屏&#xff0c;也会在一定时间内自动锁屏。 如果你的工作是影刀RPA帮你自动化处理…

Spring Boot驱动的厨艺社交平台设计与实现

5 系统实现 5.1食材分类管理 管理员管理食材分类&#xff0c;可以添加&#xff0c;修改&#xff0c;删除食材分类信息。下图就是食材分类管理页面。 图5.1 食材分类管理页面 5.2 用户信息管理 管理员管理用户信息&#xff0c;可以添加&#xff0c;修改&#xff0c;删除用户信…

kafka 分布式(不是单机)的情况下,如何保证消息的顺序消费?

大家好&#xff0c;我是锋哥。今天分享关于【kafka 分布式&#xff08;不是单机&#xff09;的情况下&#xff0c;如何保证消息的顺序消费?】面试题&#xff1f;希望对大家有帮助&#xff1b; kafka 分布式&#xff08;不是单机&#xff09;的情况下&#xff0c;如何保证消息的…

量子变分算法 (python qiskit)

背景 变分量子算法是用于观察嘈杂的近期设备上的量子计算效用的有前途的候选混合算法。变分算法的特点是使用经典优化算法迭代更新参数化试验解决方案或“拟设”。这些方法中最重要的是变分量子特征求解器 (VQE)&#xff0c;它旨在求解给定汉密尔顿量的基态&#xff0c;该汉密尔…

mac 上使用 cmake 构建包含 OpenMP 的项目

安装依赖 # clang 默认不支持 -fopenmp&#xff0c;因为它没有内置 OpenMP 支持。 # 为了解决这个问题&#xff0c;需要安装 libomp 并配置 clang 使用 libomp brew install libomp# macOS 自带的 clang 编译器被修改过&#xff0c;默认禁用了 OpenMP&#xff0c; # 而不支持 …

【K8S系列】Kubernetes Service 基础知识 详细介绍

在 Kubernetes 中&#xff0c;Service 是一种抽象的资源&#xff0c;用于定义一组 Pod 的访问策略。它为这些 Pod 提供了一个稳定的访问入口&#xff0c;解决了 Pod 可能频繁变化的问题。本文将详细介绍 Kubernetes Service 的类型、功能、使用场景、DNS 和负载均衡等方面。 1.…

class 36 二叉树高频题目 - 上 (不含有树形dp)

1. BFS 的两种方式 如下图, 是一个二叉树. 我们需要按照层的方式来遍历这棵树. 1.1 使用 JDK 自带的类实现(链表实现, 经典 BFS) 首先我们实现一个队列, 这个队列从头进, 从尾出.然后将根节点放入其中, 然后将放入的节点弹出,然后继续验证弹出的节点有没有左孩子, 若是有, 将…

【HTML】之form表单元素详解

HTML表单是网页与用户交互的关键组成部分&#xff0c;它允许用户输入数据并将数据提交到服务器进行处理。本文将全面详细地介绍HTML表单的各个方面&#xff0c;从基础元素到高级用法&#xff0c;并提供丰富的代码示例和中文注释&#xff0c;帮助你彻底掌握表单的使用。 1. 表单…

强大!Spring Boot 3.3 集成 PDFBox 轻松实现电子签章功能!

强大&#xff01;Spring Boot 3.3 集成 PDFBox 轻松实现电子签章功能&#xff01; 随着数字化办公和电子合同的普及&#xff0c;PDF 文档已经成为很多业务场景中的标准文件格式。为了确保文档的安全性和法律效力&#xff0c;电子签章技术应运而生。电子签章不仅可以证明文件的…

视频美颜平台的搭建指南:基于直播美颜SDK的完整解决方案

众所周知&#xff0c;直播美颜SDK是实现视频美颜功能的核心。本文将详细解析如何基于直播美颜SDK搭建一个完整的视频美颜平台。 一、视频美颜SDK的核心功能 直播美颜SDK作为平台的技术核心&#xff0c;能够提供丰富的美颜效果和稳定的视频处理能力。通常&#xff0c;SDK具备以…

传输层TCP

报头 1.报头和有效载荷如何分离将&#xff0c;有效载荷向上交付&#xff1f; tcp有个标准报头长度为20&#xff0c;那是不是以为我们可以像udp一样分离依靠报头大小去分离&#xff0c;我们仔细去看我们报头中还有个选项没包含到。 我们还有个首部长度&#xff0c;四位可以表…

【Axure高保真原型】分级树筛选中继器表格

今天和大家分享分级树筛选中继器表格的原型模板&#xff0c;点击树的箭头可以展开或者收起子级内容&#xff0c;点击内容&#xff0c;可以筛选出该内容及子级内容下所有的表格数据。左侧的树和右侧的表格都是用中继器制作的&#xff0c;所以使用也很方便&#xff0c;只需要在中…

SwiftUI:单个App支持设置多语言

SwiftUI 全新多语言方案 简化本地化的字符串- WWDC21 - 视频 本地化您的SwiftUI app - WWDC21 - 视频 构建全球化App&#xff1a;本地化的示例- WWDC22 - 视频 构建支持多语言的App - WWDC24 - 视频 单个App支持设置多语言 工程 Info.plist里添加 键值UIPrefersShowingLangua…

论1+2+3+4+... = -1/12 的不同算法

我们熟知自然数全加和&#xff0c; 推导过程如下&#xff0c; 这个解法并不难&#xff0c;非常容易看懂&#xff0c;但是并不容易真正理解。正负交错和无穷项计算&#xff0c;只需要保持方程的形态&#xff0c;就可以“预知”结果。但是这到底说的是什么意思&#xff1f;比如和…

【AI换装整合及教程】CatVTON:时尚与科技的完美融合

在当今数字化时代&#xff0c;时尚行业正经历着一场前所未有的变革&#xff0c;而 CatVTON 作为一款由中山大学、Pixocial 等机构联合研发的轻量化 AI 虚拟换装工具&#xff0c;无疑是这场变革中的璀璨明星。 一、独特的技术架构 CatVTON 基于 Stable Diffusion v1.5 inpainit…

css 切角实现(全)

效果 样式代码 <template><div class"container"><div class"clip-all-angle"> 4个角全部剪切 </div><div class"clip-two-angle"> 切底部两个角 </div><div class"clip-two-top-angle"> …

新鲜出炉,ECCV2024.9.25 首次提出基于 YOLO 目标检测的无源域自适应

原文标题&#xff1a;Source-Free Domain Adaptation for YOLO Object Detection 中文标题&#xff1a;基于 YOLO 目标检测的无源域自适应 论文地址&#xff1a; https://arxiv.org/abs/2409.16538 代码地址&#xff1a; GitHub - vs-cv/sf-yolo 1、Abstract 无源域自适应&…