在去年十二月份，前端老大交代个任务，关于地图下钻。这里做了个简单的青岛地图下钻，初学echarts，做的不精，凑合看看吧。
第一步呢，先引入echarts等文件，这是最基本的。
第二步，到官网下载青岛各区的json包，网址 http://ecomfe.github.io/echarts-map-tool/ （建议：在做地图下钻时，最好用json包，不用js文件）
第三步，页面新建区域。
<div id="main" style="height: 90%"></div>
第四步，js文件内容，看代码。
var chart = echarts.init(document.getElementById('main'));
var cityProper = {
'城阳区': 'js/chengyang.json',
'崂山区': 'js/laoshan.json',
'李沧区': 'js/licang.json',
'市北区': 'js/shibei.json',
'市南区': 'js/shinan.json',
'黄岛区': 'js/huangdao.json',
'胶州市': 'js/jiaozhou.json',
'即墨市': 'js/jimo.json',
'莱西市': 'js/laixi.json',
'平度市': 'js/pingdu.json'
};
var data = [{
name: '城阳区'
}, {
name: '崂山区'
}, {
name: '李沧区'
}, {
name: '市北区'
}, {
name: '市南区'
}, {
name: '黄岛区'
}, {
name: '胶州市'
}, {
name: '即墨市'
}, {
name: '莱西市'
}, {
name: '平度市'
}];
//获取青岛地图数据。
$.get('js/qingdao.json', function(getJSON) {
echarts.registerMap("青岛",getJSON)
option = {
grid: {
left: '5%',
right: '4%',
top:'0%',
bottom: '0%',
width:'100%',
containLabel: true
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
}
}
},
series: [{
tooltip: {
trigger: 'item'
},
name: '选择器',
type: 'map',
mapType: '青岛',
left: '20%',
top: '20%',
roam: true,
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: data
}],
animation: false
};
chart.setOption(option, false);
chart.on("click", chartClick);
})
function chartClick(param){
chart.setOption(option, false);
var selectedPro = param.name;
if (!cityProper[selectedPro]) {
option.series.splice(1);
option.legend = null;
option.visualMap = null;
chart.setOption(option, true);
return;
}
//获取点击区域数据
$.get(cityProper[selectedPro], function(geojson) {
echarts.registerMap(selectedPro, geojson);
//根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
option.series[0] = {
name: '选择器',
type: 'map',
mapType: selectedPro,
left: '20%',
top: '20%',
width: '18%',
roam: true,
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: data
};
chart.setOption(option, true);
})
};效果图：
第一篇文章，写的不好，莫怪，莫怪。。。。。