一、基于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:
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
}
]
});
}
});