关于echart3地图下钻省市区县
最近由于项目需要，研究关于echarts3弄了个地图下钻，废话不说，值接上代码。
<title>浙江省地图下钻至县级</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<!-- Echarts3 -->
<script type="text/javascript" src="static/js/echarts.min.js"></script>
<script type="text/javascript" src="static/js/citymap.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:800px;"></div>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
js文件
//地图容器
var chart = echarts.init(document.getElementById('main'));
var mapdata = [];
var cityMap = {
"杭州市": "330100",
"宁波市": "330200",
"温州市": "330300",
"嘉兴市": "330400",
"湖州市": "330500",
"绍兴市": "330600",
"金华市": "330700",
"衢州市": "330800",
"舟山市": "330900",
"台州市": "331000",
"丽水市": "331100",
};
//绘制全国地图
$.getJSON('static/map/zhejiang.json', function(data){
d = [];
for( var i=0;i<data.features.length;i++ ){
d.push({
name:data.features[i].properties.name
})
}
mapdata = d;
//注册地图
echarts.registerMap('浙江省', data);
//绘制地图
renderMap('浙江省',d);
});
//地图点击事件
chart.on('click', function (params) {
console.log( params );
if (params.name in cityMap) {
//显示县级地图
$.getJSON('static/map/city/'+ cityMap[params.name] +'.json', function(data){
echarts.registerMap( params.name, data);
var d = [];
for( var i=0;i<data.features.length;i++ ){
d.push({
name:data.features[i].properties.name
})
}
renderMap(params.name,d);
});
} else{
renderMap('浙江省',mapdata);
}
});
//初始化绘制全国地图配置
var option = {
backgroundColor: '#000',
title : {
text: '浙江省地图下钻至县级',
subtext: '三级下钻',
link:'http://www.ldsun.com',
left: 'center',
textStyle:{
color: '#fff',
fontSize:16,
fontWeight:'normal',
fontFamily:"Microsoft YaHei"
},
subtextStyle:{
color: '#ccc',
fontSize:13,
fontWeight:'normal',
fontFamily:"Microsoft YaHei"
}
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
},
iconStyle:{
normal:{
color:'#fff'
}
}
},
animationDuration:1000,
animationEasing:'cubicOut',
animationDurationUpdate:1000
};
function renderMap(map,data){
option.title.subtext = map;
option.series = [
{
name: map,
type: 'map',
mapType: map,
roam: false,
nameMap:{
'zhejiang':'浙江省'
},
label: {
normal:{
show:true,
textStyle:{
color:'#999',
fontSize:13
}
},
emphasis: {
show: true,
textStyle:{
color:'#fff',
fontSize:13
}
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: 'dodgerblue'
},
emphasis: {
areaColor: 'darkorange'
}
},
data:data
}
];
//渲染地图
chart.setOption(option);
}
效果图