地图下钻简单实现

2019-05-16 23:55:54来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

今天做地图下钻,没有地图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));
});

原文链接:https://www.cnblogs.com/lcyxfei/p/10876310.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue之神奇的动态按钮

下一篇:JS中函数与事件