一、基于Springboot+MybatisPlus+Echarts+Mysql实现各种疫情地图及管理系统
【Coding路人王：从0到1】
源码:
讲解地址：https://www.bilibili.com/video/BV1aY411c7d1?share_source=copy_web
1.1 构建springboot项目
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.1.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
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.快速使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
地图社区图例：http://www.isqqw.com/
1.3 创建数据库
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', '陕西', '3265');
INSERT INTO `nocv_data` VALUES ('9', '西藏', '0');
INSERT INTO `nocv_data` VALUES ('10', '云南', '255');
INSERT INTO `nocv_data` VALUES ('11', '贵州', '130');
INSERT INTO `nocv_data` VALUES ('12', '四川', '333');
INSERT INTO `nocv_data` VALUES ('13', '重庆', '125');
INSERT INTO `nocv_data` VALUES ('14', '海南', '1236');
INSERT INTO `nocv_data` VALUES ('15', '广西', '1324');
INSERT INTO `nocv_data` VALUES ('16', '广东', '1111');
INSERT INTO `nocv_data` VALUES ('17', '湖南', '231');
INSERT INTO `nocv_data` VALUES ('18', '湖北', '124');
INSERT INTO `nocv_data` VALUES ('19', '河南', '32655');
INSERT INTO `nocv_data` VALUES ('20', '山东', '35888');
INSERT INTO `nocv_data` VALUES ('21', '江西', '336');
INSERT INTO `nocv_data` VALUES ('22', '福建', '129');
INSERT INTO `nocv_data` VALUES ('23', '安徽', '666');
INSERT INTO `nocv_data` VALUES ('24', '浙江', '1357');
INSERT INTO `nocv_data` VALUES ('25', '江苏', '633');
INSERT INTO `nocv_data` VALUES ('26', '上海', '12345');
INSERT INTO `nocv_data` VALUES ('27', '黑龙江', '365');
INSERT INTO `nocv_data` VALUES ('28', '吉林', '59');
INSERT INTO `nocv_data` VALUES ('29', '辽宁', '3265');
INSERT INTO `nocv_data` VALUES ('30', '内蒙古', '236');
INSERT INTO `nocv_data` VALUES ('31', '山西', '132');
INSERT INTO `nocv_data` VALUES ('32', '河北', '22');
INSERT INTO `nocv_data` VALUES ('33', '天津', '159');
INSERT INTO `nocv_data` VALUES ('34', '北京', '620');
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
}
]
});
}
});
