Echarts生成广东省地图

前一段时间因为业务问题需要生成地图数据，所以使用了Echarts来作为生成的工具，以下是相关的一些使用经验：
首先Jsp页面：

<div class="map-box" id="mapdiv"></div><script type="text/javascript"  src="<%=request.getContextPath()%>/basejs/welcomePage/jquery-3.2.1.js" ></script><script type="text/javascript"  src="<%=request.getContextPath()%>/basejs/welcomePage/echarts.min.js"></script><script type="text/javascript"  src="<%=request.getContextPath()%>/basejs/welcomePage/guangdong.js"></script><script type="text/javascript"    src="<%=request.getContextPath()%>/basejs/welcomePage/echarts-gl.min.js"></script><script type="text/javascript"   src="<%=request.getContextPath()%>/basejs/welcomePage/mainoption.js"></script>

需要的js文件基本可以从网上找到，需要哪个地区的就找哪个地区的。业务代码在mainoption.js里：

var myChart1;
$(document).ready(function() {$(window).resize(function() {myChart1.resize();});getMapDatas();
});

获取数据的方法：

function getMapDatas(){$.ajax({url : "/*后端地址*/"type : 'GET',dataType : "json",cache : false,timeout : 10000,success : function(result) {if(result.data.success){if(result.data.dm){if(result.data.dm.qsjs && result.data.dm.rawData){Map('mapdiv',result.data.dm.rawData,result.data.dm.qsjs);}else{alert("服务出错，获取统计信息失败！");}}else{alert("服务出错，获取统计信息失败！");}}else{alert(result.data.resMsg);}return true;},error:function(){alert("系统出错！请联系管理员！");}});
}

