var cityMap = {
"长沙市": "430100",
"株洲市": "430200",
"湘潭市": "430300",
"衡阳市": "430400",
"邵阳市": "430500",
"岳阳市": "430600",
"常德市": "430700",
"张家界市": "430800",
"益阳市": "430900",
"郴州市": "431000",
"永州市": "431100",
"怀化市": "431200",
"娄底市": "431300",
"湘西土家族苗族自治州": "433100" };
var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
} var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
document.getElementById('main').onmousewheel = function (e){
var event = e || window.event;
curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
if (curIndx < 0) {
curIndx = mapType.length - 1;
}
var mt = mapType[curIndx % mapType.length];
option.series[0].mapType = mt;
option.title.subtext = mt + ' (滚轮或点击切换)';
myChart.setOption(option, true);
zrEvent.stop(event);
};
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var mt = param.target;
var len = mapType.length;
var f= false;
for(var i=0;i<len;i++){
if(mt == mapType[i]){
f =true;
mt=mapType[i];
}
}
if(!f){
mt='湖南';
}
option.series[0].mapType = mt; option.title.subtext = mt + ' (滚轮或点击切换)';
myChart.setOption(option, true);
});
option = {
title: {
text : '全国344个主要城市(县)地图 by Pactera 陈然',
link : 'http://www.pactera.com/',
subtext : '长沙市 (滚轮或点击切换)'
},
tooltip : {
trigger: 'item',
formatter: '滚轮或点击切换<br/>{b}'
},
series : [
{
name: '全国344个主要城市(县)地图',
type: 'map',
mapType: '湖南',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[]
}
]
};
  1. 将上面部分代码复制,然后粘贴覆盖到http://echarts.baidu.com/doc/example/mix5.html左侧的黑色区域中,然后点击刷新,即可看到效果。

2.其中var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件,然后执行循环将city对应的县级数据加载到param.js文件中

每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code

使用ECharts来实现地图下钻功能(某省的市级下钻到县级)的更多相关文章

  1. 第三方工具 - 关于echarts下钻功能的一些总结.js

    废话:好久没有写博客了,每每看着自己的'战绩'都有点愧疚,但是这段时间确实学习了不少东西,待我慢慢地一 一梳理,将之消化并分享. ---------------------------$O_O$--- ...

  2. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  3. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  4. 百度地图整合功能分享修正版[ZMap.js] 实例源码!

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

  5. ArcGIS API for Silverlight实现地图测距功能

    原文:ArcGIS API for Silverlight实现地图测距功能 问题:如何实现地图测距功能? 地图工具栏 <Grid x:Name="gToolMenu" Hei ...

  6. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

  7. js实现地图打印功能

    注意:js对地图的打印功能在arcgis10.1中才有提供,所以如果要使用esri自带的地图打印功能,必须使用arcgis 10.1或更高版本的地图打印模板.(由于官网和arcgis desktop提 ...

  8. vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案

    由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...

  9. 百度地图API功能

    984aca5bc78b070e59f34e230f11cf6d http://api.map.baidu.com/api?v=2.0&ak=您的密钥" <html> & ...

随机推荐

  1. JavaScript机器学习之线性回归

    译者按: AI时代,不会机器学习的JavaScript开发者不是好的前端工程师. 原文: Machine Learning with JavaScript : Part 1 译者: Fundebug ...

  2. 性能测试 CentOS下结合InfluxDB及Grafana图表实时展示JMeter相关性能数据

    CentOS下结合InfluxDB及Grafana图表实时展示JMeter相关性能数据   by:授客 QQ:1033553122 实现功能 1 测试环境 1 环境搭建 2 1.安装influxdb ...

  3. 通过UNIX域套接字传递描述符的应用

      传送文件描述符是高并发网络服务编程的一种常见实现方式.Nebula 高性能通用网络框架即采用了UNIX域套接字传递文件描述符设计和实现.本文详细说明一下传送文件描述符的应用. 1. TCP服务器程 ...

  4. Tmux 日常快捷键 及配置

    使用Linux的人不管是开发人员.还是运维人员都不可避免的需要使用到终端模拟器(比如,gnome-terminal)去执行一些命令或者脚本. tmux可以将终端模拟器方便的切分为不同的小窗口如下图如示 ...

  5. g4e基础篇#5 创建分支和保存代码

    章节目录 前言 1. 基础篇: 为什么要使用版本控制系统 Git 分布式版本控制系统的优势 Git 安装和设置 了解Git存储库(Repo) 起步 1 – 创建分支和保存代码 起步 2 – 了解Git ...

  6. PHP 生成器语法

    一般你在迭代一组数据的时候,需要创建一个数据,假设数组很大,则会消耗很大性能,甚至造成内存不足. //Fatal error: Allowed memory size of 1073741824 by ...

  7. BM:EOS的创造者

    2018年6月EOS的主网即将上线,EOS到底是全球骗局,还是技术创? EOS币到底能涨到几何,现在还适合不适合入手...我们暂且不说.先了解一下EOS的创造者BM,以及BM的传奇经历. BM BM是 ...

  8. 南邮ctf-web的writeup

    WEB 签到题 nctf{flag_admiaanaaaaaaaaaaa} ctrl+u或右键查看源代码即可.在CTF比赛中,代码注释.页面隐藏元素.超链接指向的其他页面.HTTP响应头部都可能隐藏f ...

  9. LeetCode算法题-N-ary Tree Level Order Traversal(Java实现)

    这是悦乐书的第225次更新,第238篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第92题(顺位题号是429).给定n-ary树,返回其节点值的级别顺序遍历.(即,从左到 ...

  10. LeetCode算法题-Intersection of Two Arrays(Java实现-四种解法)

    这是悦乐书的第207次更新,第219篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第75题(顺位题号是349).给定两个数组,编写一个函数来计算它们的交集.例如: 输入: ...