SpringBoot、MyBatis、thymeleaf、MySQL、ECharts

此案例使用的地图是在ECharts社区中查找的makeapie

准备条件

在mysql中创建数据库echartsdb数据库中创建表t_location_count表表中设置两个字段location与count添加表中的数据。

如附件中的

echartsdb.sql

xmlnshttp://maven.apache.org/POM/4.0.0

xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0

https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.3.5.RELEASE/versionrelativePath/

!--

--/parentgroupIdcom.laoma/groupIdartifactIdchinamappro/artifactIdversion0.0.1-SNAPSHOT/versionnamechinamappro/namedescriptionDemo

project

Boot/descriptionpropertiesjava.version1.8/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.0.1/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-jdbc/artifactId/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.29/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion1.18.20/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/project4.

4.1

项目结构设计controller、service、mapper、pojo

等resources/templates下创建index.html

页面如下

}LocationCountControllerController

public

locationCountService;RequestMapping(/)public

String

index;}ResponseBodyRequestMapping(/getData)public

Object

locationCountService.getData();}

interface

}LocationCountServiceImplService

public

locationCountMapper;Overridepublic

ListLocationCount

locationCountMapper.getData();}

public

t_location_count)ListLocationCount

getData();

xmlns:thhttp://www.thymeleaf.org

headmeta

charsetUTF-8titleECharts地图/title

/head

spring.application.namechinamapprospring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver

spring.datasource.urljdbc:mysql://192.168.170.100:3306/echartsdb

spring.datasource.password123456mybatis.type-aliases-packagecom.neuedu.chinamappro.pojo4.3

启动项目访问

xmlns:thhttp://www.thymeleaf.org

headmeta

charsetUTF-8titleECharts地图/titlescript

typetext/javascript

th:src{/js/jquery.min.js}/scriptscript

typetext/javascript

th:src{/js/echarts.min.js}/scriptscript

typetext/javascript

xmlns:thhttp://www.thymeleaf.org

headmeta

charsetUTF-8titleECharts地图/titlescript

typetext/javascript

th:src{/js/jquery.min.js}/scriptscript

typetext/javascript

th:src{/js/echarts.min.js}/scriptscript

typetext/javascript

中对应的内容可以从ECharts社区官网进行获取上面有官网地址

进入官网之后从显示的地图中找到各自需要的地图样式点击进去即可例如

找到对应的地图代码还需要根据自己的需要进行微调如下是某个地图的效果图

5.5.2

echarts.init(document.getElementById(map));fetch(/getData).then(response

{//-获取数据--start--var

item.count}data.push(obj)}//-获取数据--end--//-:省份的坐标var

geoCoordMap

geoCoord.concat(data[i].value)});}}return

res;};option

{//-地图的背景颜色的设置使用的是渐变色影响了文件的显示效果//-后期可以将背景颜色去掉这个页面使用个背景图片/*backgroundColor:

{type:

bottom,x:right,data:[pm2.5],textStyle:

{color:

value.data.value[2]}}},itemStyle:

{normal:

convertData(data),showEffectOn:

render,rippleEffect:

1},]};myChart.setOption(option);});

});