/*** 根据传入的数据生成* @param id //需要生成map的容器地址* @param cityData //这里是要给每个城市设置的值，不是必选项* @param _number//额外需要的参数* @returns*/
function Map(id,cityData,_number){     //    function sortRule(a,b){return a.value-b.value;}
//    cityData.sort(sortRule);
//    var name=cityData.map(name=>name.name);myChart1 =  echarts.init(document.getElementById(id));var now =formatDateTime(new Date());var option = {backgroundColor: '#FFFFFF',title: {  text: '截止'+now,  subtext: '全省参训教师'+_number+"人",  x:50,y:50}, tooltip : {trigger: 'item',type:'cross',/*   backgroundColor:"#ff7f50",//提示标签背景颜色textStyle:{color:"#fff"}, //提示标签字体颜色formatter:function(param){return dt[param.dataIndex].name + "<br />" +dt[param.dataIndex].text;} */alwaysShowContent: false,bordeRadius: 4,borderWidth: 1,borderColor: 'rgba(0,0,0,0.2)',backgroundColor: 'rgba(255,255,255,0.9)',padding: 0,// position: "top",textStyle: {fontSize: 12,color: '#333'},},visualMap: {min: 0,max: 600,text:['High','Low'],x:'left',y:'center',realtime: false,calculable: true,inRange: {color: ['lightskyblue','yellow', 'orangered']}},toolbox:{show : true,orient : 'vertical',x: 'right',y: 'center',borderColor: '#FFF',       // 工具箱边框颜色borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，showTitle: false,feature : {saveAsImage: { show : true,title : '保存为图片',type : 'jpeg'},restore: {show: true},}},series: [{name: '参训教师人数',type: 'map',map:'广东',// symbol:'../images/shine.jpg',//  symbolSize: 41,roam:true,label: {normal: {show: true},emphasis: {show: true}},layoutCenter: ['50%', '50%'],   //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
//              layoutSize: 450,itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:cityData}]};myChart1.setOption(option);myChart1.on('click',function(params){console.log(params);})}

需要的格式化时间方法：

function formatDateTime(date) {  var y = date.getFullYear();  var m = date.getMonth() + 1;  m = m < 10 ? ('0' + m) : m;  var d = date.getDate();  d = d < 10 ? ('0' + d) : d;  var h = date.getHours();h = h < 10 ? ('0' + h) : h;var minute = date.getMinutes();var second = date.getSeconds();minute = minute < 10 ? ('0' + minute) : minute;  second = second < 10 ? ('0' + second) : second; return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
}

后端数据格式：

JSONObject jo=new JSONObject();
JSONObject dm=new JSONObject();
dm.put("qsjs", 1200000);//全省参训教师人数
dm.put("rawData", getRawData());
jo.put("success", true);
jo.put("dm", dm);
return jo;

getRawData方法的代码：

private List<JSONObject> getRawData() throws AppException {List<JSONObject> mplist=new ArrayList<JSONObject>();JSONObject zhjson=new JSONObject();zhjson.put("name", "珠海市");zhjson.put("value",150);mplist.add(zhjson);JSONObject gzjson = new JSONObject();gzjson.put("name", "广州市");gzjson.put("value",250);mplist.add(gzjson);JSONObject zjjson = new JSONObject();zjjson.put("name", "湛江市");zjjson.put("value",520);mplist.add(zjjson);JSONObject mmjson = new JSONObject();mmjson.put("name", "茂名市");mmjson.put("value", 130);mplist.add(mmjson);JSONObject yjjson = new JSONObject();yjjson.put("name", "阳江市");yjjson.put("value", 120);mplist.add(yjjson);JSONObject yfjson = new JSONObject();yfjson.put("name", "云浮市");yfjson.put("value", 120);mplist.add(yfjson);JSONObject zqjson = new JSONObject();zqjson.put("name", "肇庆市");zqjson.put("value", 100);mplist.add(zqjson);JSONObject jmjson = new JSONObject();jmjson.put("name", "江门市");jmjson.put("value", 450);mplist.add(jmjson);JSONObject zsjson = new JSONObject();zsjson.put("name", "中山市");zsjson.put("value", 80);mplist.add(zsjson);JSONObject fsjson = new JSONObject();fsjson.put("name", "佛山市");fsjson.put("value", 333);mplist.add(fsjson);JSONObject qyjson = new JSONObject();qyjson.put("name", "清远市");qyjson.put("value", 130);mplist.add(qyjson);JSONObject sgjson = new JSONObject();sgjson.put("name", "韶关市");sgjson.put("value", 140);mplist.add(sgjson);JSONObject hyjson = new JSONObject();hyjson.put("name", "河源市");hyjson.put("value", 120);mplist.add(hyjson);JSONObject mzjson = new JSONObject();mzjson.put("name", "梅州市");mzjson.put("value", 231);mplist.add(mzjson);JSONObject czjson = new JSONObject();czjson.put("name", "潮州市");czjson.put("value", 124);mplist.add(czjson);JSONObject jyjson = new JSONObject();jyjson.put("name", "揭阳市");jyjson.put("value", 156);mplist.add(jyjson);JSONObject stjson = new JSONObject();stjson.put("name", "汕头市");stjson.put("value", 112);mplist.add(stjson);JSONObject swjson = new JSONObject();swjson.put("name", "汕尾市");swjson.put("value", 128);mplist.add(swjson);JSONObject szjson = new JSONObject();szjson.put("name", "深圳市");szjson.put("value", 192);mplist.add(szjson);JSONObject dgjson = new JSONObject();dgjson.put("name", "东莞市");dgjson.put("value", 128);mplist.add(dgjson);JSONObject hzjson = new JSONObject();hzjson.put("name", "惠州市");hzjson.put("value", 187);mplist.add(hzjson);return mplist;}

Echarts生成广东省地图相关推荐

echarts生成湖南省地图
利用echarts生成湖南省地图,默认选中长沙市,点击各市可切换选中的市,选中的市会高亮显示. 注意:益阳市名称显示有点偏差,应该是我那个json文件数据导致的,各位重新去找一份地图的json数据就行 ...
如何在echarts生成得到地图上添加标记
在echarts生成的图形上如果利用本地的图片达到标记的效果想要达到的效果 1.首先我们可以在全局先把这个图片引进来 2.在我们的那个生成图形的方法里面可以这样 let markImg='image ...
echarts生成json地图最简单代码
只需要替换到相对应的json文件即可. 全国各省市地json文件:https://download.csdn.net/download/weixin_38959210/10543965 全世界各国家地 ...
echarts绘制广东省地图
注:本文章不需要json,只要两个js文件先去官网上GitHub拉包,包里面啥都有,json,js省份都有看了河南那篇文章,还要啥省份的json文件 js文件 <script src=&qu ...
使用echarts生成漂亮的3D地图
使用echarts生成漂亮的3D地图 echarts是非常好用的图表插件,本文使用echarts来生成一个漂亮的3D地图效果准备资料第三方插件 <script type="tex ...
用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项
由于国家测绘部门的一些相关法律规定,现在版本的ecahrts 中的地图资源已经不能制作和直接使用,只能通过自己注册地图regiseterMap(name,json),来实现地图的区域,这些数据,学GI ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
解决echarts在平移和缩放中国地图后，下钻到下一级具体省份地图时生成的地图不在容器中间，会跑到容器外面去。
问题: echart地图三级下钻地图在平移和缩放后,点击到省,由于中心点的偏移,该省市区地图跑到容器以外的地方去了,导致新生成的地图看不见解决方法: 后来发现,是重新绘制图表的时候需要: myCha ...
关于echarts生成地图的二三事
1.地图数据的获取中国地图及各省市县地图可在地图选择器(数据来源于高德开放平台) 选择需要的区域,右方可下载其JSON API格式的数据. 2.地图的编辑特定需求下需要对原有地图数据进行修改,如: ...

Echarts生成广东省地图

Echarts生成广东省地图相关推荐

最新文章

热门文章