地图下钻简单实现


今天做地图下钻,没有地图json数据,记得做过没有找到以前的资料,从网上下载还要花钱,
就想给路过的人提供资料,此js实现需要包含区域json的js文件及 echarts4.1.0(低版本的js可以试试),
如果有需要材料的,我在博客上传了地图材料的文件,可以下载
/*地图下钻*/
var myChart33 = echarts.init(document.getElementById('mapceshi'));
/**
* 获取图表属性
* @param name select的名称
*/
function getChartOptions(name){
return {
geo: { //地图写在geo组件上
map: name, //更换的名称
roam: true,
selectedMode: 'single',
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
};
}
//最初的属性
myChart33.setOption({
geo: {
map: '中国', //
roam: true,
selectedMode: 'single',
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
regions: [{ //单例样式
name: '河北',
itemStyle: {
normal: {
areaColor: '#666',
color: '#666'
}
}
}],
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
});
//通过该事件进行底图的变换
myChart33.on('click', function (params) {
myChart33.setOption(getChartOptions(params.name));
});

作者:永远飞翔的心,发布于:2019/05/16
原文:https://www.cnblogs.com/lcyxfei/p/10876310.html