# springboot-2022-nocv
**Repository Path**: wang_yining/springboot-2022-nocv
## Basic Information
- **Project Name**: springboot-2022-nocv
- **Description**: springboot+mybatisplus+mysql+echarts的各种疫情可视化数据展示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 58
- **Forks**: 15
- **Created**: 2022-05-24
- **Last Updated**: 2024-01-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 【一直更新，对应讲解视频请到 bilibili: "Coding路人王"】
# springboot-2022-nocv
# 跟着视频来可以把项目做出来【为防止倒卖侵权： 源码不提供了】
#### 介绍
springboot+mybatisplus+mysql+echarts的各种疫情可视化数据展示
### 一、基于Springboot+MybatisPlus+Echarts+Mysql实现中国疫情地图
【Coding路人王：从0到1】
#### bilibili视频教学地址：https://www.bilibili.com/video/BV1aY411c7d1
### 1.1 构建springboot项目
```xml
com.baomidou
mybatis-plus-boot-starter
3.1.1
mysql
mysql-connector-java
5.1.47
```
```
spring:
datasource:
username: root
password: 123456
url: jdbc:mysql://localhost:3306/nocv?serverTimezone=UTC&useSSL=false&characterEncoding=utf-8
driver-class-name: com.mysql.jdbc.Driver
```
### 1.2 引入Echarts中国疫情地图
1.官网：https://echarts.apache.org/zh/ 下载JS文件引入项目
2.查看图例
3.快速使用
```html
```
```html
ECharts
```
**地图社区图例**：http://www.isqqw.com/
### 1.3 创建数据库
```sql
DROP TABLE IF EXISTS `nocv_data`;
CREATE TABLE `nocv_data` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`value` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of nocv_data
-- ----------------------------
INSERT INTO `nocv_data` VALUES ('1', '澳门', '95');
INSERT INTO `nocv_data` VALUES ('2', '香港', '35');
INSERT INTO `nocv_data` VALUES ('3', '台湾', '153');
INSERT INTO `nocv_data` VALUES ('4', '新疆', '56');
INSERT INTO `nocv_data` VALUES ('5', '宁夏', '26');
INSERT INTO `nocv_data` VALUES ('6', '青海', '26');
INSERT INTO `nocv_data` VALUES ('7', '甘肃', '39');
INSERT INTO `nocv_data` VALUES ('8', '陕西', '10');
```
### 1.4 编写代码
springboot
contRoller: /query
service:
dao:
entity:
### 1.5 展示数据
```
$.ajax({
url: "/query",
dataType: "json",
success: function (data) {
// 某种意义上来说，数组也是object
for (let i in data) {
dataList[i] = data[i];
}
myChart.setOption({
series: [
{
name: "确诊病例",
type: "map",
geoIndex: 0,
data: dataList
}
]
});
}
});
```
#### 软件架构
软件架构说明
#### 安装教程
1. xxxx
2. xxxx
3. xxxx
#### 使用说明
1. xxxx
2. xxxx
3. xxxx
#### 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request
#### 特技
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)