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

导入excel数据给前端Echarts实现中国地图-类似热力图可视化

导入excel数据给前端Echarts实现中国地图-类似热力图可视化

程序文件:

XinqiDaily/frontUtils-showSomeDatabaseonMapAboutChina/finalproject · xin麒/XinQiUtilsOrDemo - 码云 - 开源中国 (gitee.com)

https://gitee.com/flowers-bloom-is-the-sea/XinQiUtilsOrDemo/tree/master/XinqiDaily/frontUtils-showSomeDatabaseonMapAboutChina/finalproject

视频讲解:

https://www.bilibili.com/video/BV1Uu4y1D7Ck

1、数据文件准备

首先准备一个自己的数据文件:
在这里插入图片描述

随便吧,我准备了2个。

testDatabase2.xlsx这个文件是这样子的:

在这里插入图片描述

以上就是自己的要继续地图数据可视化的数据。

2、数据加载文件

双击打开:

startPage.html

然后来到一个页面:

在这里插入图片描述

这里就选择你想要进行可视化的数据文件。

3、展示可视化

这里在上一步选择要进行可视化的文件后,会自动跳到map.html文件,因为map.html就是展示可视化的。
在这里插入图片描述

4、工具实现的主要参考:

1.一个获取地理坐标等信息的接口
https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
2.修改颜色的参考文档
https://www.w3schools.cn/colors/colors_hexadecimal.html
3.html5发送网络请求的参考文档
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response
4.表格类数据在html5载入的具体实现发送:
https://blog.csdn.net/a872822645/article/details/85005144
5.html5中实现热力图的架构思路:
https://blog.csdn.net/qq_32532841/article/details/105859870
6.html5页面带参数跳转到另一个页面的具体取值方式
https://blog.csdn.net/qq_54223170/article/details/116601025

5、其他

数据的格式尽可能向我的看齐吧。当然了如果想试试其他格式行不行的话也可以尝试哈。

如果有用的话希望可以在B站上点赞和关注

另外,参考内容参考了蛮多内容的,都放代码注释上面了,想要修改的颜色的步骤也放到代码注释里面了。建议结合视频讲解修改吧。

做了多久时间?实际用时也就从2023-0826-22:21~2023-0827-5:42吧。

下面整理好几个版本,算是其中完善过程中的一小部分内容吧。不太会前端,只能面向浏览器编程了,无数的参考以及无数的测试:

在这里插入图片描述

实际上呢2023-0826-22:21~2023-08-27:00在做可行性方案的抉择:

当时看到python可以,但是太多依赖库报错,一些是库版本太高,一些是太低,一些是没参考文献。一路报错我选择继续找可实现的方案,最后发现前端的Echarts可以尝试。后面也经过了无限的参考,许多的js文件的参差不齐,然后又去找对应得js包。

本来数据的载入是在代码里面在dataList添加数据的,但是感觉不够好,代码入侵性超级高。考虑到有些人只是想用而已的心态,于是就搞了个xlsx文件的数据载入的方式对功能进行增强。

但是最终颜色以及深浅的范围的修改也是要在代码里修改的,只能说没搭建项目吧,搭建前后端项目的话可以将颜色的设置放到数据库里面,也要有后端服务器来处理,但是搭建项目要几天,最近没太多时间,所以就不搭建项目了,或者说后续我如果还有想法那就再增强一些功能吧。

然后基本上是2023-0827-5:42的时候我就搞定了,但是还想搞一下英文版的,想要展示可视化地图时使用英文展示那些省份名称,我查了很久发现是nameMap需要设置,但是我设置了许多都没有设置成功,也浪费了很多时间,那也没什么办法了。

也许这个我做的这个工具比较简单吧,功能也没多少,比较难结合其他技术来搞一个英文版的,毕竟这个工具后端都没有,也没用vue或者说其他更好用的框架啥的。如果有时间的话,推倒重来整一个前后端项目来实现也是可以的。

先这样吧。

相关文章:

导入excel数据给前端Echarts实现中国地图-类似热力图可视化

导入excel数据给前端Echarts实现中国地图-类似热力图可视化 程序文件: XinqiDaily/frontUtils-showSomeDatabaseonMapAboutChina/finalproject xin麒/XinQiUtilsOrDemo - 码云 - 开源中国 (gitee.com) https://gitee.com/flowers-bloom-is-the-sea/XinQiUtilsOr…...

【MySQL系列】MySQL复合查询的学习 _ 多表查询 | 自连接 | 子查询 | 合并查询

「前言」文章内容大致是对MySQL复合查询的学习。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、基本查询回顾二、多表查询三、自连接四、子查询4.1 单行子查询4.2 多行子查询4.3 多列子查询4.4 在from子句中使用子查询 五、合并查询 一、基本查询回顾…...

微信小程序使用本地图片在真机预览不显示的问题解决

开发工具上本地图片可以显示&#xff0c;但是在真机上预览的时候不能显示 通常我们代码路径是代码是这样写的&#xff1a; <view class"logo"><image src"../../img/e8591fd7b1043bd3b4eb07d86243b5b.png"></image> </view> 最…...

Texlive2023与Texstudio2023卸载与安装(详细全程)

早在两年前安装了texlive2020&#xff0c;最近重新使用总是报错&#xff0c;好像是因为版本过低。我就找了个时间更新一下texlive版本&#xff0c;全程如下。 1、卸载texlive老版本 1&#xff09;找到texlive目录&#xff0c;比如我的是D:\texlive\2022\tlpkg\installer&…...

塞浦路斯公司注册 塞浦路斯公司开户 塞浦路斯公司年审

