使用Springboot+MybatisPlus+Echarts+Mysql从0-1完成中国疫情地图可视化动态展示

最近北京疫情也严重了起来,突然想到了这个动态的echarts全国疫情数据动态展示,做的不好仅供参考

方便大家使用我直接导出了.直接运行即可

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;

相关依赖

  
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            mysql
            mysql-connector-java
            8.0.11
        
        
        
            org.projectlombok
            lombok
            true
        
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.1.1
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

相关js(注:china.js目前无法从echarts获取,大家可以通过一下链接获取.或者私聊我)

China.js链接：https://pan.baidu.com/s/1QLnaI0UZAi1WI9TRZuTSbw?pwd=2000
提取码：2000

配置

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配置

推荐一个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页面

访问 http://localhost:8080 出现地图说明完成,接下来进行改动,数据动态从数据库获取

entity

package com.wyh.entity;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;


@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;


@Mapper
//在mapper需要使用mybatisPlus需要继承BaseMapper<实体类>
public interface NovcMapper extends BaseMapper {
}

service

package com.wyh.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.wyh.entity.NovcData;



//在service需要使用mybatisPlus需要继承IService<实体类>
public interface NovcService extends IService {
}

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;


@Service
//实现类使用mybatisPlus需要继承extends ServiceImpl<实体mapper,实体类>
public class NovcServiceImpl extends ServiceImpl 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;



@RestController
public class NovcController {
   @Autowired
   private NovcService novcService;
   @RequestMapping("/query")
   public List queryData() {
      //通过数据库 查询全部数据并且返回
      return novcService.list();
   }
}

写到这里,后端就完成了,测试下接口
访问http://localhost:8080/query

最终就是这样的