SpringBoot+ECharts+Html 地图案例详解
1. 技术点
SpringBoot、MyBatis、thymeleaf、MySQL、ECharts 等
此案例使用的地图是在ECharts社区中查找的:makeapie echarts社区图表可视化案例
2. 准备条件
在mysql中创建数据库echartsdb,数据库中创建表t_location_count表,表中设置两个字段location与count,添加表中的数据。如:附件中的 echartsdb.sql
3. SpringBoot整合MyBatis
3.1 创建SpringBoot项目
3.2 项目的修改
3.2.1 删除mvn相关文件
3.2.2 pom.xml 依赖的修改
SpringBoot 版本为:2.3.5.RELEASE 、JDK修改为 1.8 等
具体内容,查看下文
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.5.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.laoma</groupId><artifactId>chinamappro</artifactId><version>0.0.1-SNAPSHOT</version><name>chinamappro</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.0.1</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.29</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.20</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>
4. 创建项目的相关内容
4.1 项目结构设计:controller、service、mapper、pojo 等,resources/templates下创建index.html 页面,如下:
具体代码如下:
===LocationCount===@Data
public class LocationCount {private String location;private Integer count;
}===LocationCountController===@Controller
public class LocationCountController {@Autowiredprivate LocationCountService locationCountService;@RequestMapping("/")public String index(){return "index";}@ResponseBody@RequestMapping("/getData")public Object getData(){return locationCountService.getData();}
}===LocationCountService===public interface LocationCountService {List<LocationCount> getData();
}===LocationCountServiceImpl===@Service
public class LocationCountServiceImpl implements LocationCountService {@Autowiredprivate LocationCountMapper locationCountMapper;@Overridepublic List<LocationCount> getData() {return locationCountMapper.getData();}
}===LocationCountMapper===@Mapper
public interface LocationCountMapper {@Select("SELECT * FROM t_location_count")List<LocationCount> getData();
}===index.html===<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>ECharts地图</title>
</head>
<body>可视化界面
</body>
</html>
4.2 application.properties 配置
spring.application.name=chinamapprospring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://192.168.170.100:3306/echartsdb
spring.datasource.username=root
spring.datasource.password=123456mybatis.type-aliases-package=com.neuedu.chinamappro.pojo
4.3 启动项目,访问 http://localhost:8080/getData 进行测试
5. echarts 插件引入及配置
5.1 需要使用echarts文件及地图文件china,使用文件及版本
jquery2.2.4 、echarts5.0.1、china
对应的文件查看:附件
5.2 项目中引入对应的文件:
resouces/static 下创建js目录,将对应的文件存入进去,如下图:
5.3. index.html 中引入 js文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>ECharts地图</title><script type="text/javascript" th:src="@{/js/jquery.min.js}"></script><script type="text/javascript" th:src="@{/js/echarts.min.js}"></script><script type="text/javascript" th:src="@{/js/china.js}"></script>
</head>
<body>可视化界面
</body>
</html>
5.4 在html中创建地图的存储容器并创建地图对应的js文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>ECharts地图</title><script type="text/javascript" th:src="@{/js/jquery.min.js}"></script><script type="text/javascript" th:src="@{/js/echarts.min.js}"></script><script type="text/javascript" th:src="@{/js/china.js}"></script>
</head>
<body><div id="map" style="width: 500px;height: 350px"></div><script type="text/javascript" th:src="@{/js/map.js}"></script>
</body>
</html>
5.5 map.js 中具体内容如下:
5.5.1 map.js 中对应的内容可以从ECharts社区官网进行获取(上面有官网地址)
进入官网之后,从显示的地图中找到各自需要的地图样式,点击进去即可,例如:
找到对应的地图代码,还需要根据自己的需要进行微调,如下是某个地图的效果图
5.5.2 map.js 具体代码
$(document).ready(function (){var myChart = echarts.init(document.getElementById('map'));fetch("/getData").then(response => response.json()).then(res => {//-获取数据--start--var data = [];for(var item of res){let obj = {name: item.location,value: item.count}data.push(obj)}//-获取数据--end--//-:省份的坐标var geoCoordMap = {'台湾': [121.5135,25.0308],'黑龙江': [127.9688, 45.368],'内蒙古': [110.3467, 41.4899],"吉林": [125.8154, 44.2584],'北京市': [116.4551, 40.2539],"辽宁": [123.1238, 42.1216],"河北": [114.4995, 38.1006],"天津": [117.4219, 39.4189],"山西": [112.3352, 37.9413],"陕西": [109.1162, 34.2004],"甘肃": [103.5901, 36.3043],"宁夏": [106.3586, 38.1775],"青海": [101.4038, 36.8207],"新疆": [87.9236, 43.5883],"西藏": [91.11, 29.97],"四川": [103.9526, 30.7617],"重庆": [108.384366, 30.439702],"山东": [117.1582, 36.8701],"河南": [113.4668, 34.6234],"江苏": [118.8062, 31.9208],"安徽": [117.29, 32.0581],"湖北": [114.3896, 30.6628],"浙江": [119.5313, 29.8773],"福建": [119.4543, 25.9222],"江西": [116.0046, 28.6633],"湖南": [113.0823, 28.2568],"贵州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"广东": [113.12244, 23.009505],"广西": [108.479, 23.1152],"海南": [110.3893, 19.8516],'上海': [121.4648, 31.2891],};var max = 480, min = 9; // todovar maxSize4Pin = 100, minSize4Pin = 20;var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};option = {//-地图的背景颜色的设置,使用的是渐变色,影响了文件的显示效果//-后期可以将背景颜色去掉这个页面使用个背景图片/*backgroundColor: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0, color: '#0f378f' // 0% 处的颜色}, {offset: 1, color: '#00091a' // 100% 处的颜色}],globalCoord: false // 缺省为 false},*/title: {top:20,text: '用户属地的评论人数分布',subtext: '',x: 'center',textStyle: {color: '#ccc'}},tooltip: {trigger: 'item',formatter: function (params) {if(typeof(params.value)[2] == "undefined"){return params.name + ' : ' + params.value;}else{return params.name + ' : ' + params.value[2];}}},/* legend: {orient: 'vertical',y: 'bottom',x: 'right',data:['pm2.5'],textStyle: {color: '#fff'}},*/legend: {orient: 'vertical',y: 'bottom',x:'right',data:['pm2.5'],textStyle: {color: '#fff'}},visualMap: {show: false,min: 0,max: 500,left: 'left',top: 'bottom',text: ['高', '低'], // 文本,默认为数值文本calculable: true,seriesIndex: [1],inRange: {}},geo: {map: 'china',show: true,roam: true,label: {normal: {show: false},emphasis: {show: false,}},itemStyle: {normal: {areaColor: '#3a7fd5',borderColor: '#0a53e9',//线shadowColor: '#092f8f',//外发光shadowBlur: 20},emphasis: {areaColor: '#0a2dae',//悬浮区背景}}},series : [{symbolSize: 5,label: {normal: {formatter: '{b}',position: 'right',show: true},emphasis: {show: true}},itemStyle: {normal: {color: '#fff'}},name: 'light',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),},{type: 'map',map: 'china',geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#FFFFFF',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{name: 'Top 5',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin',symbolSize: [50,50],label: {normal: {show: true,textStyle: {color: '#fff',fontSize: 9,},formatter (value){return value.data.value[2]}}},itemStyle: {normal: {color: '#D8BC37', //标志颜色}},data: convertData(data),showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,zlevel: 1},]};myChart.setOption(option);});
});
启动项目,访问:http://localhost:8080/ ,效果图如下
至此,整个案例整理结束!
相关文章:
SpringBoot+ECharts+Html 地图案例详解
1. 技术点 SpringBoot、MyBatis、thymeleaf、MySQL、ECharts 等 此案例使用的地图是在ECharts社区中查找的:makeapie echarts社区图表可视化案例 2. 准备条件 在mysql中创建数据库echartsdb,数据库中创建表t_location_count表,表中设置两个…...
达梦数据库 优化
谁进行优化?优化什么? 优化不能仅从数据库方面考虑,比如,在存储达到数据库极限、应用涉及人员设计的代码稀巴烂的情况下,进行调优就是杯水车薪的效果。 涉及到优化人员: 数据库管理员应用程序架构师应用…...
数据如何才能供得出、流得动、用得好、还安全
众所周知,数据要素已经列入基本生产要素,同时成立国家数据局进行工作统筹。目前数据要素如何发挥其价值,全国掀起了一浪一浪的热潮。 随着国外大语言模型的袭来,国内在大语言模型领域的应用也大放异彩,与此同时&#x…...
idea开发 java web 酒店推荐系统bootstrap框架开发协同过滤算法web结构java编程计算机网页
一、源码特点 java 酒店推荐推荐系统是一套完善的完整信息系统,结合java web开发和bootstrap UI框架完成本系统 采用协同过滤算法进行推荐 ,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式…...
Linux——线程控制
目录 前言 一、线程创建 1.创建线程 2.线程传递结构体 3.创建多线程 4.收到信号的线程 二、线程终止 三、线程等待 四、线程分离 五、取消线程 六、线程库管理的原理 七、站在语言角度理解pthread库 八、线程的局部存储 前言 前面我们学习了线程概念和线程创建&…...
【Leetcode 347】,前k个高频元素,小根堆的调整
参考题解 题目:给定一个数组,输出 前k个高频元素。 思路: 遍历数组,建立小根堆(小根堆的元素是元组(num,freq),排序规则是每个元素的频率)。 下面使用数组‘heap’&…...
【图论】【分类讨论】LeetCode3017按距离统计房屋对数目
本文涉及的知识点 图论 分类讨论 本题同解 【差分数组】【图论】【分类讨论】【整除以2】3017按距离统计房屋对数目 LeetCode3017按距离统计房屋对数目 给你三个 正整数 n 、x 和 y 。 在城市中,存在编号从 1 到 n 的房屋,由 n 条街道相连。对所有 …...
浅谈Yum 安装和 源码安装
浅谈Yum 安装和 源码安装 本文所叙述的Linux系统是基于RedHat发行版的CentOS7 yum安装 1. 前言 我们知道在Windows上下载的安装包后缀是 .exe ,与之对应的 在 Linux下的安装包的后缀是 .rpm rpm (Red Hat Package Manager) 是红帽软件包管理器 我们在Windows电脑…...
JavaEE初阶Day 3:多线程(1)
目录 Day 3:多线程(1)1. 线程1.1 引入线程的原因1.2 线程的定义1.3 为何线程更轻量1.4 问题 2. 多线程代码2.1 继承Thread重写run2.2 通过实现Runnable接口创建线程2.3 针对2.1的变形使用匿名内部类2.4 针对Runnable创建匿名内部类2.5 使用la…...
gutil140.dll是什么?gutil140.dll无法继续执行的解决方法
gutil140.dll文件是一个动态链接库(DLL)文件,通常与Microsoft Visual Studio 2015相关联。 gutil140.dll是开发过程中使用的工具函数集合,它辅助开发人员执行常见的编程任务,如文件操作、内存分配和字符串处理等。这个…...
在CentOS 7上安装Python 3.7.7
文章目录 一、实战步骤1. 安装编译工具2. 下载Python 3.7.7安装包3. 上传Python 3.7.7安装包4. 解压缩安装包5. 切换目录并编译安装6. 配置Python环境变量7. 使配置生效8. 验证安装是否成功 二、实战总结 一、实战步骤 1. 安装编译工具 在终端中执行以下命令 yum -y groupin…...
基于SpringBoot Vue宠物领养系统
一、📝功能介绍 基于SpringBoot Vue宠物领养系统 角色:管理员、用户 当游客打开系统的网址后,首先看到的就是首页界面。在这里,游客能够看到宠物领养救助平台的导航条显示首页、宠物招领、宠物认领、 宠物论坛、宠物资讯、后台管…...
ip命令
ip a 也是ip addr简写 [rootlocalhost ~]# ip a 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00inet 127.0.0.1/8 scope host lovalid_lft forever preferred_lft…...
【Kaggle】练习赛《鲍鱼年龄预测》(上)
前言 上一篇文章,讲解了《肥胖风险的多类别预测》机器学习方面的文章,主要是多分类算法的运用,本文是一个回归的算法,本期是2024年4月份的题目《Regression with an Abalone Dataset》即《鲍鱼年龄预测》,在此分享高手…...
Ruby 之交租阶段信息生成
题目 我看了一下,这个题目应该不是什么机密,所以先放上来了。大概意思是根据合同信息生成交租阶段信息。 解答 要求是要使用 Ruby 生成交租阶段信息,由于时间比较仓促,变量名那些就用得随意了些。要点主要有下面这些:…...
RUST语言值所有权之内存复制与移动
1.RUST中每个值都有一个所有者,每次只能有一个所有者 String::from函数会为字符串hello分配一块内存 内存示例如下: 在内存分配前调用s1正常输出 在分配s1给s2后调用报错 因为s1分配给s2后,s1的指向自动失效 s1被move到s2 s1自动释放 字符串克隆使用...
【Django学习笔记(三)】BootStrap介绍
BootStrap介绍 前言正文1、BootStrap 快速了解2、初识BootStrap2.1 下载地址2.2 创建目录2.3 引入BootStrap2.4 使用BootStrap 3、BootStrap 组件&样式3.1 导航条3.2 栅格系统3.3 container3.3.1 container3.3.2 container-fluid 3.4 面板3.5 媒体对象3.6 分页3.7 图标3.7.…...
ClickHouse开发相关(UDAF)
ClickHouse开发相关(UDAF) ClickHouse介绍 ClickHouse是一个开源、高性能的列式 OLAP 数据库管理系统,用于使用 SQL 进行实时分析。 为什么需要ClickHouse UDAF? ClickHouse中已存在了许多聚合函数,绝大多数情况下已经覆盖我们的需求,但是有时候我们仍然需要自定义函数…...
MySql并发事务问题
事务 事务概念: 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败。 事务的特性:ACID: 小…...
Windows下Docker创建Mysql5.7
安装 下载镜像,注意,要带版本号 docker pull mysql:5.7 等下载完成执行命令: 错误命令1,直接Windows下路径: docker run --name mysql57 --restartalways -p 3306:3306 -v F:/mysqldata/data57/log:/var/log/mysql…...
Redis(性能管理、主从复制、哨兵模式)概述及部署
目录 一、性能管理 1、查看Redis内存使用 2、内存碎片率 3、跟踪内存碎片率 4、内存使用率 5、内回收key 二、Redis集群有三种模式 三、Redis主从复制 1、主从复制的概念 2、主从复制的作用 3、主从复制的流程 4、搭建Redis主从复制 1.环境准备 2.安装Redis&#…...
LabVIEW挖坑指南
一、挖坑指南 1.1、输出变量放在条件框内 错误写法: 现象:如果没进入对应的分支,输出为默认值 正常写法: 让每个分支输出的值都在预料之内。 1.2、统计耗时不准 错误写法 现象:统计出来的耗时是2000ms 正常写法&a…...
docker容器环境安装记录(MAC M1)(完善中)
0、背景 在MAC M1中搭建商城项目环境时,采用docker统一管理开发工具,期间碰到了许多环境安装问题,做个总结。 1、安装redis 在宿主机新建redis.conf文件运行创建容器命令,进行容器创建、端口映射、文件挂载、以指定配置文件启动…...
Linux 常用命令(持续更新中...)
1. ls 查看文件列表命令 语法: ls [-a -l -h] [Linux路径] -a -l -h 是可选的选项 (-h需配合-l命令一起使用)Linux路径是此命令可选的参数 ls #查看当前目录所有非隐藏文件(平铺方式显示) ls -a #查看当前目录下所有文件 …...
xss.pwnfunction-Jefff
在eval中可以直接执行命令所以直接把"直接闭合在结尾再加上一个"因为后面的"没闭和会报错 ?jeffa";alert(1);" 或 ?jeffa"-alert(1)-" -是分隔符...
java——文件上传
一、文件上传——简介 文件上传的简介:文件上传是指将本地计算机中的文件传输到网络上的服务器或另一台计算机上的过程。在 Web 开发中,文件上传通常指的是将用户通过 Web 页面提交的文件(如图像、文档、音频、视频等)传输到服务器…...
RCE(远程命令执行)漏洞详解
漏洞描述 RCE(remote command/code execute,远程命令执行)漏洞 远程代码执行 (RCE) 攻击是指攻击者可以在一个组织的计算机或网络上运行恶意代码。执行攻击者控制的代码的能力可用于各种目的,包括部署额外的恶意软件或窃取敏感数据。 漏洞原理 远程代…...
K8S - Deployment 的版本回滚
当前状态 先看deployment rootk8s-master:~# kubectl get deploy -o wide --show-labels NAME READY UP-TO-DATE AVAILABLE AGE CONTAINERS IMAGES …...
53 v-bind 和 v-model 的实现和区别
前言 这个主要的来源是 偶尔的情况下 出现的问题 就比如是 el-select 中选择组件之后, 视图不回显, 然后 model 不更新等等 这个 其实就是 vue 中 视图 -> 模型 的数据同步, 我们通常意义上的处理一般是通过 模型 -> 数据 的数据同步, 比如 我们代码里面更新了 model.…...
VMware-16.0配置虚拟机网络模式
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、为什么要配置网络?二、配置步骤1.检查VMware服务2.进入配置页面3.添加网络模式1.Bridge2.NAT3.Host-only 4.DHCP租约5.静态IP 三、使用总结 前言…...
晋江seo/天津百度推广排名优化
这几天,没有更新博客。。。结果老婆大人怀疑我是不是有问题了,,,冤枉阿!!!<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />不过真的比较忙&…...
泰州住房和城乡建设网站/搜索引擎优化seo培训
记录游戏编辑器开发。 一般使用C# winform WPF,及C QT 进行开发 游戏编辑器开发一: QT开发环境配置 cocos2dx 3.3 QT5.3制作游戏编辑器 把 Cocos2d 嵌入 Qt 窗口中(2) cocosdx窗口(win32)嵌入wpf项目的初步实现 与Cocos2dx作者王哲及其团队技术讨论…...
做海外网站 服务器放哪/百度站长工具使用方法
-------------------------柏铭科技 BMtech007...
网站赚钱平台/班级优化大师下载安装
作者:秋时 杨昶 转载须说明出处 4.5 单据流转 4.5.1 单据流转的目的 单据流转主要为了实现业务关系的流转,并记录相互之间的关系。例如从销售订单生成销货单,两张单据之间有对应的关联关系。 4.5.2 单据流转的效果 单据流转时&#x…...
php网站开发的相关技术/软文推广例子
例题: 对下方出现的电话号码进行加密 需求最终效果: 客户1:181****5458,客户2:139****0342 tel "客户1:18119285458,客户2:13937560342" 一、最简单的方法: # 字…...
iis网站跳转/百度seo自动优化
在 Java 中,可以在另一个类中声明一个类,这称为嵌套类。嵌套类的可见性和范围受声明它的类的限制。 嵌套类的类型 嵌套类可以声明为静态或非静态。当我们将 static 修饰符应用于嵌套类时,它被称为静态嵌套类; 否则,它是非静态的。…...