可视化代码

visualization/pom.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>2.1.6.RELEASE</version>
+        <relativePath/> <!-- lookup parent from repository -->
+    </parent>
+    <groupId>com.example</groupId>
+    <artifactId>demo</artifactId>
+    <version>0.0.1-SNAPSHOT</version>
+    <name>demo</name>
+    <description>Demo project for Spring Boot</description>
+    <properties>
+        <java.version>1.8</java.version>
+    </properties>
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter</artifactId>
+        </dependency>
+        <!--   springboot web     -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+
+        <!--        使用thymeleaf渲染html-->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>

visualization/src/main/java/com/example/demo/DemoApplication.java

@@ -0,0 +1,14 @@
+package com.example.demo;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
+import org.springframework.stereotype.Controller;
+
+@SpringBootApplication(exclude= {DataSourceAutoConfiguration.class})
+public class DemoApplication {
+
+    public static void main(String[] args) {
+        SpringApplication.run(DemoApplication.class, args);
+    }
+}

visualization/src/main/java/com/example/demo/controller/ShowHtmlController.java

@@ -0,0 +1,14 @@
+package com.example.demo.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+
+
+@Controller
+public class ShowHtmlController {
+    @RequestMapping(value = "/showvs",method = RequestMethod.GET)
+    public String get(){
+        return "index";
+    }
+}

visualization/src/main/resources/application.properties

@@ -0,0 +1,9 @@
+
+#·ÃÎʶ˿ںÅ
+server.port=8080
+
+#±àÂë¸ñʽ
+server.tomcat.uri-encoding=utf-8
+
+spring.thymeleaf.cache=false
+spring.thymeleaf.encoding=utf-8

visualization/src/main/resources/static/data.json

@@ -0,0 +1,142 @@
+[
+  {
+    "name": "南海诸岛",
+    "value": 0
+  },
+  {
+    "name": "北京",
+    "value": 54
+  },
+  {
+    "name": "天津",
+    "value": 13
+  },
+  {
+    "name": "上海",
+    "value": 40
+  },
+  {
+    "name": "重庆",
+    "value": 75
+  },
+  {
+    "name": "河北",
+    "value": 13
+  },
+  {
+    "name": "河南",
+    "value": 83
+  },
+  {
+    "name": "云南",
+    "value": 11
+  },
+  {
+    "name": "辽宁",
+    "value": 19
+  },
+  {
+    "name": "黑龙江",
+    "value": 15
+  },
+  {
+    "name": "湖南",
+    "value": 69
+  },
+  {
+    "name": "安徽",
+    "value": 60
+  },
+  {
+    "name": "山东",
+    "value": 39
+  },
+  {
+    "name": "新疆",
+    "value": 4
+  },
+  {
+    "name": "江苏",
+    "value": 31
+  },
+  {
+    "name": "浙江",
+    "value": 104
+  },
+  {
+    "name": "江西",
+    "value": 36
+  },
+  {
+    "name": "湖北",
+    "value": 1052
+  },
+  {
+    "name": "广西",
+    "value": 33
+  },
+  {
+    "name": "甘肃",
+    "value": 7
+  },
+  {
+    "name": "山西",
+    "value": 9
+  },
+  {
+    "name": "内蒙古",
+    "value": 7
+  },
+  {
+    "name": "陕西",
+    "value": 22
+  },
+  {
+    "name": "吉林",
+    "value": 4
+  },
+  {
+    "name": "福建",
+    "value": 18
+  },
+  {
+    "name": "贵州",
+    "value": 5
+  },
+  {
+    "name": "广东",
+    "value": 98
+  },
+  {
+    "name": "青海",
+    "value": 1
+  },
+  {
+    "name": "西藏",
+    "value": 0
+  },
+  {
+    "name": "四川",
+    "value": 44
+  },
+  {
+    "name": "宁夏",
+    "value": 4
+  },
+  {
+    "name": "海南",
+    "value": 22
+  },
+  {
+    "name": "台湾",
+    "value": 3
+  },
+  {
+    "name": "香港",
+    "value": 5
+  },
+  {
+    "name": "澳门",
+    "value": 5
+  }
+]

visualization/src/main/resources/templates/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>020新冠确诊人数地图</title>
+</head>
+<body>
+<center>
+    <div id="main" style="height: 800px;width:900px;"></div>
+</center>
+<script type="text/JavaScript" src="/echarts.min.js"></script>
+<script type="text/JavaScript" src="/jquery-2.1.1.min.js"></script>
+<script type="text/JavaScript" src="/china.js"></script>
+
+<script type="text/javascript">
+    /********** Begin **********/
+    var dataList = [];
+    var myChart = echarts.init(document.getElementById('main'));
+    $(document).ready(function () {
+        $.ajax({
+            type: "get",
+            dataType: "json",
+            url: "/data.json",
+            success: function (result) {
+                $.each(result,function(index,obj){
+                    dataList.push({"name": obj["name"], "value": obj["value"]})
+                });
+                myChart.setOption(option = {
+                    tooltip: {
+                        triggerOn: "mousemove",
+                        formatter: function (e, t, n) {
+                            return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
+                        }
+                    },
+                    visualMap: {
+                        min: 0,
+                        max: 1000,
+                        left: 26,
+                        bottom: 40,
+                        showLabel: !0,
+                        text: ["高", "低"],
+                        pieces: [{
+                            gt: 100,
+                            label: "> 100 人",
+                            color: "#7f1100"
+                        }, {
+                            gte: 10,
+                            lte: 100,
+                            label: "10 - 100 人",
+                            color: "#ff5428"
+                        }, {
+                            gte: 1,
+                            lt: 10,
+                            label: "1 - 9 人",
+                            color: "#ff8c71"
+                        }, {
+                            gt: 0,
+                            lt: 1,
+                            label: "疑似",
+                            color: "#ffd768"
+                        }, {
+                            value: 0,
+                            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: dataList
+                    }]
+                });
+            }
+        });
+    });
+
+
+
+
+
+    /********** End **********/
+</script>
+</body>
+</html>