使用ECharts来实现地图下钻功能（某省的市级下钻到县级）
这里是一个简单的demo：var cityMap = {
"长沙市": "430100",
"株洲市": "430200",
"湘潭市": "430300",
"衡阳市": "430400",
"邵阳市": "430500",
"岳阳市": "430600",
"常德市": "430700",
"张家界市": "430800",
"益阳市": "430900",
"郴州市": "431000",
"永州市": "431100",
"怀化市": "431200",
"娄底市": "431300",
"湘西土家族苗族自治州": "433100"
};
var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
document.getElementById('main').onmousewheel = function (e){
var event = e || window.event;
curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
if (curIndx < 0) {
curIndx = mapType.length - 1;
}
var mt = mapType[curIndx % mapType.length];
option.series[0].mapType = mt;
option.title.subtext = mt + ' （滚轮或点击切换）';
myChart.setOption(option, true);
zrEvent.stop(event);
};
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var mt = param.target;
var len = mapType.length;
var f= false;
for(var i=0;i将上面部分代码复制，然后粘贴覆盖到http://echarts.baidu.com/doc/example/mix5.html左侧的黑色区域中，然后点击刷新，即可看到效果。其中var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件，然后执行循环将city对应的县级数据加载到param.js文件中for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {//city
getGeoJson: (function (c) {//city对应的县级数据
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}在我自己的项目中是这样的写的：
function initDownData(){
var cityMap = {
"长沙市": "430100",
"株洲市": "430200",
"湘潭市": "430300",
"衡阳市": "430400",
"邵阳市": "430500",
"岳阳市": "430600",
"常德市": "430700",
"张家界市": "430800",
"益阳市": "430900",
"郴州市": "431000",
"永州市": "431100",
"怀化市": "431200",
"娄底市": "431300",
"湘西土家族苗族自治州": "433100"
};
var mapType = [];
var base = '<%=request.getContextPath()%>';
//var mapGeoData = require('/szft/js/echarts/src/util/mapData/params');//这是需要扩展的文件(将县级数据存档 )
for (var city in cityMap) { //加载14市的县级地图数据
mapType.push(city);//将14个市加入到params.js文件中
// 自定义扩展图表类型
// mapGeoData.params[city] = { //回调，加载14个市对应的县级数据
echarts.util.mapData.params.params[city] = { //回调，加载14个市对应的县级数据
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON(base+'/js/echarts/doc/example/geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}
}
/**
* 选中地图
*/
function selectedMap(){
myChart.on(echarts.config.EVENT.MAP_SELECTED, function(param){//市级的点击事件
var selectedCity = param.target;//点击获取对应的市的名称
getLiveajList(mapUtil.findFbdm(selectedCity),selectedCity);//加载点击市 右侧的列表
var flag = false;
initDownData();//初始化县级数据
/* var selected = param.selected;
for (var p in selected) {
if (selected[p]) {
if($(".a_btn_pre").hasClass("a_btn_pre_gray")){
} else {
$(".a_btn_pre").trigger("click");
}
getSubCorpLiveAjInfo(p,3);
//调用另外一个iframe的某个方法
$("#iframe1",parent.document)[0].contentWindow.getSubCorpLiveAjInfo(p,3);
}
if(p == selectedCity){
flag = true;//所选的是14个市之一
selectedCity = p;
}
}*/
$('#fbdm').val(selectedCity);
var map = new Map();
map = getMap(selectedCity,3,'xj');
initMap(map,selectedCity,'xj');//初始化县级地图及数据
$('#headerReturn').css('display','');//显示隐藏的返回按钮
$('#headerReturn1').css('display','');//显示隐藏的返回按钮
$('#em').html(mapUtil.findJc(mapUtil.findFbdm(selectedCity)));
myChart.on(echarts.config.EVENT.MAP_SELECTED, function(param){//下级县的点击事件
var selectedTown = param.target;//点击获取对应的县的名称
getLiveajList(mapUtil.findFbdm(selectedTown),selectedTown);//加载右侧的列表
});
});
}