Echarts使用二：全国地图与各省市地图联动

===========================更新============================
介于很多人都找我要相关的js文件，我就传到网上以供大家下载~~
js文件下载地址：
http://download.csdn.net/download/liuchonge/10024884
===========================更新============================

上篇博客中写到了echarts中如何将城市高亮显示，这篇介绍一下二级地图联动。即点击中国地图中的一个省份，则显示该省份的详细地图。这里的地图使用本地文件引入的方式，网上很多文章介绍的都有问题，根本就无法正确引入地图的js文件。希望这里可以给大家一个正确的示例。
代码有个不足的地方：这里使用两个div分别放置中国地图和点击的省份地图。其实echarts里面提供了内部的布局方法，不过我没有详细去研究，使用这种简单的方法来代替。
代码简单分为三个部分。
1，全国地图的配置，这里为了使代码简单明了，省去了很多参数配置，只显示最简单的一张地图。这部分代码很简单，没什么可说的。
2，省市地图的配置，这里定义了一个函数，showCity(city).主要是传入点击的省份名称，来加载不同的省份地图。注意这里的option里面的mapType: city,和全国地图的不同，那里用的是mapType: 'china',。其他地方也没什么好说的，如果你的地图里有data需要传入自己加上这部分的配置即可。
3，当鼠标点击某个省份时的响应动作。这也是功能的核心部分，有兴趣的可以去看一看echarts官网上关于事件与动作的介绍。使用city = params.name;来获取到点击的省份的名称。
先上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>号码地区分布/省市占比</title><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/province/beijing.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>//引入本地的各省市地图文件，可以使用绝对路径也可以使用相对路径，都可以，不过需要注意的是必须要引入这些地图，要不然是无法显示各省市地图的。<script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\shanghai.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\neimenggu.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\taiwan.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\xianggang.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\aomen.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\chongqing.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\tianjin.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\xinjiang.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\beijing.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\ningxia.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\qinghai.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\gansu.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\guangxi.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\hainan.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\sichuan.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\guizhou.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\yunnan.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\xizang.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\shanxi1.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\guangdong.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\hunan.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\hubei.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\henan.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\shandong.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\jiangxi.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\fujian.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\liaoning.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\jilin.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\heilongjiang.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\jiangsu.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\zhejiang.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\anhui.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\shanxi.js"></script><script type="text/javascript" src="C:\Users\liuchong\Desktop\echarts-master\map\js\province\hebei.js"></script>
</head>
<body><table><tr><td><div id="main" style="width: 800px;height:600px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var map = echarts.init(document.getElementById('main'));function randomData() {return Math.round(Math.random()*1000);}option = {tooltip: {trigger: 'item'},series: [{name: '号码分布',type: 'map',mapType: 'china',roam: false,label: {normal: {show: true},emphasis: {show: true}},},]};// 使用刚指定的配置项和数据显示图表。map.setOption(option);</script></td><td><div id="chart" style="width: 400px;height:600px;"></div><script type="text/javascript">
function showCity(city){var pie = echarts.init(document.getElementById('chart'));
pie.setOption(option1 = {backgroundColor: '#404a59',series: [{type: 'map',mapType: city,label: {emphasis: {textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: '#389BB7',areaColor: '#fff',},emphasis: {areaColor: '#389BB7',borderWidth: 0}},}]
});
}showCity('上海');map.on('click', function (params) {city = params.name;alert(city);showCity(city);});</script></td></tr></table>
</body>
</html>

好了，看完代码就来看一看效果图吧：

Echarts使用二：全国地图与各省市地图联动相关推荐

使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
Echarts笔记：全国主要城市空气质量地图
学习如何利用echarts 绘制地图. 分析echarts官网提供的全国主要城市空气质量地图的笔记. 原图地址图如下: 代码: var data = [{name: '海门', value: 9}, ...
湖北地图html代码,echarts全国省市地图代码
[实例截图] echarts全国省市地图代码 [实例截图] [核心代码] html5 canvas echarts全国省市地图代码 *{margin: 0;padding: 0;} body{widt ...
echarts实现全国及各省市地图（内附地图json文件）
echarts实现各省市地图总结不易,大家别忘了点赞+关注呀! 首先要获取目标地图的json文件,去阿里云就可以获取:阿里云地理进入后看到的是这样的: 上图是全国地图,如果想要某市的,点击对应省份 ...
echarts实现各省市地图、中国地图
之前写过单独的省市地图,好多朋友都问各省市的地图怎么写,今天我就简单的写了个demo.仅供大家参考.不足之处望大家多多指正. 首先我们还是先看下效果图鼠标滑过各个省市的效果如下: 其实写法和之前我写 ...
微信小程序使用Echarts实现省市地图（山东地图demo）
上篇写过在PC端使用Echarts实现省市地图效果,今天说下在小程序中如何使用echarts实现省市地图,这次就拿山东地图来说下. 1.首先还是下载Echarts在git上提供的组件,下载到本地放到 ...
react中使用ECharts绘制各省市地图
首先,安装对应依赖 npm install echarts --save 2.引入 import React from "react"; // 模块化样式表 import s fr ...

Echarts使用二：全国地图与各省市地图联动

Echarts使用二：全国地图与各省市地图联动相关推荐

最新文章

热门文章