关键词：
最近北京疫情也严重了起来,突然想到了这个动态的echarts全国疫情数据动态展示,做的不好仅供参考
前言:用到的技术栈:Springboot+MybatisPlus+Echarts+Mysql
1 创建数据库表和新增基本的数据
方便大家使用我直接导出了.直接运行即可
/*
Navicat Premium Data Transfer
Source Server : 本地库
Source Server Type : MySQL
Source Server Version : 80017
Source Host : localhost:3306
Source Schema : novc
Target Server Type : MySQL
Target Server Version : 80017
File Encoding : 65001
Date: 13/05/2022 14:11:21
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for novc_data
-- ----------------------------
DROP TABLE IF EXISTS `novc_data`;
CREATE TABLE `novc_data` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
`name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '省区名称',
`value` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '确诊人数',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of novc_data
-- ----------------------------
INSERT INTO `novc_data` VALUES (1, '北京', '212');
INSERT INTO `novc_data` VALUES (2, '天津', '233');
INSERT INTO `novc_data` VALUES (3, '上海', '32');
INSERT INTO `novc_data` VALUES (4, '重庆', '34');
INSERT INTO `novc_data` VALUES (5, '河北', '126');
INSERT INTO `novc_data` VALUES (6, '河南', '12');
INSERT INTO `novc_data` VALUES (7, '云南', '113');
INSERT INTO `novc_data` VALUES (8, '辽宁', '45');
INSERT INTO `novc_data` VALUES (9, '黑龙江', '156');
INSERT INTO `novc_data` VALUES (10, '湖南', '600');
INSERT INTO `novc_data` VALUES (11, '安徽', '400');
INSERT INTO `novc_data` VALUES (12, '山东', '270');
INSERT INTO `novc_data` VALUES (13, '新疆', '45');
INSERT INTO `novc_data` VALUES (14, '江苏', '308');
INSERT INTO `novc_data` VALUES (15, '浙江', '865');
INSERT INTO `novc_data` VALUES (16, '江西', '476');
INSERT INTO `novc_data` VALUES (17, '湖北', '13522');
INSERT INTO `novc_data` VALUES (18, '广西', '139');
INSERT INTO `novc_data` VALUES (19, '甘肃', '55');
INSERT INTO `novc_data` VALUES (20, '山西', '75');
INSERT INTO `novc_data` VALUES (21, '内蒙古', '34');
INSERT INTO `novc_data` VALUES (22, '陕西', '142');
INSERT INTO `novc_data` VALUES (23, '吉林', '42');
INSERT INTO `novc_data` VALUES (24, '福建', '179');
INSERT INTO `novc_data` VALUES (25, '贵州', '56');
INSERT INTO `novc_data` VALUES (26, '广东', '800');
INSERT INTO `novc_data` VALUES (27, '青海', '15');
INSERT INTO `novc_data` VALUES (28, '西藏', '1');
INSERT INTO `novc_data` VALUES (29, '四川', '134');
INSERT INTO `novc_data` VALUES (30, '宁夏', '34');
INSERT INTO `novc_data` VALUES (31, '海南', '80');
INSERT INTO `novc_data` VALUES (32, '台湾', '13');
INSERT INTO `novc_data` VALUES (33, '香港', '13');
INSERT INTO `novc_data` VALUES (34, '澳门', '65');
SET FOREIGN_KEY_CHECKS = 1;
2 新建项目并且引入相关依赖和相关js
相关依赖
<dependencies>
<!--spring web-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.11</version>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!--mybatisPlus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.1.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
相关js(注:china.js目前无法从echarts获取,大家可以通过一下链接获取.或者私聊我)
China.js链接：https://pan.baidu.com/s/1QLnaI0UZAi1WI9TRZuTSbw?pwd=2000
提取码：2000
3 编写基本的模块代码
配置
spring:
datasource:
#mysql
driver-class-name: com.mysql.cj.jdbc.Driver
password: root
url: jdbc:mysql:///novc?serverTimezone=GMT&allowPublicKeyRetrieval=true&useSSL=false&characterEncoding=utf8
username: root
#web
web:
resources:
static-locations: classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/, classpath:/templates/
index配置
4 静态页面(echarts写死数据)
推荐一个echarts网址:https://www.isqqw.com
我参考的是这个:https://www.isqqw.com/echartsdetail?id=23968
spring:
datasource:
#mysql
driver-class-name: com.mysql.cj.jdbc.Driver
password: root
url: jdbc:mysql:///novc?serverTimezone=GMT&allowPublicKeyRetrieval=true&useSSL=false&characterEncoding=utf8
username: root
#web
web:
resources:
static-locations: classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/, classpath:/templates/
index页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入相关js文件-->
<script src="../echarts/echarts.js"></script>
<script src="/echarts/china.js"></script>
<script src="/echarts/jquery.js"></script>
<title>中国疫情图</title>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 900px;height:700px"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
window.dataList = [
name: '澳门', value: 18,
name: '香港', value: 273,
name: '台湾', value: 153,
name: '新疆', value: 76,
name: '宁夏', value: 75,
name: '青海', value: 18,
name: '甘肃', value: 134,
name: '陕西', value: 248,
name: '西藏', value: 1,
name: '云南', value: 176,
name: '贵州', value: 146,
name: '四川', value: 543,
name: '重庆', value: 576,
name: '海南', value: 168,
name: '广西', value: 254,
name: '广东', value: 1407,
name: '湖南', value: 1018,
name: '湖北', value: 67800,
name: '河南', value: 1273,
name: '山东', value: 765,
name: '江西', value: 936,
name: '福建', value: 307,
name: '安徽', value: 990,
name: '浙江', value: 1237,
name: '江苏', value: 633,
name: '上海', value: 394,
name: '黑龙江', value: 484,
name: '吉林', value: 93,
name: '辽宁', value: 126,
name: '内蒙古', value: 75,
name: '山西', value: 133,
name: '河北', value: 319,
name: '天津', value: 137,
name: '北京', value: 512
];
option =
tooltip:
triggerOn: "click",
formatter: function(e, t, n)
return '.5' == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
,
toolbox:
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature:
dataView: readOnly: false,
restore: ,
saveAsImage:
, // 提供下载工具
visualMap:
min: 0,
max: 100000,
left: 26,
bottom: 40,
showLabel: !0,
text: ["高", "低"],
pieces: [
gt: 10000,
label: "> 10000人",
color: "#7f1100"
,
gte: 1000,
lte: 10000,
label: "1000 - 10000人",
color: "#ff5428"
,
gte: 100,
lt: 1000,
label: "100 - 1000人",
color: "#ff8c71"
,
gt: 10,
lt: 100,
label: "10 - 100人",
color: "#ffd768"
,
gt: 1,
lt: 10,
label: "1 - 10人",
color: "#ffffff"
],
show: !0
,
geo:
map: "china",
roam: !1,
scaleLimit:
min: 1,
max: 2
,
zoom: 1.23,
top: 120,
label:
normal:
show: !0,
fontSize: "14",
color: "rgba(0,0,0,0.7)"
,
itemStyle:
normal:
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
,
emphasis:
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
,
series: [
name: "确诊病例",
type: "map",
geoIndex: 0,
data: window.dataList
]
;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
访问 http://localhost:8080 出现地图说明完成,接下来进行改动,数据动态从数据库获取
5 动态页面(数据从数据库查询进行展示)
6 后端业务编写
entity
package com.wyh.entity;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
/**
* @program: SpringBoot_ChinaNocv
* @description: novc实体类
* @author: 魏一鹤
* @createDate: 2022-05-13 14:36
**/
@Data
@TableName("novc_data")
public class NovcData
//id
private Integer id;
//省
private String name;
//确诊人数
private Integer value;
mapper
package com.wyh.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.wyh.entity.NovcData;
import org.apache.ibatis.annotations.Mapper;
/**
* @program: SpringBoot_ChinaNocv
* @description: index mapper
* @author: 魏一鹤
* @createDate: 2022-05-13 14:31
**/
@Mapper
//在mapper需要使用mybatisPlus需要继承BaseMapper<实体类>
public interface NovcMapper extends BaseMapper<NovcData>
service
package com.wyh.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.wyh.entity.NovcData;
/**
* @program: SpringBoot_ChinaNocv
* @description: novc service
* @author: 魏一鹤
* @createDate: 2022-05-13 14:41
**/
//在service需要使用mybatisPlus需要继承IService<实体类>
public interface NovcService extends IService<NovcData>
serviceImpl
package com.wyh.service.impl;
import com.baomidou.mybatisplus.extension.service.IService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.wyh.entity.NovcData;
import com.wyh.mapper.NovcMapper;
import com.wyh.service.NovcService;
import org.springframework.stereotype.Service;
/**
* @program: SpringBoot_ChinaNocv
* @description: novc service接口实现
* @author: 魏一鹤
* @createDate: 2022-05-13 14:42
**/
@Service
//实现类使用mybatisPlus需要继承extends ServiceImpl<实体mapper,实体类>
public class NovcServiceImpl extends ServiceImpl<NovcMapper, NovcData> implements NovcService
controller
package com.wyh.controller;
import com.wyh.entity.NovcData;
import com.wyh.service.NovcService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* @program: SpringBoot_ChinaNocv
* @description: 控制器
* @author: 魏一鹤
* @createDate: 2022-05-13 12:14
**/
@RestController
public class NovcController
@Autowired
private NovcService novcService;
@RequestMapping("/query")
public 查看详情
springboot+postgresql+mybatisplus整合的一些坑
技术架构:springboot+mybatisplus+postgresql+gradle自定义TypeHnadler的使用自定义的TypeHandler主要是转换Jsonb和array等类型如果是使用mybatisplus的内置方法,则需要在实体字段加上@TableField注解,并且需要在类名上启动@TableName(autoResultMap=true)//autoRe... 查看详情
springboot+postgresql+mybatisplus整合的一些坑
技术架构:springboot+mybatisplus+postgresql+gradle自定义TypeHnadler的使用自定义的TypeHandler主要是转换Jsonb和array等类型如果是使用mybatisplus的内置方法,则需要在实体字段加上@TableField注解,并且需要在类名上启动@TableName(autoResultMap=true)//autoRe... 查看详情
springboot简单使用mybatisplus(代码片段)
目录什么是mybatisplus特性目录结构首先导入依赖：创建数据库：连接数据库创建实体类：(使用了lombok插件)mapper接口然后需要在主启动类上去扫描我们的mapper包下的所有接口然后在测试类中测试查询操作 更新操作小结... 查看详情
springboot简单使用mybatisplus(代码片段)
目录什么是mybatisplus特性目录结构首先导入依赖：创建数据库：连接数据库创建实体类：(使用了lombok插件)mapper接口然后需要在主启动类上去扫描我们的mapper包下的所有接口然后在测试类中测试查询操作 更新操作小结... 查看详情
使用springboot+druid+mybatisplus完成多数据源配置
...介 1.版本 springboot版本为2.0.3.RELEASE，mybatisplus版本为2.1.9，druid版本为1.1.9，swagger版本为2.7.0 2.项目地址 https://gitee.com/hsbt2333/ssm.git 3.留个记录，方便查找 开发步骤： 1.新建springbo 查看详情
使用gradle构建一个springboot+springsecurity+mybatisplus的多模块系统
##目标-使用Gradle构建一个多模块系统，熟悉脚本-搭建SpringBoot,SpringSecurity,Mybatis子模块，实现基本的HelloWorld。可以独立运行。总体步骤：新建父工程(gradle)-配置maven-新建多个子工程(SpringBoot,SpringSecurity,Mybatis)- 修改父子的build.g... 查看详情
mybatisplus——入门案例(代码片段)
MyBatisPlusMyBatisPlus（简称MP）是基于MyBatis框架基础上开发的增强型工具，旨在简化开发、提高效率开发方式基于MyBatis使用MyBatisPlus基于Spring使用MyBatisPlus基于SpringBoot使用MyBatisPlus SpringBoot整合MyBatis开发过程（复习）创建SpringBoot... 查看详情
springboot整合mybatisplus配置动态数据源
参考技术AMybatisPlus特性快速开始初始化测试数据表：父工程依赖该工程用于依赖管理，pom如下：创建MyBaitsPlus工程依赖如下：properties配置在这里配置数据库连接，以及数据连接池与mybatisplus的配置等常规增删改查实现创建实体类... 查看详情
使用springboot+mybatisplus+echarts+mysql从0-1完成中国疫情地图可视化动态展示(代码片段)
...态展示,做的不好仅供参考前言:用到的技术栈:Springboot+MybatisPlus+Echarts+Mysql1创建数据库表和新增基本的数据方便大家使用我直接导出了.直接运行即可/*NavicatPremiumDataTransferSourceServer:本地库SourceServerTyp 查看详情
mybatisplus
今日目标基于MyBatisPlus完成标准Dao的增删改查功能掌握MyBatisPlus中的分页及条件查询构建掌握主键ID的生成策略了解MyBatisPlus的代码生成器1，MyBatisPlus入门案例与简介这一节我们来学习下MyBatisPlus的入门案例与简介，这个和... 查看详情
springboot整合mybatisplus(代码片段)
...工具：IDEA基础环境：Maven+JDK8所用技术：SpringBoot、lombok、MybatisPlusSpringBoot版本：2.1.41.3涉及知识点MybatisPlus简介、特性、架构MybatisPlus快速入门MybatisPlus的基本CRUDMybatisPlus的高级查询：like 查看详情
springboot项目配置模板(springboot+mybatisplus+druid)(代码片段)
...目录项目基本配置热加载开启数据库配置配置德鲁伊使用mybatisplus总结这个其实也只是我自己当前使用的一个模板，而且还没有整合Redis只是单纯地去整合了一下springboot和mybatisplus。这里的话我的数据库是使用的mysql5.7关于8.0... 查看详情
spring-boot-mybatisplus(代码片段)
文章目录Springboot整合MybatisPlus上一节springbootJPA源码MybatisPlusspringboot整合MybatisPlussql打印mybatisPlus通用mapperMybatisPlus通用ServiceMybatisPlus分页MybatisPlus条件查询QueryWrapperUpdateWrapperLambdaQueryWrapperLambdaUpdateWrapperMybatisPlusAR主键生成策略逻辑... 查看详情
mybatisplus生成数据库访问模板代码
关于为什么使用MybatisPlus以及使用SpringBoot如何集成MybatisPlus这两个问题。如果不太清楚的小伙伴可以查看之前分享的博客SpringBoot集成MybatisPlus简化数据库操作。今天主要和大家分享的是通过MybatisPlusgenerator生成数据库访问的模板... 查看详情
springboot整合mybatis以及mybatisplus
这篇文档介绍整合的过程 查看详情
springboot整合mybatis以及mybatisplus
这篇文档介绍整合的过程 查看详情
优雅写代码系统springboot+mybatis+pagehelper+mybatisplus+druid教你如何优雅写代码(代码片段)
文章目录spring基本搭建整合mybatispom配置mybatis配置设置数据源设置sqlsessionfactory设置扫描设置开启事务资源放行测试结果思考&&疑问使用通用mapper功能使用mybatis-plus使用分页插件mybatis-plus自带分页github分页插件使用常规版本... 查看详情