Echarts 制作用户所在地地图分析

深碍√TFBOYSˉ_ 2022-05-26 08:37 279阅读 0赞

**代码:**

**1.SSM框架先编写人员的数据接口:**

package com.ytdx.entity;
    
    import java.io.Serializable;
    
    public class UserByAddress implements Serializable {
    
    	private String address;
    	private Integer num;
    	public UserByAddress(String address, Integer num) {
    		super();
    		this.address = address;
    		this.num = num;
    	}
    	public String getAddress() {
    		return address;
    	}
    	public void setAddress(String address) {
    		this.address = address;
    	}
    	public Integer getNum() {
    		return num;
    	}
    	public void setNum(Integer num) {
    		this.num = num;
    	}
    	
    }

@RequestMapping(value="/UserAddress")
    	public void UserAddress(HttpServletResponse response) {
    		ListObject listObject = new ListObject();
    		List<UserByAddress> list = new ArrayList<UserByAddress>();              //后台传数据,可以改成数据库查询的方式
    		list.add(new UserByAddress("北京",1));list.add(new UserByAddress("天津",0));
    		list.add(new UserByAddress("上海",2));list.add(new UserByAddress("重庆",2));
    		list.add(new UserByAddress("河北",0));list.add(new UserByAddress("河南",3));
    		list.add(new UserByAddress("云南",0));list.add(new UserByAddress("辽宁",0));
    		list.add(new UserByAddress("黑龙江",0));list.add(new UserByAddress("湖南",3));
    		list.add(new UserByAddress("安徽",2));list.add(new UserByAddress("山东",8));
    		list.add(new UserByAddress("新疆",4));list.add(new UserByAddress("江苏",2));
    		list.add(new UserByAddress("江苏",2));list.add(new UserByAddress("浙江",3));
    		list.add(new UserByAddress("江西",5));list.add(new UserByAddress("湖北",0));
    		list.add(new UserByAddress("广西",0));list.add(new UserByAddress("甘肃",0));
    		list.add(new UserByAddress("山西",0));list.add(new UserByAddress("内蒙古",0));
    		list.add(new UserByAddress("陕西",0));list.add(new UserByAddress("吉林",3));
    		list.add(new UserByAddress("福建",3));list.add(new UserByAddress("贵州",5));
    		list.add(new UserByAddress("广东",1));list.add(new UserByAddress("青海",0));
    		list.add(new UserByAddress("西藏",0));list.add(new UserByAddress("四川",4));
    		list.add(new UserByAddress("宁夏",3));list.add(new UserByAddress("海南",6));
    		list.add(new UserByAddress("台湾",0));list.add(new UserByAddress("香港",0));
    		list.add(new UserByAddress("澳门",0));
    		listObject.setItems(list);
    		listObject.setCode(StatusCode.CODE_SUCCESS);
    		listObject.setMsg("成功");
    		ResponseUtils.renderJson(response, JsonUtils.toJson(listObject));
    	}

**访问 http://localhost:8080/SnsSystem/UserAddress ,返回的JSON数据**

{
    	"code": "success",
    	"msg": "成功",
    	"time": 1524892457124,
    	"items": [{
    		"address": "北京",
    		"num": 1
    	}, {
    		"address": "天津",
    		"num": 0
    	}, {
    		"address": "上海",
    		"num": 2
    	}, {
    		"address": "重庆",
    		"num": 2
    	}, {
    		"address": "河北",
    		"num": 0
    	}, {
    		"address": "河南",
    		"num": 3
    	}, {
    		"address": "云南",
    		"num": 0
    	}, {
    		"address": "辽宁",
    		"num": 0
    	}, {
    		"address": "黑龙江",
    		"num": 0
    	}, {
    		"address": "湖南",
    		"num": 3
    	}, {
    		"address": "安徽",
    		"num": 2
    	}, {
    		"address": "山东",
    		"num": 8
    	}, {
    		"address": "新疆",
    		"num": 4
    	}, {
    		"address": "江苏",
    		"num": 2
    	}, {
    		"address": "江苏",
    		"num": 2
    	}, {
    		"address": "浙江",
    		"num": 3
    	}, {
    		"address": "江西",
    		"num": 5
    	}, {
    		"address": "湖北",
    		"num": 0
    	}, {
    		"address": "广西",
    		"num": 0
    	}, {
    		"address": "甘肃",
    		"num": 0
    	}, {
    		"address": "山西",
    		"num": 0
    	}, {
    		"address": "内蒙古",
    		"num": 0
    	}, {
    		"address": "陕西",
    		"num": 0
    	}, {
    		"address": "吉林",
    		"num": 3
    	}, {
    		"address": "福建",
    		"num": 3
    	}, {
    		"address": "贵州",
    		"num": 5
    	}, {
    		"address": "广东",
    		"num": 1
    	}, {
    		"address": "青海",
    		"num": 0
    	}, {
    		"address": "西藏",
    		"num": 0
    	}, {
    		"address": "四川",
    		"num": 4
    	}, {
    		"address": "宁夏",
    		"num": 3
    	}, {
    		"address": "海南",
    		"num": 6
    	}, {
    		"address": "台湾",
    		"num": 0
    	}, {
    		"address": "香港",
    		"num": 0
    	}, {
    		"address": "澳门",
    		"num": 0
    	}]
    }

