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

news/2025/2/9 5:40:10 标签: 前端, echarts, javascript, 可视化, 地图, 热力图

导入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或者说其他更好用的框架啥的。如果有时间的话,推倒重来整一个前后端项目来实现也是可以的。

先这样吧。


http://www.niftyadmin.cn/n/4980735.html

相关文章

揭秘:企业在线帮助中心的一些技巧秘密!

企业在线帮助中心是现代企业为了提供更好的客户服务而建立的一个重要渠道。它可以帮助客户解决问题、获取产品信息和技术支持。在这篇文章中,我将揭秘一些企业在线帮助中心的技巧秘密,希望能够帮助企业提供更好的客户服务。 一、清晰的导航结构 一个清…

Java接口中的default(默认方法)

Java的接口中有一种特殊的方法,叫做默认方法。 接口中的默认方法有以下特点: default方法可以有方法体接口中的普通方法必须被实现类重写;默认方法可以不被实现类重写。 这个特点在实践中的具体作用是: 当我们进行业务扩展时&…

软件测试用例经典方法 | 单元测试法案例

单元测试又称模块测试,是对软件设计的最小单元的功能、性能、接口和设计约束等的正确性进行检验,检查程序在语法、格式和逻辑上的错误,并验证程序是否符合规范,以发现单元内部可能存在的各种缺陷。 单元测试的对象是软件设计的最…

部署问题集合(二十一)从零开始搭建一台NAS服务器(Linux虚拟机)

前言 因工作需要,需要从零通过虚拟机搭建一台NAS服务器,以此记录下来 步骤 1、创建虚拟机 通过VMWare创建一台新虚拟机,虚拟机内存和磁盘自定义,不过建议尽量大一点 2、服务器端配置 查看是否安装有NFS服务:rpm …

Unity记录4.6-存储-第四阶段总结

文章首发见博客:https://mwhls.top/4822.html。 无图/格式错误/后续更新请见首发页。 更多更新请到mwhls.top查看 欢迎留言提问或批评建议,私信不回。 汇总:Unity 记录 摘要:存储初步实现的总结 总结-2023/08/19 实现了tile存储&…

克隆 Windows 硬盘的 5 个理由

您什么时候需要克隆 Windows 硬盘? ​根据用户研究,以下是您的五个常见原因: 备份:克隆 Windows 硬盘是创建所有数据备份的推荐方法。如果发生任何硬盘故障,您可以快速将所有数据恢复到新硬盘。 升级:如…

Mavan进阶之父子模块(继承)

文章目录 Mavan 父子模块(继承)1. 父项目2. 子项目3. 父子项目的使用 Mavan 父子模块(继承) 「继承」是 Maven 中很强大的一种功能,继承可以使得子 pom 可以获得 parent 中的各项配置,可以对子 pom 进行统…

phpspreadsheet导出excel自动获得列,数字下标

安装composer require phpoffice/phpspreadsheetuse PhpOffice\PhpSpreadsheet\Spreadsheet; use PhpOffice\PhpSpreadsheet\Writer\Xlsx; use PhpOffice\PhpSpreadsheet\Style\Border;$spreadsheet new Spreadsheet(); $sheet $spreadsheet->getActiveSheet();//从65开&a…