echarts 中国地图的下钻

1 .最近老大让我搞个地图，要和其他的联动，，起来，

2 .首先要下载各省市的json ，现在echarts官网上不提供第三方的json地图。

3 . 先把效果图看一下，不是很好，凑合着看吧。

单击进去省级市级，双击返回。

下面是完整的代码。

//地图
function mapcharts(province,limit){
//全国
//alert("11")
$.ajax({
type : "post",
url : "../../assert/getAssetsCount.html",
dataType : 'json',
data:{
'params["province"]':province,
},
success : function(data) {
$(".zcbq-shu").html(data.data)
if(province!='全国'){
$(".zl-title").html(province)
var name = province; //地区name
var mapCode = provinces[name]; //地区的json数据
if (!mapCode) {
alert('无此区域地图显示');
return;
}
var name = province;
loadMap(mapCode, name);
}

}
})

var myChart = echarts.init(document.getElementById('mapcharts'));
//各省份的地图json文件
var provinces = {
'上海': '../../resource/js/map/data-1482909900836-H1BC_1WHg.json',
'河北': '../../resource/js/map/data-1482909799572-Hkgu_yWSg.json',
'山西': '../../resource/js/map/data-1482909909703-SyCA_JbSg.json',
'内蒙古': '../../resource/js/map/data-1482909841923-rkqqdyZSe.json',
'辽宁': '../../resource/js/map/data-1482909836074-rJV9O1-Hg.json',
'吉林': '../../resource/js/map/data-1482909832739-rJ-cdy-Hx.json',
'黑龙江': '../../resource/js/map/data-1482909803892-Hy4__J-Sx.json',
'江苏': '../../resource/js/map/data-1482909823260-HkDtOJZBx.json',
'浙江': '../../resource/js/map/data-1482909960637-rkZMYkZBx.json',
'安徽': '../../resource/js/map/data-1482909768458-HJlU_yWBe.json',
'福建': '../../resource/js/map/data-1478782908884-B1H6yezWe.json',
'江西': '../../resource/js/map/data-1482909827542-r12YOJWHe.json',
'山东': '../../resource/js/map/data-1482909892121-BJ3auk-Se.json',
'河南': '../../resource/js/map/data-1482909807135-SJPudkWre.json',
'湖北': '../../resource/js/map/data-1482909813213-Hy6u_kbrl.json',
'湖南': '../../resource/js/map/data-1482909818685-H17FOkZSl.json',
'广东': '../../resource/js/map/data-1482909784051-BJgwuy-Sl.json',
'广西': '../../resource/js/map/data-1482909787648-SyEPuJbSg.json',
'海南': '../../resource/js/map/data-1482909796480-H12P_J-Bg.json',
'四川': '../../resource/js/map/data-1482909931094-H17eKk-rg.json',
'贵州': '../../resource/js/map/data-1482909791334-Bkwvd1bBe.json',
'云南': '../../resource/js/map/data-1482909957601-HkA-FyWSx.json',
'西藏': '../../resource/js/map/data-1482927407942-SkOV6Qbrl.json',
'陕西': '../../resource/js/map/data-1482909918961-BJw1FyZHg.json',
'甘肃': '../../resource/js/map/data-1482909780863-r1aIdyWHl.json',
'青海': '../../resource/js/map/data-1482909853618-B1IiOyZSl.json',
'宁夏': '../../resource/js/map/data-1482909848690-HJWiuy-Bg.json',
'新疆': '../../resource/js/map/data-1482909952731-B1YZKkbBx.json',
'北京': '../../resource/js/map/data-1482818963027-Hko9SKJrg.json',
'天津': '../../resource/js/map/data-1482909944620-r1-WKyWHg.json',
'重庆': '../../resource/js/map/data-1482909775470-HJDIdk-Se.json',
'香港': '../../resource/js/map/data-1461584707906-r1hSmtsx.json',
'澳门': '../../resource/js/map/data-1482909771696-ByVIdJWBx.json'
};

//各省份的数据
var allData = [
{ name: '北京',value:0},
{ name: '天津',value:0},
{name: '上海',value:0
}, {
name: '重庆',value:0
}, {
name: '河北',value:0
}, {
name: '河南',value:0
}, {
name: '云南',value:0
}, {
name: '辽宁',value:0
}, {
name: '黑龙江',value:0
}, {
name: '湖南',value:0
}, {
name: '安徽',value:0
}, {
name: '山东',value:0
}, {
name: '新疆',value:0
}, {
name: '江苏',value:0
}, {
name: '浙江',value:0
}, {
name: '江西',value:0
}, {
name: '湖北',value:0
}, {
name: '广西',value:0
}, {
name: '甘肃',value:0
}, {
name: '山西',value:0
}, {
name: '内蒙古',value:0
}, {
name: '陕西',value:0
}, {
name: '吉林',value:0
}, {
name: '福建',value:0
}, {
name: '贵州',value:0
}, {
name: '广东',value:0
}, {
name: '青海',value:0
}, {
name: '西藏',value:0
}, {
name: '四川',value:0
}, {
name: '宁夏',value:0
}, {
name: '海南',value:0
}, {
name: '台湾',value:0
}, {
name: '香港',value:0
}, {
name: '澳门',value:0
},
{name: '海门市', value: 9},
{name: '鄂尔多斯市', value: 12},
{name: '招远市', value: 12},
{name: '舟山市', value: 12},
{name: '齐齐哈尔市', value: 14},
{name: '盐城市', value: 15},
{name: '赤峰市', value: 16},
{name: '青岛市', value: 18},
{name: '乳山市', value: 18},
{name: '金昌市', value: 19},
{name: '泉州市', value: 21},
{name: '莱西市', value: 21},
{name: '日照市', value: 21},
{name: '胶南市', value: 22},
{name: '南通市', value: 23},
{name: '拉萨市', value: 24},
{name: '云浮市', value: 24},
{name: '梅州市', value: 25},
{name: '文登市', value: 25},
{name: '上海市', value: 25},
{name: '攀枝花市', value: 25},
{name: '威海市', value: 25},
{name: '承德市', value: 25},
{name: '厦门市', value: 26},
{name: '汕尾市', value: 26},
{name: '潮州市', value: 26},
{name: '丹东市', value: 27},
{name: '太仓市', value: 27},
{name: '曲靖市', value: 27},
{name: '烟台市', value: 28},
{name: '福州市', value: 29},
{name: '瓦房店市', value: 30},
{name: '即墨市', value: 30},
{name: '抚顺市', value: 31},
{name: '玉溪市', value: 31},
{name: '张家口市', value: 31},
{name: '阳泉市', value: 31},
{name: '莱州市', value: 32},
{name: '湖州市', value: 32},
{name: '汕头市', value: 32},
{name: '昆山市', value: 33},
{name: '宁波市', value: 33},
{name: '湛江市', value: 33},
{name: '揭阳市', value: 34},
{name: '荣成市', value: 34},
{name: '连云港市', value: 35},
{name: '葫芦岛市', value: 35},
{name: '常熟市', value: 36},
{name: '东莞市', value: 36},
{name: '河源市', value: 36},
{name: '淮安市', value: 36},
{name: '泰州市', value: 36},
{name: '南宁市', value: 37},
{name: '营口市', value: 37},
{name: '惠州市', value: 37},
{name: '江阴市', value: 37},
{name: '蓬莱市', value: 37},
{name: '韶关市', value: 38},
{name: '嘉峪关市', value: 38},
{name: '广州市', value: 38},
{name: '延安市', value: 38},
{name: '太原市', value: 39},
{name: '清远市', value: 39},
{name: '中山市', value: 39},
{name: '昆明市', value: 39},
{name: '寿光市', value: 40},
{name: '盘锦市', value: 40},
{name: '长治市', value: 41},
{name: '深圳市', value: 41},
{name: '珠海市', value: 42},
{name: '宿迁市', value: 43},
{name: '咸阳市', value: 43},
{name: '铜川市', value: 44},
{name: '平度市', value: 44},
{name: '佛山市', value: 44},
{name: '海口市', value: 44},
{name: '江门市', value: 45},
{name: '章丘市', value: 45},
{name: '肇庆市', value: 46},
{name: '大连市', value: 47},
{name: '临汾市', value: 47},
{name: '吴江市', value: 47},
{name: '石嘴山市', value: 49},
{name: '沈阳市', value: 50},
{name: '苏州市', value: 50},
{name: '茂名市', value: 50},
{name: '嘉兴市', value: 51},
{name: '长春市', value: 51},
{name: '胶州市', value: 52},
{name: '银川市', value: 52},
{name: '张家港市', value: 52},
{name: '三门峡市', value: 53},
{name: '锦州市', value: 54},
{name: '南昌市', value: 54},
{name: '柳州市', value: 54},
{name: '三亚市', value: 54},
{name: '自贡市', value: 56},
{name: '吉林市', value: 56},
{name: '阳江市', value: 57},
{name: '泸州市', value: 57},
{name: '西宁市', value: 57},
{name: '宜宾市', value: 58},
{name: '呼和浩特市', value: 58},
{name: '成都市', value: 58},
{name: '大同市', value: 58},
{name: '镇江市', value: 59},
{name: '桂林市', value: 59},
{name: '张家界市', value: 59},
{name: '宜兴市', value: 59},
{name: '北海市', value: 60},
{name: '西安市', value: 61},
{name: '金坛市', value: 62},
{name: '东营市', value: 62},
{name: '牡丹江市', value: 63},
{name: '遵义市', value: 63},
{name: '绍兴市', value: 63},
{name: '扬州市', value: 64},
{name: '常州市', value: 64},
{name: '潍坊市', value: 65},
{name: '重庆市', value: 66},
{name: '台州市', value: 67},
{name: '南京市', value: 67},
{name: '滨州市', value: 70},
{name: '贵阳市', value: 71},
{name: '无锡市', value: 71},
{name: '本溪市', value: 71},
{name: '克拉玛依市', value: 72},
{name: '渭南市', value: 72},
{name: '马鞍山市', value: 72},
{name: '宝鸡市', value: 72},
{name: '焦作市', value: 75},
{name: '句容市', value: 75},
{name: '北京市', value: 79},
{name: '徐州市', value: 79},
{name: '衡水市', value: 80},
{name: '包头市', value: 80},
{name: '绵阳市', value: 80},
{name: '乌鲁木齐市', value: 84},
{name: '枣庄市', value: 84},
{name: '杭州市', value: 84},
{name: '淄博市', value: 85},
{name: '鞍山市', value: 86},
{name: '溧阳市', value: 86},
{name: '库尔勒市', value: 86},
{name: '安阳市', value: 90},
{name: '开封市', value: 90},
{name: '济南市', value: 92},
{name: '德阳市', value: 93},
{name: '温州市', value: 95},
{name: '九江市', value: 96},
{name: '邯郸市', value: 98},
{name: '临安市', value: 99},
{name: '兰州市', value: 99},
{name: '沧州市', value: 100},
{name: '临沂市', value: 103},
{name: '南充市', value: 104},
{name: '天津市', value: 105},
{name: '富阳市', value: 106},
{name: '泰安市', value: 112},
{name: '诸暨市', value: 112},
{name: '郑州市', value: 113},
{name: '哈尔滨市', value: 114},
{name: '聊城市', value: 116},
{name: '芜湖市', value: 117},
{name: '唐山市', value: 119},
{name: '平顶山市', value: 119},
{name: '邢台市', value: 119},
{name: '德州市', value: 120},
{name: '济宁市', value: 120},
{name: '荆州市', value: 127},
{name: '宜昌市', value: 130},
{name: '义乌市', value: 132},
{name: '丽水市', value: 133},
{name: '洛阳市', value: 134},
{name: '秦皇岛市', value: 136},
{name: '株洲市', value: 143},
{name: '石家庄市', value: 147},
{name: '莱芜市', value: 148},
{name: '常德市', value: 152},
{name: '保定市', value: 153},
{name: '湘潭市', value: 154},
{name: '金华市', value: 157},
{name: '岳阳市', value: 169},
{name: '长沙市', value: 175},
{name: '衢州市', value: 177},
{name: '廊坊市', value: 193},
{name: '菏泽市', value: 194},
{name: '合肥市', value: 229},
{name: '武汉市', value: 273},
{name: '大庆市', value: 279}]

initAssetsInfoChart({
}, function(legend,items,data) {
var flag="0"
for (var i =allData.length-1; i >=0; i--) {
for(var j = data.length-1;j>=0;j--){
var item = data[j];
var all=allData[i];
if(all.name==item.province){
flag="1";
all.value=item.count_all
}
}
if(flag=="0"){
if(allData[i].value==''){
allData[i].value=0;
}

}

flag="0";
}

}
)

loadMap('../../resource/js/map/data-1527045631990-r1dZ0IM1X.json',
'china');//初始化全国地图

var timeFn = null;

//单击切换到省级地图，当mapCode有值,说明可以切换到下级地图

myChart.on('click', function(params) {
clearTimeout(timeFn);
//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
timeFn = setTimeout(function() {
var name = params.name; //地区name
var mapCode = provinces[name]; //地区的json数据
if (!mapCode) {
alert('无此区域地图显示');
return;
}
loadMap(mapCode, name);

}, 250);
});

// 绑定双击事件，返回全国地图
myChart.on('dblclick', function(params) {
//当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);

//返回全国地图
loadMap('../../resource/js/map/data-1527045631990-r1dZ0IM1X.json',
'china');
});

/**
获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
@params {String} mapCode:json数据的地址
@params {String} name: 地图名称
*/
function loadMap(mapCode, name) {

$.ajax({
type : "GET",
url : mapCode,
dataType : 'json',
success : function(data) {
if (data) {
echarts.registerMap(name, data);
var option = {
tooltip : {
show : true,
formatter : function(params) {
console.log(params)
for (var i = allData.length - 1; i >= 0; i--) {
if (allData[i].name == params.name)
return allData[i].name
+ '：'
+ allData[i].value
}

},
},
legend: {
show:'true',
orient: 'vertical',
x: 'left',
},

visualMap : {
type : 'continuous',
//text : [ '', '' ],
showLabel : true,
left : '50',
min : 0,
max : 100,
inRange : {
color : [ '#FFFFFF' ]
},
splitNumber : 0
},

series : [ {
name : 'MAP',
type : 'map',
mapType : name,
// roam: 'move',
selectedMode : 'false',//是否允许选中多个区域
label : {
normal : {
show : true

},
emphasis : {
show : true
}
},

data : allData
} ]
};

myChart.setOption(option);

} else {
alert('无法加载该地图');
}
}
});
}

}

echarts 中国地图的下钻相关推荐

Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...
Echarts中国地图修改
前言在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图地图样式修改标题修改数值功能删除,但保留数据计算按钮功能去除地图 ...

echarts 中国地图的下钻

echarts 中国地图的下钻相关推荐

最新文章

热门文章