Echarts使用json格式地图制作js格式地图以及地图下钻

最新推荐文章于 2024-10-12 22:24:58 发布

淡写ԅ(¯ㅂ¯ԅ)

最新推荐文章于 2024-10-12 22:24:58 发布

阅读量1.4k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/CYY941027/article/details/106721286

版权

先看效果图:
在这里插入图片描述
回台返回前端有两部分数据:一个就是地区编码,一个就是实体类集合,实体类包含三个属性:一个是地区编码,一个是数量,一个是地区名字

实体类代码:
public class MapModle {
/**
* @param level 地区等级
* @param name 地区名字
* @param value 值
*/
public MapModle(Integer level,String name,Integer value,String code) {
if(level1) {
name=name.replace(“省”,"").replace(“市”, “”).replace(" “,”");
this.name=name;
this.value=value;
this.code=code;
}if(level2) {
}if(level==3) {
}
}
private String name;
public String getCode() {
return code;
}

	public void setCode(String code) {
		this.code = code;
	}
	private Integer value;
	private String code;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getValue() {
		return value;
	}
	public void setValue(Integer value) {
		this.value = value;
	}
	public void nameMapping() {			
	}
}

前端js代码:复制可用,地图下砖时只需要传回实体类集合就可以了
function map(data){
var id=data.id;//数据库某一条件id,用于地图下砖
var dataToMap=data.dataToMap;//实体类集合
var orgLevel = data.orgLevel;//地区等级,暂时没用
var initCode = data.initCode;//地区编码

			var cityCode = ["110000","310000","500000","120000"]
			if(cityCode.indexOf(initCode)!=-1){
				var ccode=initCode.substring(0,3)+"100";
				initCode=initCode+"/"+ccode;
			}
			var initURL=""
			initURL=ctx+"/components/Highmaps-7.2.1/geochina/"+initCode+".json";
			if(cityCode.indexOf(initCode)!=-1){
				
			}else{
				Highcharts.each(dataToMap, function (d,i) {
					d["drilldown"] = d['code'];
					d["code"] = d['code'];
				});
			}
			$.getJSON(initURL, function(mapdata) {
			// 初始化图表
				
				var map = new Highcharts.mapChart('chinaMap', {
					chart: {
						events: {
							drilldown: function(e) {
								//this.tooltip.hide();
								**// 异步下钻**
								if (e.point.drilldown) {
									var pointName = e.point.properties.fullname;
									map.showLoading('下钻中，请稍后...');
									var pname=e.point.drilldown
									var pcode=""+e.point.code	//当前点击的地区code
									var code=""
									if(cityCode.indexOf(pcode)!=-1){
										var ccode=pcode.substring(0,3)+"100";
										code=pcode+"/"+ccode;
									}else{
										code=pcode
									}
									// 获取二级行政地区数据并更新图表
									var url=ctx+"/components/Highmaps-7.2.1/geochina/"+code+".json";
									$.getJSON(url, function(data){
										bdata = Highcharts.geojson(data);
		//								setValue()
										var bcount;
										jQuery.ajax({
											url : ctx + "/geteData",
											type : "POST",
											async : false,
											data : {
												code:pcode,
												id:id
											},
											success : function(data) {
												bcount=data.data
											},error:function(data){
												layer.alert("下钻数据出错!")
												return;
											}
										});
										map.hideLoading();
										map.addSeriesAsDrilldown(e.point, {
											name: e.point.name,
											data: bcount,
											mapData:bdata,
											joinBy: 'code',
											dataLabels: {
												enabled: true,
												format: '{point.name}'
											}
										});
										map.setTitle({
											text: pointName
										});
									});
								}
							},
							drillup: function() {
								map.setTitle({
									text: '中国'
								});
							}
						},
					},
					title: {
						text: '菌株数量分布'
					  },
					legend: {		//样列  在右边
							layout: 'vertical',
							align: 'right',
							verticalAlign: 'middle'
					},
					colorAxis: {
					    min: 0,
					    minColor: '#f7f7f7',
					    maxColor: '#006cee',
					    labels:{
					        style:{
					            "color":"#666666","fontWeight":"bold"
					        }
					    }
					},
					navigation:{
				          buttonOptions: {
				           text: '导出图片'
				          } 
				           },
					credits:{
						enabled: false
					},
					mapNavigation: {
						enabled: true,
						buttonOptions: {
							verticalAlign: 'bottom'
						}
					},
					plotOptions: {
							map: {
								states: {
									hover: {
										color: '#6bbf7a'
									}
								}
							},
							series: {
								borderWidth: 1,
								dataLabels: {
									enabled: true
								}
							}
					},
					series: [{
						data: dataToMap,
						name: '菌株数量',
						mapData: mapdata,
						joinBy: 'code' // 根据 name 属性进行关联
					}],
					drilldown: {
						//series: drilldownSeries,
						activeDataLabelStyle: {
							color: '#FFFFFF',
							textDecoration: 'none',
							textShadow: '0 0 3px #000000'
						}
					}
				});
		});
	}

前端html代码引入js,顺序记得不能乱:
在这里插入图片描述