版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/daiqisi/article/details/81017740
先上效果图,
鼠标放上去时的效果,如下图所示:
点击进入到的省级地图,如下图所示:
中国地图,鼠标放上去时的代码:
myChart.on('mouseover', function (params) {
var dataIndex = params.dataIndex;
// console.log(params);
});
中国地图的点击事件:
myChart.on('click', function (param) {
// alert(param.name);
//遍历取到provincesText 中的下标 去拿到对应的省js
for(var i= 0 ; i < provincesText.length ; i++ ){
if(param.name == provincesText[i]){
//显示对应省份的方法
// showProvince(provinces[i]) ;
showProvince(provinces[i],provincesText[i])
break ;
}
}
});
循环对比去拿到对应的省份的地图数据,并将其在显示中国地图的地方显示出来。原理大概就是这样,对于省级地图不理解的,文件里面也放了一个四川省的省级地图demo。省级地图的初始化跟中国地图大概差不多一样。
//定义全国省份的数组
var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
myChart.on('click', function (param) {
// alert(param.name);
//遍历取到provincesText 中的下标 去拿到对应的省js
for(var i= 0 ; i < provincesText.length ; i++ ){
if(param.name == provincesText[i]){
//显示对应省份的方法
// showProvince(provinces[i]) ;
showProvince(provinces[i],provincesText[i])
break ;
}
}
});
//展示对应的省
// showprovince(province[i],provinceText[i])改成这样,function(pName,Chinese_){}
function showProvince(pName, Chinese_){
//这写省份的js都是通过在线构建工具生成的,保存在本地,需要时加载使用即可,最好不要一开始全部直接引入。
loadBdScript('$'+pName+'JS','js/province/'+pName+'.js',function(){
//初始化echarts:具体代码参考上面初始化中国地图即可,这里不再重复。
initEcharts(Chinese_) ;
});
}
//加载对应的JS
function loadBdScript(scriptId, url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
script.id = scriptId;
document.getElementsByTagName("head")[0].appendChild(script);
};
因为各省的地图数据js文件比较多,不建议一开始就全部加载进来,应该按需要加载对应的js文件,函数loadBdScript()做了这个工作。
myChart1.on('click', function (param) {
initChina();
});
点击省级地图又返回到中国地图,当然这里也可以做成,点击对应的市,显示市级地图,以此类推。
下载地址:echarts-china-map