**2.初始化Echarts的js方法,Ajax get请求http://localhost:8080/SnsSystem/UserAddress接口获取数据,并赋值给定义好的数据,将数据传入缺失数据的data里**

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!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>用户家庭所在地统计</title>
    <script src="js/jquery-3.0.0.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    </head>
    <body>
    	<div id="main" style="width: 1000px; height: 600px;"></div>
    	<script type="text/javascript">
    			// 基于准备好的dom，初始化echarts图表  
    			var myChart = echarts.init(document.getElementById('main'));
    			option = {
    				title : {
    					text : "用户家庭所在地统计",
    					x : 'center'
    				},
    				tooltip : { //tooltip提示框，鼠标悬浮交互时的信息提示  
    					trigger : 'item'
    				},
    				legend : { //legend图例  
    					orient : 'vertical', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'  
    					x : 'left',
    					data : [] 
    				},
    				dataRange : { //dataRange值域选择  
    					min : 0, 
    					max : 15,
    					x : 'left', 
    					y : 'bottom', 
    					text : [ '高', '低' ], 
    					calculable : true
    				//是否启用值域漫游，启用后无视splitNumber和splitList，值域显示为线性渐变  
    				},
    				toolbox : { 
    					show : true,
    					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',
    					itemStyle : {
    						normal : {
    							label : {
    								show : true
    							}
    						},
    						emphasis : {
    							label : {
    								show : true
    							}
    						}
    					},
    					data : []
    				} ]
    			};
    			myChart.showLoading(); 
    			
    			var Address = [];     
    			var nums = [];   
    			
    			$.ajax({
    				type : "get",
    				async : true, 
    				url : "${pageContext.request.contextPath }/UserAddress", 
    				dataType : "json", 
    				success : function(data) {
    					//请求成功时执行该函数内容，result即为服务器返回的json对象
    					if (data.code == 'success') {  
    		                $.each(data.items, function(k, v) {       //遍历返回的JSON数据     
    		                	Address.push(v.address);   
    		                	nums.push({  
    		                        name : v.address,  
    		                        value : v.num  
    		                    });  
    		                });  
    		                myChart.hideLoading(); //隐藏加载动画  
    		                myChart.setOption({ //加载数据图表                  
    		                    legend : {  
    		                        data : Address  
    		                    },  
    		                    series : [ {  
    		                        data : nums  
    		                    } ]  
    		                });  
    		            }else{  
    		                alert("没有用户数据!");  
    		            }  
    				},
    				error : function(errorMsg) {
    					//请求失败时执行该函数
    					alert("图表请求数据失败!");
    					myChart.hideLoading();
    				}
    			})
    			
    			// 为echarts对象加载数据  
    			myChart.setOption(option);
    	</script>
    </body>
    </html>

**3.定义后台方法重定向到该页面**

@RequestMapping(value="/UserAddressTj")
    	public ModelAndView UserAddressTj(ModelAndView mv) {
    		mv.setViewName("/admin/UserBuAddress");
    		return mv;
    	}

**4.访问http://localhost:8080/SnsSystem/UserAddressTj路径显示结果**

![20180428132133993][]

[20180428132133993]: /images/20220526/5e4378e054ba44bc8d530637bfe5b4d8.png