零基础完成珍爱网项目 Java+MySQL+echarts （ZhenaiSpider+ZhenaiWeb）（五）

本文链接：https://blog.csdn.net/aifeinihao/article/details/81095453

全国的单身人士的分布进行报表分析

首先要导入地图的js包我放到了百度网盘上大家下载下来之后解压放到assert文件夹下即可

https://pan.baidu.com/s/1TPB7pzewfg43MXaiw24I8g

然后获取数据，由于全国省份较多我们可以百度，如图

然后拷贝到一个新建的txt文件夹下（我在这儿是a.txt）然后将所有的中文逗号换成英文的

然后在这个目录下打开命令行执行native2ascii a.txt b.txt 然后将 b.txt文件里的内容全选新建如下图所示的文件夹

然后如图写入china = 然后将b里的内容拷贝到等号的后面

然后获取数据将数据导入地图就大功告成了（是不是有点不可思议呢^_^）

public List<Map<String, Object>> queryChina() {
       List<Map<String, Object>> list = new ArrayList<>();
       // 读取所有的省信息
       Properties prop = new Properties();
       try {
           prop.load(ZhenaiDao.class.getClassLoader().getResourceAsStream("zhenai.properties"));
           String china = prop.getProperty("china");
           String[] privs = china.split(",");
           QueryRunner run = new QueryRunner(ds);
           String sql = "select count(1) from dogs where homeaddr like ?";
           for(String priv:privs) {
               int cnt = run.query(sql, new ScalarHandler<Long>(),priv+"%").intValue();
               Map<String, Object> map = new HashMap<>();
               map.put("name", priv);
               map.put("value", cnt);
               //放到
               list.add(map);
           }
       } catch (Exception e) {
           e.printStackTrace();
       }
       return list;

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
   href="<c:url value='/assert/bootstrap/css/bootstrap.css'/>">
<script type="text/javascript"
   src="<c:url value='/assert/jquery-3.2.1.min.js'/>"></script>
<script type="text/javascript"
   src="<c:url value='/assert/echarts.min.js'/>"></script>
<script type="text/javascript"
   src="<c:url value='/assert/bootstrap/js/bootstrap.min.js'/>"></script>
<script type="text/javascript"
   src="<c:url value='/assert/map/js/china.js'/>"></script>
</head>
<body>
   <div class="container">
       <div class="row">
           <div class="col-md-12">
               <div class="card">
                   <div class="card-header bg-primary text-white">
                       全国分布图
                   </div>
                   <div class="card-body">
                       <div id="data1" style="height: 600px"></div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</body>
<script type="text/javascript">
   var chart = echarts.init(document.getElementById("data1"));
   //声明数据
   //初始化地图的选项option
   var option = {
       backgroundColor : '#FFFFFF',
       title : {
           text : '全国单身人士分布图',
           subtext : '数据来自珍爱网',
           x : 'center'
       },
       tooltip : {
           trigger : 'item'
       },
       visualMap : { //用于指定分割值
           show : true,
           x : 'left',
           y : 'top',
           splitList : [ {
               start : 701,
               end : 5999
           }, {
               start : 601,
               end : 701
           }, {
               start : 301,
               end : 600
           }, {
               start : 101,
               end : 300
           }, {
               start : 0,
               end : 100
           }],
           color : [ '#DC143C', '#DA70D6', '#6495ED', '#00FF7F', '#33CC00' ]
       //这儿用于指定颜色
       },
       series : [ {
           name : '单身人士',
           type : 'map',//使用地址，显示的结果是地图
           mapType : 'china', //如果是其他省请引用不同的省js文件，然后输入：山东
           roam : true,
           data :[],
           label : {
               show : true,
               formatter : function(data) {
                   return data.value + "人";
               }
           }
       } ]
   };
   chart.setOption(option);

           $.get("<c:url value='/china'/>").done(function(dd){
               var ds = eval("("+dd+")");
               var option = {
                       series : [{
                           data:ds
                       }]
               };
               chart.setOption(option);
           });

</script>
</html>

效果如图示