echart中国地图下钻实现代码

Posted yanwenhui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echart中国地图下钻实现代码相关的知识,希望对你有一定的参考价值。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

 </script>
<body>


<div align="center">
 <form action="servlet?method=zhuanfa" method="post">
       请输入要查询的日期<input type="date" value="2020-02-08" name="date"/>${selectmasg }
      <button value="确认查询">确认查询</button>
       </form>

  

 </div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
 
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<!-- ECharts单文件引入 -->
<button class="btn btn-default" onclick="getAllConfirmed()" style="padding-top:20px;font-size:20px">中国疫情图图</button>
<div id="main" style="height:400px" ></div>
<div id="main2" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表

    var dt;
  function getAllConfirmed(){
      
    $.ajax({
        url:"servlet?method=getconfirmed",
        async:true,
        type:"POST",
        data:{date1:"${date}",
             },
        success:function(data){
            dt = data;
            //alert(dt);
        },
        error:function(){
            alert("请求失败");
        },
        dataType:"json"
    });
 
            var myChart = echarts.init(document.getElementById(main));
          /*  var xd = new Array(0);
            var yd = new Array(0);
            var zd = new Array(0);
            var wd = new Array(0);
            for(var i=0;i<35;i++){
                xd.push(dt[i].province);
                yd.push(dt[i].confirmed_num);
                zd.push(dt[i].cured_num);
                wd.push(dt[i].dead_num);
            }*/
            function getData1(){
                var jsonstr = [];
                for (var i = 0; i < 34; i++) {
                var json = {};
                json.name = dt[i].province;
                json.value = parseInt(dt[i].confirmed_num);
                jsonstr.push(json);
                }
                return jsonstr;
                }
            function getData2(){
                var jsonstr = [];
                for (var i = 0; i < 34; i++) {
                var json = {};
                json.name = dt[i].province;
                json.value = parseInt(dt[i].cured_num);
                jsonstr.push(json);
                }
                return jsonstr;
                }
            function getData3(){
                var jsonstr = [];
                for (var i = 0; i < 34; i++) {
                var json = {};
                json.name = dt[i].province;
                json.value = parseInt(dt[i].dead_num);
                jsonstr.push(json);
                }
                return jsonstr;
                }
            
    var option = {
        title : {
            text: 中国疫情图,
           
            x:center
        },
        tooltip : {
            trigger: item
        },
        legend: {
            orient: vertical,
            x:left,
            data:[确诊,治愈,死亡]
        },
        dataRange: {
            min: 0,
            max: 2500,
            x: left,
            y: bottom,
            text:[,],           // 文本,默认为数值文本
            calculable : true
        },
        toolbox: {
            show: true,
            orient : vertical,
            x: right,
            y: center,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        roamController: {
            show: true,
            x: right,
            mapTypeControl: {
                china: true
            }
        },
        series : [
            {
                name: 确诊,
                type: map,
                mapType: china,
                roam: false,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:getData1(),
            },
            {
                name: 治愈,
                type: map,
                mapType: china,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:getData2(),
            },
            {
                name: 死亡,
                type: map,
                mapType: china,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:getData3(),
            }
        ]
    };
    myChart.setOption(option);
  myChart.on(click, function (params) {
         var url = "servlet?method=getcitychange&provincename="+params.name;
          window.location.href =url;
    });
    
    }
  
  
</script>
</body>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
 
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<!-- ECharts单文件引入 -->

<div id="main" style="height:400px" ></div>

<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表

    var dtr;

      
    $.ajax({
        url:"servlet?method=getcity",
        async:true,
        type:"POST",
        data:{},
        success:function(data){
            dtr = data;
            //alert(dt);
        },
        error:function(){
            alert("请求失败");
        },
        dataType:"json"
    });
    var provinces = {
            上海:"json/11.json",
            河北:json/13.json,
            山西:json/14.json,
            内蒙古:json/15.json,
            辽宁:json/21.json,
            吉林:json/22.json,
            黑龙江:json/23.json,
            江苏: json/32.json,
            浙江: json/33.json,
            安徽: json/34.json,
            福建: json/35.json,
            江西: json/36.json,
            山东: json/37.json,
            河南: json/41.json,
            湖北: json/42.json,
            湖南: json/43.json,
            广东: json/44.json,
            广西: json/45.json,
            海南: json/46.json,
            四川: json/51.json,
            贵州: json/52.json,
            云南: json/53.json,
            西藏: json/54.json,
            陕西: json/61.json,
            甘肃: json/62.json,
            青海: json/63.json,
            宁夏: json/64.json,
            新疆: json/65.json,
            北京: json/11.json,
            天津: json/12.json,
            重庆: json/50.json,
            香港: json/81.json,
            澳门: json/82.json
        };

            
          /*  var xd = new Array(0);
            var yd = new Array(0);
            var zd = new Array(0);
            var wd = new Array(0);
            for(var i=0;i<35;i++){
                xd.push(dt[i].province);
                yd.push(dt[i].confirmed_num);
                zd.push(dt[i].cured_num);
                wd.push(dt[i].dead_num);
            }*/
            function getData1(){
                var jsonstr = [];
                for (var i = 0; i < dtr.length; i++) {
                var json = {};
                json.name = dtr[i].city;
                json.value = parseInt(dtr[i].confirmed_num);
                jsonstr.push(json);
                }
                return jsonstr;
                }
            function getData2(){
                var jsonstr = [];
                for (var i = 0; i < dtr.length; i++) {
                var json = {};
                json.name = dtr[i].city;
                json.value = parseInt(dtr[i].cured_num);
                jsonstr.push(json);
                }
                return jsonstr;
                }
            function getData3(){
                var jsonstr = [];
                for (var i = 0; i < dtr.length; i++) {
                var json = {};
                json.name = dtr[i].city;
                json.value = parseInt(dtr[i].dead_num);
                jsonstr.push(json);
                }
                return jsonstr;
                }
           
           
                alert(ccccccccccc)
            var chart = echarts.init(document.getElementById("main"));
            $.getJSON(provinces[${pppp}], function(data) {
                echarts.registerMap(${pppp}, data);
                chart.setOption(option = {
                        title : {
                            text: 疫情图,
                           
                            x:center
                        },
                        tooltip :{
                            trigger: item
                        },
                        legend: {
                            orient: vertical,
                            x:left,
                            data:[确诊,治愈,死亡]
                        
                        },
                        dataRange: {
                            min: 0,
                            max: 2500,
                            x: left,
                            y: bottom,
                            text:[,],           // 文本,默认为数值文本
                            calculable : true
                        },
                        toolbox: {
                            show: true,
                            orient : vertical,
                            x: right,
                            y: center,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        roamController: {
                            show: true,
                            x: right,
                            mapTypeControl: {
                                china: true
                            }
                        },
                        series : [
                            {
                                name: 确诊,
                                type: map,
                                mapType: ${pppp},
                                roam: false,
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:getData1(),
                            },
                            {
                                name: 治愈,
                                type: map,
                                mapType: ${pppp},
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:getData2(),
                            },
                            {
                                name: 死亡,
                                type: map,
                                mapType: ${pppp},
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:getData3(),
                            }
                        ]
                        
                        
                })
            });      

</script>
</body>
package courseDao;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import Domin.Easy;
import Domin.Province;

public class ProvinceDao {
    /*public static void main(String[] args) throws ParseException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        String startStr="2020-02-08";
        Date date2 = sdf.parse(startStr);
        List<Province> pro=getProvince(date2);
        List<Easy> easy=new ArrayList<>();
        int flgas=0;
        for (Province province : pro) {
            
            if(easy.size()==0) {
                Easy newes=new Easy(date2,province.getProvince(),province.getConfirmed_num(),province.getYisi_num()
                        ,province.getCured_num(),province.getDead_num()    );
                easy.add(newes);        
            }
            else {
                int flag=0;
                int k=-1;
                for (int i = 0; i < easy.size(); i++) {
                   Easy es=new Easy();
                   es=easy.get(i);
                   if(es.getProvince().equals(province.getProvince())) {
                       flag=1;
                       k=i;
                   }
                  }
                if(flag==1) {
                    int a=Integer.parseInt(easy.get(k).getConfirmed_num());
                    int b=Integer.parseInt(province.getConfirmed_num());
                    easy.get(k).setConfirmed_num((a+b)+"");
                    easy.get(k).setCured_num((a+b)+"");
                    easy.get(k).setDead_num((a+b)+"");
                    easy.get(k).setYisi_num((a+b)+"");
                    easy.get(k).setDate(date2);
                }
                else if(flag==0) {
                    Easy newes=new Easy(date2,province.getProvince(),province.getConfirmed_num(),province.getYisi_num()
                            ,province.getCured_num(),province.getDead_num()    );
                    easy.add(newes);
                }
                }}
        
    }*/
     public static List<Province> getProvince(Date date1){
         Connection con=null;
            PreparedStatement psts=null;
            ResultSet rs=null;
            List<Province> ll=new ArrayList<Province>();
            SimpleDateFormat formatter= new SimpleDateFormat("yyyy-MM-dd");
            String date2=formatter.format(date1);
                
                    try {
                        con=JDBCUtils.getConnection();
                        String sql="select * from info WHERE Date LIKE ‘%"+date2+"%‘";
                        psts= con.prepareStatement(sql);
                        //psts.setString(1, date);
                        rs=psts.executeQuery();
                        while(rs.next()){
                            int id=rs.getInt("Id");
                            String province=rs.getString("Province");
                            String city=rs.getString("City");
                            String Confirmed_num=rs.getString("Confirmed_num");
                            String Yisi_num=rs.getString("Yisi_num");
                            String Cured_num=rs.getString("Cured_num");
                            String ciDead_numty=rs.getString("Dead_num");
                            String Code=rs.getString("Code");
                            Province newprovince=new Province(id,date1,province,city,Confirmed_num,Yisi_num,Cured_num,ciDead_numty,Code);
                            ll.add(newprovince);}
                    } catch (ClassNotFoundException | IOException | SQLException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
            
            return ll;
        }
    /* public static List<Province> getProvince(Date date1){
         Connection con=null;
            PreparedStatement psts=null;
            ResultSet rs=null;
            List<Province> ll=new ArrayList<Province>();
            SimpleDateFormat formatter= new SimpleDateFormat("yyyy-MM-dd");
            String date2=formatter.format(date1);
                
                    try {
                        con=JDBCUtils.getConnection();
                        String sql="select * from info WHERE Date LIKE ‘%"+date2+"%‘";
                        psts= con.prepareStatement(sql);
                        //psts.setString(1, date);
                        rs=psts.executeQuery();
                        while(rs.next()){
                            int id=rs.getInt("Id");
                            String province=rs.getString("Province");
                            String city=rs.getString("City");
                            String Confirmed_num=rs.getString("Confirmed_num");
                            String Yisi_num=rs.getString("Yisi_num");
                            String Cured_num=rs.getString("Cured_num");
                            String ciDead_numty=rs.getString("Dead_num");
                            String Code=rs.getString("Code");
                            Province newprovince=new Province(id,date1,province,city,Confirmed_num,Yisi_num,Cured_num,ciDead_numty,Code);
                            ll.add(newprovince);}
                    } catch (ClassNotFoundException | IOException | SQLException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
            
            return ll;
        }
        */
}
 1 package Domin;
 2 
 3 import java.util.Date;
 4 
 5 public class Province {
 6     private int id;
 7     private Date date;
 8     private String province;
 9     private String city;
10     private String confirmed_num;
11     private String yisi_num;
12     private String cured_num;
13     private String dead_num;
14     private String code;
15     public Province() {
16         super();
17         // TODO Auto-generated constructor stub
18     }
19     public Province(int id, Date date, String province, String city, String confirmed_num, String yisi_num,
20             String cured_num, String dead_num, String code) {
21         super();
22         this.id = id;
23         this.date = date;
24         this.province = province;
25         this.city = city;
26         this.confirmed_num = confirmed_num;
27         this.yisi_num = yisi_num;
28         this.cured_num = cured_num;
29         this.dead_num = dead_num;
30         this.code = code;
31     }
32     public int getId() {
33         return id;
34     }
35     public void setId(int id) {
36         this.id = id;
37     }
38     public Date getDate() {
39         return date;
40     }
41     public void setDate(Date date) {
42         this.date = date;
43     }
44     public String getProvince() {
45         return province;
46     }
47     public void setProvince(String province) {
48         this.province = province;
49     }
50     public String getCity() {
51         return city;
52     }
53     public void setCity(String city) {
54         this.city = city;
55     }
56     public String getConfirmed_num() {
57         return confirmed_num;
58     }
59     public void setConfirmed_num(String confirmed_num) {
60         this.confirmed_num = confirmed_num;
61     }
62     public String getYisi_num() {
63         return yisi_num;
64     }
65     public void setYisi_num(String yisi_num) {
66         this.yisi_num = yisi_num;
67     }
68     public String getCured_num() {
69         return cured_num;
70     }
71     public void setCured_num(String cured_num) {
72         this.cured_num = cured_num;
73     }
74     public String getDead_num() {
75         return dead_num;
76     }
77     public void setDead_num(String dead_num) {
78         this.dead_num = dead_num;
79     }
80     public String getCode() {
81         return code;
82     }
83     public void setCode(String code) {
84         this.code = code;
85     }
86     @Override
87     public String toString() {
88         return "????" + province + ", ???У?" + city
89                 + ", ?????????" + confirmed_num + ", ??????????" + yisi_num + "??????????" + cured_num
90                 + ", ??????????" + dead_num;
91     }
92     
93 }

技术图片

 

 

技术图片

 下钻城市数据缺失是因为数据库只传了一张表,数据不全。(图片挂了,好像传不上来)

学习总结:

1.还是挺乱的,json数据传输一开始没整明白,还解决了tomcat在eclipse上运行缓慢的问题

2.需要用到的js   有echart.min.js 以及china.js ,jquery-3.1.4.js,j全国son找了很久scdn上好多骗分的,哭死。总之是学了不少js的新知识吧(其实是之前没学会的知识)....

3.官方文档真的太难读懂了,可能因为我笨笨,然后读了很多人的代码,不过好消息是,我好像怎么使用github去获取自己想要的资源了。

4.看到朋友圈朋友发全国疫情图福建清零了还是很开心!

5.希望自己以后可以读懂希望自己可以坚持博客记录,突然感觉还是蛮有成就感的!

以上是关于echart中国地图下钻实现代码的主要内容,如果未能解决你的问题,请参考以下文章

Echarts地图散点+下钻怎么实现?

数据视化Echarts+百度地图API实现市县区级下钻

echarts实现省市区地图下钻

关于echarts地图下钻。

vue+echarts+geoJson+MakeAPie实现地图下钻和数据显示

vue+ECharts4.x地图下钻/散点分布以及热力图