echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图

先上效果图，

鼠标放上去时的效果，如下图所示：

点击进入到的省级地图，如下图所示：

中国地图，鼠标放上去时的代码：

myChart.on('mouseover', function (params) {var dataIndex = params.dataIndex;// console.log(params);});

中国地图的点击事件：

myChart.on('click', function (param) {// alert(param.name);//遍历取到provincesText 中的下标  去拿到对应的省jsfor(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 中的下标  去拿到对应的省jsfor(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_) ;});}//加载对应的JSfunction loadBdScript(scriptId, url, callback) {var script = document.createElement("script")script.type = "text/javascript";if (script.readyState){  //IEscript.onreadystatechange = function(){if (script.readyState == "loaded" || script.readyState == "complete"){script.onreadystatechange = null;callback();}};} else {  //Othersscript.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

echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图相关推荐

echarts的中国地图，点击进入省级地图，按需加载对应的省js，可返回中国地图
这是我项目中用到的示例图: 原理:创建两个省份的数组,在点击某个省份的时候,遍历获取对应省份的数据js,并加载此数据js,同时重新初始化echarts渲染此省份的数据效果 1.省份数组,用于遍历获取对 ...
echarts中国地图使省份选择性滑动或点击高亮
本文介绍echarts显示中国省份图,对于需要高亮的省份进行筛选.并且对省份进行选择性交互. 首先我们需要一个颜色集合,代表我们要设置多少种颜色.这里用到了dataRange. dataRange: ...
Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻
记录最近使用echarts制作地图的过程及部分代码: 其中在网络上借鉴了不少优秀的源码,在此感谢他们的开源精神. 先看效果: (一)态势图.热点图.轨迹图及全屏功能全屏效果: (二)改普通地图为百度 ...
安卓高德地图聚合点击事件_滴滴进攻，华为入场，互联网地图迎来大变局|深响独家...
©深响原创 · 作者|丁直仁核心要点市场可能高估了美团与滴滴之间的冲突,而低估了滴滴与高德之间的竞争. 从去年下半年开始,华为便在组建自己的地图团队. 腾讯地图或因数据质量问题遭遇考验: ...
vue中echarts的点击事件,给当前点击的柱状图修改背景色
最近项目中需要使用到echarts,需要实现点击柱状图时,修改当前点击的柱状图背景色,且没有阴影背景的效果 (如下图) 这样的话,需要给eharts添加click点击事件,直接贴代码: html: & ...
小程序结合腾讯地图（QQMapWX）SDK做位置周边搜索在地图上展示气泡点，点击气泡展示不同状态
1.背景: 在微信小程序中,地图上展示一个坐标点周边的医院学校等周边设施,通过地图上气泡的方式.点击气泡展示不同的气泡状态,点击导航跳转到对应气泡点所在的坐标位置. 2.实现思路: 2.1布局: 地图 ...
高德地图聚合点，增加所有点击标记，点击后展示该聚合点下所有信息
高德地图聚合点,增加所有点击标记,点击后展示该聚合点下所有信息使用高德地图图片下面是部分代码,如有不懂,留言结束使用高德地图 *1.首先去注册https://lbs.amap.com/api ...
2021中国开源年报发布！一篇报告带你读懂中国开源的2021~
来源|开源社KAIYUANSHE 责编 | 李明康开源,在2021年,火了,而且是燎原烈火,烧的焮天铄地,可以说是中国开源迅猛发展的元年也不为过.我们看到,在开源领域上,国策的重点扶持.资本的加码青 ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
cad图形如何导入到奥维地图_将设计线路CAD图导入到奥维互动地图的方法
将设计线路CAD图导入到奥维互动地图的方法概要:奥维互动地图是第三方地图浏览器做的非常不错的软件,同时支持多种知名地图,三维地图,地理规划,位置与轨迹分享等,可以同时在电脑端和手机上浏览,在电脑端将 ...

echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图

echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图相关推荐

最新文章

热门文章