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

先这样吧。

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

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

相关文章

贪心算法总结篇

文章转自代码随想录 贪心算法总结篇 我刚刚开始讲解贪心系列的时候就说了,贪心系列并不打算严格的从简单到困难这么个顺序来讲解。 因为贪心的简单题可能往往过于简单甚至感觉不到贪心,如果我连续几天讲解简单的贪心,估计录友们一定会不耐…

地下管线三维自动建模软件MagicPipe3D V3.0发布

2023年9月1日经纬管网建模系统MagicPipe3D V3.0正式发布,该版本经过众多用户应用和反馈,在三维地下管网建模效果、效率、适配性方面均有显著提升!MagicPipe3D本地离线参数化构建地下管网模型(包括管道、接头、附属设施等&#xff…

OpenCV(五):图像颜色空间转换

目录 1.图像颜色空间介绍 RGB 颜色空间 2.HSV 颜色空间 3.RGBA 颜色空间 2.图像数据类型间的互相转换convertTo() 3.不同颜色空间互相转换cvtColor() 4.Android JNI demo 1.图像颜色空间介绍 RGB 颜色空间 RGB 颜色空间是最常见的颜色表示方式之一,其中 R、…

linux安装JDK及hadoop运行环境搭建

1.linux中安装jdk (1)下载JDK至opt/install目录下,opt下创建目录soft,并解压至当前目录 tar xvf ./jdk-8u321-linux-x64.tar.gz -C /opt/soft/ (2)改名 (3)配置环境变量&#xf…

C++哈希(散列)与unordered关联式容器封装(Map、Set)

一、unordered系列关联式容器 在C98中,STL提供了以红黑树为底层数据结构的关联式容器(map、set等),查询时的效率可以达到,最差情况下需要比较红黑树的高度次。因此在C11中,STL提供了四个unordered系列关联式容器&…

CotEditor for mac 4.0.1 中文版(开源文本编辑器)

coteditorformac是一款简单实用的基于Cocoa的macOS纯文本编辑器,coteditormac版本可以用来编辑网页、结构化文本、程序源代码等文本文件,使用起来非常方便。 CotEditor for Mac具有正则表达式搜索和替换、语法高亮、编码等实用功能,而CotEdi…

JavaScript(函数,作用域和闭包)

目录 一,什么是函数1.1,常用系统函数1.2,函数声明 1.3,函数表达式二,预解析2.1,函数自调用 2.2,回调函数三,变量的作用域3.1,隐式全局变量 四,作用域与块级作…

AUTOSAR开发工具DaVinci Configurator里的Modules

DaVinci Configurator 里面有个Module这个概念。 如你所想,基本上跟AUTOSAR架构里面的Module相对应 从软件的Project菜单中的Basic Editor项可以打开 打开这个菜单后,会看到很多Modules项以及其相关配置项 这个Basic Editor显示出整个ECU配置中的所有…

ABeam×Startup | 德硕管理咨询(深圳)创新研究团队拜访微漾创客空间

近日,德硕管理咨询(深圳)(以下简称:“ABeam-SZ”)创新研究团队前往微漾创客空间(以下简称:微漾)拜访参观,并展开合作交流。会议上,双方相互介绍了…

Module not found: Error: Can‘t resolve ‘less-loader‘解决办法

前言: 主要是在自我提升方面,感觉自己做后端还是需要继续努力,争取炮筒前后端,作为一个全栈软阿金开发人员,所以还是需要努力下,找个方面,目前是计划学会Vue,这样后端有java和pytho…

Spring Security 超详细整合 JWT,能否拿下看你自己!

文章目录 1.JWT 入门1.1 JWT 概念1.2 JWT 应用场景1.3 为何选择 JWT基于 Session 的传统认证基于 JWT 的认证 1.4 JWT 的结构标头(Header)载荷(Payload)签名(Signature) 1.5 RBAC (Role-Based Access Contr…

day-01 Docker

一、docker简介 Docker 是一种开源的容器化平台,它可以帮助开发人员将应用程序及其依赖项打包成一个独立的、可移植的容器,而无需担心环境差异和依赖问题。通过使用 Docker,您可以更轻松地创建、分发和运行应用程序,无论是在开发、…

最新AI系统ChatGPT镜像源码+详细图文搭建教程/支持GPT4.0/AI绘画+MJ绘画/Dall-E2绘画/H5端/Prompt知识库/思维导图生成

一、AI系统 如何搭建部署AI创作ChatGPT系统呢?小编这里写一个详细图文教程吧!SparkAi使用Nestjs和Vue3框架技术,持续集成AI能力到AIGC系统! 1.1 程序核心功能 程序已支持ChatGPT3.5/GPT-4提问、AI绘画、Midjourney绘画&#xf…

uview ui 1.x ActonSheet项太多,设置滚动(亲测有效)

问题:ActionSheet滚动不了。 使用uview ui :u-action-sheet, 但是item太多,超出屏幕了, 查了一下文档,并没有设置滚动的地方。 官方文档:ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-a…

ChatGPT总结(持续更新)

目录 体验渠道 weTab CSDN-AI助手 其他插件 ChatGPT简介 ChatGPT主要用途 ChatGPT发展历程 GPT-4架构的特点和优势 ChatGPT的工作原理 神经网络和自然语言处理技术 Transformer模型 模型训练优化技巧 ChatGPT对程序员的帮助 与ChatGPT交互和提问技巧 ChatGPT未来…

Linux知识点 -- Linux多线程(三)

Linux知识点 – Linux多线程(三) 文章目录 Linux知识点 -- Linux多线程(三)一、线程同步1.概念理解2.条件变量3.使用条件变量进行线程同步 二、生产者消费者模型1.概念2.基于BlockingQueue的生产者消费者模型3.单生产者单消费者模…

Ansible学习笔记7

user模块: user模块用于管理用户账户和用户属性。 如果是windows要换一个win_user模块。 创建用户:present: [rootlocalhost ~]# ansible group1 -m user -a "nameaaa statepresent" 192.168.17.106 | CHANGED > {"ansi…

三、JVM监控及诊断工具-GUI篇

目录 一、工具概述二、jconsole(了解即可)1、基本概述2、启动3、三种连接方式4、作用 三、Visual VM 一、工具概述 二、jconsole(了解即可) 1、基本概述 从Java5开始,在JDK中自带的Java监控和管理控制台用于对JVM中内…

RabbitMQ工作模式-路由模式

官方文档参考:https://www.rabbitmq.com/tutorials/tutorial-four-python.html 使用direct类型的Exchange,发N条消息并使用不同的routingKey,消费者定义队列并将队列routingKey、Exchange绑定。此时使用direct模式Exchange必须要routingKey完成匹配的情况下消息才…

正中优配:什么叫融资融券

融资融券是股市中常见的一种买卖方法。融资是指投资者通过某些途径借到资金,用以购买股票。融券是指投资者借股票卖出,并承诺在未来某一时点将股票偿还。 融资融券的实质是一种杠杆买卖:投资者通过融资或融券,增加了自己的资金量…