我做的是吉林省下钻到市区
首先你得有这些东西,资源我得资源里有,3分还是5分下载。里边有全国的都有。
这里的jilins 是吉林省的json 因为和吉林市重名 所以加了个s
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
下边是代码
首先有个div
<div class="right" id="right"></div>
<script>
$(function () {
//ajax,查询数据
CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {
var data = resouse.data.param;
var geoCoordMap = {
'长春市': [125.45, 43.98],
'吉林市': [126.57, 43.87],
'四平市': [124.58, 43.43],
'白山市': [126.4415188999591, 42.05153200503509],
'延边朝鲜族自治州': [129.12, 43.13],
'松原市': [124.84354633755109, 45.18368571425691],
'白城市': [122.82, 45.53],
'辽源市': [125.15, 42.97],
'通化市': [125.92, 41.69]
};
//map名称查看下载的地图js内 echarts.registerMap('吉林' ...
var convertData = function (d) {
var res = [];
for (var i = 0; i < d.length; i++) {
var geoCoord = geoCoordMap[d[i].name];
if (geoCoord) {
res.push({
name: d[i].name,
value: geoCoord.concat(d[i].value)
});
}
}
return res;
};
var myChart = echarts.init(document.getElementById('right'));
//存储切换的每一级地图信息
var mapStack = [];
var timeFn = null;
var curMap = {};
//初始化为中国地图
loadMap('jilins', '吉林', data);
/**
绑定用户切换地图区域事件
cityMap对象存储着地图区域名称和区域的信息(name-code)
当mapCode有值,说明可以切换到下级地图
同时保存上级地图的编号和名称
*/
myChart.on('mapselectchanged', function (params) {
clearTimeout(timeFn);
//由于单击事件和双击事件冲突,故单击的响应事件延迟250毫秒执行
timeFn = setTimeout(function () {
var name = params.batch[0].name;
var mapCode = '';
if (name == '长春市') {
mapCode = 'changchun';
}
if (name == '吉林市') {
mapCode = 'jilin';
}
if (name == '四平市') {
mapCode = 'siping';
}
if (name == '白城市') {
mapCode = 'baicheng';
}
if (name == '松原市') {
mapCode = 'songyuan';
}
if (name == '辽源市') {
mapCode = 'liaoyuan';
}
if (name == '白山市') {
mapCode = 'baishan';
}
if (name == '通化市') {
mapCode = 'tonghua';
}
if (name == '延边朝鲜族自治州') {
mapCode = 'yanbian';
}
if (mapCode == '') {
return;
}
//单机事件这里应该查询下边的数据然后传入。
CoreUtil.sendPost("/busineAssessment/mapAnalysis", null, function (resouse) {
});
loadMap(mapCode, name, data);
//将上一级地图信息压入mapStack
mapStack.push({
mapCode: curMap.mapCode,
mapName: curMap.mapName
});
}, 250);
});
/**
绑定双击事件,并加载上一级地图
*/
myChart.on('dblclick', function (params) {
//当双击事件发生时,清除单击事件,仅响应双击事件
clearTimeout(timeFn);
var map = mapStack.pop();
if (!mapStack.length && !map) {
layer.msg('已经到达最上一级地图了');
return;
}
loadMap(map.mapCode, map.mapName, data);
});
/**
加载地图:根据地图所在省市的行政编号,
获取对应的json地图数据,然后向echarts注册该区域的地图
最后加载地图信息
@params {String} mapCode:地图行政编号,for example['中国':'100000', '湖南': '430000']
@params {String} mapName: 地图名称
*/
function loadMap(mapCode, mapName, datas) {
$.getJSON('/json/' + mapCode + '.json', function (data) {
if (data) {
echarts.registerMap(mapName, data);
var option = {
title: {
text: '吉林省小区评分情况',
float: 'right'
},
tooltip: {
trigger: 'item',
formatter: function (params) { //鼠标移过某市弹出框展示内容
// debugger
// if (typeof (params.value)[2] == "undefined") {
// return params.name + ' : <br/>' + datas[i].par;
// } else {
// return params.name + ' : <br/>' + params.value[2];
// }
var name = params.name;
for (var i = 0; i < datas.length; i++) {
if (name == datas[i].name) {
return params.name + ' : <br/>' + datas[i].par;
}
}
},
data: convertData(datas)
},
series: [
{
name: '',
type: 'map',
mapType: mapName,
selectedMode: 'multiple',
label: {
normal: {
show: true,
//字体样式
textStyle: {
fontSize: 15,
color: '#cccccc'
},
formatter: function (params) {
console.log(params)
if(params.data){
//展示内容
return params.name+"\n"+ params.data.value[2];
}
},
},
emphasis: {
show: true
},
},
data: convertData(datas),
itemStyle: {
normal: {
areaColor: '#174b9c',
borderColor: '#e0854f',//板块边界色
borderWidth: 2 //板块边颜色宽度
},
emphasis: {
areaColor: '#f1c237',// 鼠标放到地图板块的颜色
borderColor: '#e0854f', //鼠标放到地图板块的边界的颜色
}
},
// 高亮区域
regions: [{
name: '',
itemStyle: {
shadowBlur: 20,
areaColor: '#2379E3', //区域颜色
borderColor: '#0a2dae',// 线
shadowColor: '#0a2dae',// 外发光
}
}]
},
]
};
myChart.setOption(option);
curMap = {
mapCode: mapCode,
mapName: mapName
};
} else {
alert('无法加载该地图');
}
});
}
});
});
</script>
效果图
鼠标移到上边的弹窗显示
单击白城市,下钻到白城市的地图