当前位置: 首页 > 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 或三方类库内…...

k8s中部署prometheus并监控k8s集群以及nginx案例

4台主机 node1主机&#xff1a;k8s集群中的master node2主机&#xff1a;搭建了harbor仓库&#xff0c;存储所需的docker镜像 test3、4主机&#xff1a;k8s集群中的woker 搭建prometheus https://github.com/prometheus-operator/kube-prometheus 获取prometheus压缩包的…...

终极指南:如何用res-downloader一键下载全网无水印资源

终极指南&#xff1a;如何用res-downloader一键下载全网无水印资源 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是否经常…...

SDMatte部署避坑指南:首次加载延迟、模型切换等待、端口冲突解决方案

SDMatte部署避坑指南&#xff1a;首次加载延迟、模型切换等待、端口冲突解决方案 1. 为什么选择SDMatte进行图像抠图 SDMatte是一款专为高质量图像抠图设计的AI模型&#xff0c;特别适合处理那些传统抠图工具难以应对的复杂场景。想象一下&#xff0c;你需要把玻璃杯从背景中…...

防爆气象站为什么能够成为化工行业的必备仪器

防爆气象站能够成为化工行业的必备仪器&#xff0c;主要基于其本质安全设计、多参数精准监测、实时预警能力、环境适应性、合规管理支持及生产优化价值六大核心优势&#xff0c;这些特性直接解决了化工行业在安全管控、工艺控制及合规运营中的关键痛点。一、本质安全设计&#…...

十分钟用快马AI搭建中科院期刊分区查询工具原型

最近在帮实验室整理投稿期刊清单时&#xff0c;发现中科院分区查询是个高频需求。每次都要登录官网、输入验证码、反复跳转页面&#xff0c;特别影响效率。于是想做个简易查询工具&#xff0c;正好用InsCode(快马)平台试试快速原型开发&#xff0c;没想到十分钟就搭出了可用版本…...

基于S7-200 PLC和MCGS组态的灌装贴标生产线系统:带解释的梯形图程序、接线图原理图图...

基于S7-200 PLC和MCGS组态的灌装贴标生产线系统 带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面车间里那台老灌装线最近被我折腾得焕然一新&#xff0c;用S7-200 PLC搭配MCGS组态搞了个自动化改造。这活儿干下来发现几个关键点特别有意思&#xff0c;尤…...

KOReader终极指南:如何打造你的完美电子墨水屏阅读体验

KOReader终极指南&#xff1a;如何打造你的完美电子墨水屏阅读体验 【免费下载链接】koreader An ebook reader application supporting PDF, DjVu, EPUB, FB2 and many more formats, running on Cervantes, Kindle, Kobo, PocketBook and Android devices 项目地址: https:…...

translategemma-4b-it优化升级:Ollama部署后提升翻译质量的4个技巧

translategemma-4b-it优化升级&#xff1a;Ollama部署后提升翻译质量的4个技巧 你已经成功用Ollama部署了translategemma-4b-it&#xff0c;看着它把图片里的英文变成中文&#xff0c;是不是觉得挺神奇的&#xff1f;但用了几次后&#xff0c;你可能会发现一些问题&#xff1a…...

Qwen3.5-2B多场景教程:农业技术人员上传病虫害图→识别种类→推荐药剂

Qwen3.5-2B多场景教程&#xff1a;农业技术人员上传病虫害图→识别种类→推荐药剂 1. 引言&#xff1a;农业病虫害识别的技术痛点 在农业生产中&#xff0c;病虫害防治一直是困扰农户的核心问题。传统识别方式存在三大痛点&#xff1a; 识别门槛高&#xff1a;需要专业农技人…...

知识获取受限?5款开源工具助你合法解锁付费内容

知识获取受限&#xff1f;5款开源工具助你合法解锁付费内容 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 你是否曾在学术研究关键时刻被期刊付费墙阻挡&#xff1f;是否因新闻网站的…...