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

news2024/12/27 13:34:14

导入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.coloradmin.cn/o/937769.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第五章 树与二叉树 二、二叉树的定义和常考考点

一、定义 二叉树可以用以下方式详细定义: 二叉树是由节点构成的树形结构,每个节点最多可以有两个子节点。每个节点有以下几个属性: 值:存储该节点的数据。左子节点:有一个左子节点,如果没有则为空。右子节…

大数据(四)主流大数据技术

大数据(四)主流大数据技术 一、写在前面的话 To 那些被折磨打击的好女孩(好男孩): 有些事情我们无法选择,也无法逃避伤害。 但请你在任何时候都记住: 你可能在一些人面前,一文不值&a…

基于内存池的 简单高效的数据库 SDK简介

基于内存池的 简单高效的数据库 SDK简介 下载地址: https://gitee.com/tankaishuai/powerful_sdks/tree/master/shm_alloc_db_heap shm_alloc_db_heap 是一个基于内存池实现的简单高效的文件型数据存储引擎,利用它可以轻松地像访问内存块一样读、写、增…

国产系统下开发QT程序总结

国产系统下开发QT程序总结 1. 国产系统简介 开发国产系统客户端的过程中,会出现兼容性问题。以下介绍Kylin和UOS环境下开发QT程序, 首先麒麟和统信这两个系统基于Ubuntu开发的。所以在Ubuntu开发理论上在国产系统上也能运行。芯片架构又分为amd,arm,mi…

谷歌翻译国内使用

谷歌已经退出中国市场,如果正常想使用的谷歌翻译的话,需要科学上网才可以 一些涉及到谷歌翻译的软件工具软件也无法正常使用,如chrome浏览器右键翻译,potplayer在线字幕实时翻译等等 目前最有效的解决方法就是通过修改hosts文件来…

C语言链表梳理-2

链表头使用结构体&#xff1a;struct Class 链表中的每一项使用结构体&#xff1a;struct Student#include <stdio.h>struct Student {char * StudentName;int StudentAge;int StudentSex;struct Student * NextStudent; };struct Class {char *ClassName;struct Stude…

web、HTTP协议

目录 一、Web基础 1.1 HTML概述 1.1.1 HTML的文件结构 1.2 HTML中的部分基本标签 二.HTTP协议 2.1.http概念 2.2.HTTP协议版本 2.3.http请求方法 2.4.HTTP请求访问的完整过程 2.5.http状态码 2.6.http请求报文和响应报文 2.7.HTTP连接优化 三.httpd介绍 3.1.http…

前端基础(Element、vxe-table组件库的使用)

前言&#xff1a;在前端项目中&#xff0c;实际上&#xff0c;会用到组件库里的很多组件&#xff0c;本博客主要介绍Element、vxe-table这两个组件如何使用。 目录 Element 引入element 使用组件的步骤 使用对话框的示例代码 效果展示 vxe-table 引入vxe-table 成果展…

不使用ip和port如何进行网络通讯(raw socket应用例子)

主要应用方向是上位机和嵌软(如stm32单片机)通讯&#xff0c;不在单片机中嵌入web server&#xff0c;即mac层通讯。 一、下面先了解网络数据包组成。 常见数据包的包头长度: EtherHeader Length: 14 BytesTCP Header Length : 20 BytesUDP Header Length : 8 BytesIP Heade…

基于unity的轻量配置工具开发

工具结构&#xff1a;针对每张表格生成一个表格类&#xff0c;其中默认包含一个list和字典类型参数记录表格数据&#xff0c;初始化项目时将list中的数据转为按id索引的dictionary&#xff0c;用于访问数据。额外包含一个同名Temp后缀的类&#xff0c;记录表格的字段、备注等信…

李跳跳跳过APP开屏广告,附下载地址

最近&#xff0c;李跳跳APP宣布永久停止更新。据称&#xff0c;该应用导致了消费者权益的减损&#xff0c;被指构成不正当竞争&#xff0c;并因此遭受某大厂的投诉&#xff0c;甚至收到了一封法律函件的威胁。面对压力&#xff0c;最终李跳跳APP选择了退出舞台。 李跳跳APP是什…

cs231n assignment3 q3 Image Captioning with Transformers

文章目录 先啰嗦直接看代码Q3 Image Captioning with TransformersMultiHeadAttention.forward题面解析代码输出 Positional Encoding题面解析代码输出 transformer.forward题面解析代码输出 先啰嗦直接看代码 Q3 Image Captioning with Transformers MultiHeadAttention.for…

c++ style casting

https://www.youtube.com/watch?vUfrR1nNfoeY&listPLE28375D4AC946CC3&index17

Python3 列表

Python3 列表 序列是 Python 中最基本的数据结构。 序列中的每个值都有对应的位置值&#xff0c;称之为索引&#xff0c;第一个索引是 0&#xff0c;第二个索引是 1&#xff0c;依此类推。 Python 有 6 个序列的内置类型&#xff0c;但最常见的是列表和元组。 列表都可以进…

TensorBoard的使用

TensorBoard&#xff1a;对图像进行变换 1. SummaryWriter的使用 ctrl类出现注释解析&#xff1a; 将条目直接log_dir写入要成为由TensorBoard使用。 “摘要编写器”类提供了一个高级 API 来创建事件文件&#xff0c;并在给定目录中添加摘要和事件。该类更新文件内容异步。…

Python系统监控利器

迷途小书童的 Note 读完需要 3分钟 速读仅需 1 分钟 1 简介 计算机系统监控对保证服务质量和排查故障非常重要。psutil 是一个用于 Python 的跨平台系统监控和过程管理工具&#xff0c;为我们提供便捷的监控方案。 2 基本工作原理 psutil 使用 Python 封装了系统调用&#xff0…

C++学习记录——이십팔 C++11(4)

文章目录 包装器1、functional2、绑定 这一篇比较简短&#xff0c;只是因为后要写异常和智能指针&#xff0c;所以就把它单独放在了一篇博客&#xff0c;后面新开几篇博客来写异常和智能指针 包装器 1、functional 包装器是一个类模板&#xff0c;对可调用对象类型进行再封装…

安全学习DAY20_自动化工具项目武器库介绍

信息打点-自动化工具 文章目录 信息打点-自动化工具本节思维导图&概述 各类红蓝队优秀工具项目集合&#xff1a;All-Defense-Tool 自动化-武器库部署F8x 自动化信息搜集-网络空间AsamF 自动化信息搜集-企查信息ENScan 自动化信息搜集-综合架构-ARL&NemoARL灯塔Nemo_Go …

MySQL 特殊语法时间格式以及Greadb连接

一、时间语法 DATE_FORMAT和to_char() select to_char(now(),%Y-%m-%d %H:%i:%s) from dual; select DATE_FORMAT(now(),%Y-%m-%d %H:%i:%s) from dual; 2.to_date() 和STR_TO_DATE(#{date},%Y-%m-%d ) select to_date(now(),yyyy-mm-dd hh24:mi:ss) from dual;

null和undefined区别

1.undefined&#xff0c;表示无值。 比如下面场景&#xff1a; a. 变量被声明了&#xff0c;但是没有被赋值&#xff1b; b. 调用函数的时候&#xff0c;应该给函数传参却没有给函数传这个参数打印出来就是 undefined&#xff1b; c. 访问一个对象中没有的属性&#xff1b;…