一、为什么选择塞浦路斯 1、没有外汇管制&#xff1b; 2、注册公司无需验资实缴&#xff1b; 3、塞浦路斯公司分红没有税收&#xff1b; 4、塞浦路斯拥有欧洲蕞低的企业所得税&#xff0c;为净利润的 12.5%&#xff1b; 5、除某些特定业务要在经营前获得许可&#xff0c;基…...

XSS盲打练习(简单认识反射型、存储型XSS和cookie欺骗)

文章目录 挖掘cms网站XSS漏洞利用XSS平台盲打CMS&#xff0c;获取后台管理cookiecookie欺骗登录管理员账户 挖掘cms网站XSS漏洞 来到cms网站主页&#xff0c;发现有一个搜索框&#xff0c;输入任意内容后搜索&#xff0c;发现内容会回显&#xff0c;这里可能存在反射型XSS漏洞…...

Shell脚本:基础知识和使用指南

Shell脚本是一种用于自动化任务和进程的强大工具。它们允许你编写一系列的命令&#xff0c;这些命令可以在shell环境中执行&#xff0c;从而避免了手动输入每个命令的需要。Shell脚本对于减少重复的工作、提高效率以及构建复杂的自动化过程非常有用。 什么是Shell&#xff1f;…...

Resource Hacker下载

下载路径 Resource Hacker (angusj.com)http://www.angusj.com/resourcehacker/#download 应用方法示例 【2023年更新】手把手教你去除 WinRAR 的弹窗广告_winrar广告怎么去除_areosun的博客-CSDN博客https://blog.csdn.net/haiyunzhiqiu/article/details/119176038#comment…...

Kubernetes入门 十、HPA 自动扩/缩容

目录 概述安装metrics-server使用HPA 概述 我们已经可以通过手动执行 kubectl scale 命令实现Pod的扩缩容&#xff0c;但是这显然不符合 Kubernetes 的定位目标–自动化和智能化。Kubernetes 期望可以通过监测Pod的使用情况&#xff0c;实现 Pod 数量的自动调整&#xff0c;于…...

Django报错:SystemCheckError: System check identified some issues解决办法

今天练习django自定义标签时&#xff0c;一开始在APPbook中写了自定义标签book_tags.py 测试成功&#xff0c;之后新建了一个APPblogs&#xff0c;测试在blogs中创建模板使用自定义标签&#xff0c;于是直接把book/templatetags包直接赋值到blogs目录里。在页面里加载自定义标…...

JavaScript设计模式(一)——构造器模式、原型模式、类模式

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

python 读文件,跳过有问题的那行

报错&#xff1a; UnicodeDecodeError: gbk codec cant decode byte 0xfa in position 4781: illegal multibyte sequence 解决方案&#xff1a; f open("20091012134152.txt", encoding"gbk", mode"r") 改成 f open("20091012134152.tx…...

Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421

文章目录 0.前言1.参考文档2.基础介绍3.漏洞利用原理3.解决方案1. 升级Spring Boot版本2. 限制端点的访问3. 禁用环境端点4. 不公开敏感的Actuator端点5. 开启安全审计 0.前言 背景&#xff1a; Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421。被扫描到…...

Leetcode 最后一个单词的长度

给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 1&#xff1a; 输入&#xff1a;s “Hello World” 输出&#xff1a;5 解释&a…...

css ,less和sass的区别[简洁易懂

CSS、Less和Sass都是用于样式表编写和管理的技术&#xff0c;它们之间有以下区别&#xff1a; CSS&#xff08;层叠样式表&#xff09;是一种标准的样式表语言&#xff0c;用于描述网页的外观和样式。它是前端开发中最基础和常用的技术&#xff0c;所有网页都需要使用CSS来定义…...

有了ChatGPT的帮助,开发者的生产力会提高10-100倍

在过去的几十年里&#xff0c;可以说没有哪个领域像软件开发那样&#xff0c;以如此激进的方式发展。相关的技术层出不穷&#xff0c;速度惊人&#xff0c;生成式人工智能的出现更是将让这些发展继续加速。 尽管有些人猜测生成式人工智能产品将会终结软件开发这个人类职业&am…...

win10+QT5.15+cryptopp562 完整配置开发

1、准备如下几项内容&#xff1a; a、WIN10环境下的QT5.15.2安装包&#xff0c;QTCreator对应版本安装。&#xff08;自行安装&#xff09; b、cryptopp562安装包下载&#xff0c;官网&#xff1a;https://www.cryptopp.com/&#xff0c;这里没选择最新的8.7是因为mingw-32编译…...

多线程学习之多线程的案例

练习一&#xff1a;赠送礼物 需求&#xff1a;有100份礼品,两人同时发送&#xff0c;当剩下的礼品小于10份的时候则不再送出。利用多线程模拟该过程并将线程的名字和礼物的剩余数量打印出来. 示例&#xff1a; public class MyRunable implements Runnable {//第二种方式实现…...

iTOP-RK3588开发板Android12 设置系统默认不休眠

修改文件&#xff1a; device/rockchip/rk3588/overlay/frameworks/base/packages/SettingsProvider/res/values/defaults. xml 文件&#xff0c;如下图所示&#xff1a; - <integer name"def_screen_off_timeout">60000</integer> <integer name&q…...

java系统问题定位思路

一、在不同环境排查问题&#xff0c;有不同的方式 1、如果是在自己的开发环境排查问题&#xff0c;那你几乎可以使用任何自己熟悉的工具来排查&#xff0c;甚至可以进行单步调试。只要问题能重现&#xff0c;排查就不会太困难&#xff0c;最多就是把程序调试到 JDK 或三方类库内…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...