安吉网站制作,简历模板大学生,物联网型网站开发,工业设计作品集1. 技术点
SpringBoot、MyBatis、thymeleaf、MySQL、ECharts 等
此案例使用的地图是在ECharts社区中查找的#xff1a;makeapie echarts社区图表可视化案例 2. 准备条件 在mysql中创建数据库echartsdb#xff0c;数据库中创建表t_location_count表#xff0c;表中设置两个…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 version1.0 encodingUTF-8?
project 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/ !-- lookup parent from repository --/parentgroupIdcom.laoma/groupIdartifactIdchinamappro/artifactIdversion0.0.1-SNAPSHOT/versionnamechinamappro/namedescriptionDemo project for Spring 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 页面如下 具体代码如下
LocationCountData
public class LocationCount {private String location;private Integer count;
}LocationCountControllerController
public class LocationCountController {Autowiredprivate LocationCountService locationCountService;RequestMapping(/)public String index(){return index;}ResponseBodyRequestMapping(/getData)public Object getData(){return locationCountService.getData();}
}LocationCountServicepublic interface LocationCountService {ListLocationCount getData();
}LocationCountServiceImplService
public class LocationCountServiceImpl implements LocationCountService {Autowiredprivate LocationCountMapper locationCountMapper;Overridepublic ListLocationCount getData() {return locationCountMapper.getData();}
}LocationCountMapperMapper
public interface LocationCountMapper {Select(SELECT * FROM t_location_count)ListLocationCount getData();
}index.html!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8titleECharts地图/title
/head
body可视化界面
/body
/html
4.2 application.properties 配置
spring.application.namechinamapprospring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver
spring.datasource.urljdbc:mysql://192.168.170.100:3306/echartsdb
spring.datasource.usernameroot
spring.datasource.password123456mybatis.type-aliases-packagecom.neuedu.chinamappro.pojo4.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 langen 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 th:src{/js/china.js}/script
/head
body可视化界面
/body
/html
5.4 在html中创建地图的存储容器并创建地图对应的js文件
!DOCTYPE html
html langen 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 th:src{/js/china.js}/script
/head
bodydiv idmap stylewidth: 500px;height: 350px/divscript typetext/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/ 效果图如下 至此整个案例整理结束
