设为首页 加入收藏

TOP

地图下钻简单实现
2019-09-17 18:36:58 】 浏览:22
Tags:地图 简单 实现
今天做地图下钻,没有地图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));
});
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JQuery:介绍、安装、选择器、属.. 下一篇前端-JavaScript

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目