在使用echarts3当中，地图需要的数据时分开的，需要自己下载，而在echarts3官网上的地图数据只有全国、中国、各省的地图

如果我们需要使用更详细的地图，需要在echarts2的生成需要的地级市等的数据

生成的数据位json格式，使用echarts3的json加载方法，可以直接加载该数据

如果不需要其中的一些区县等信息，可以直接在json文件中将对应的数据删掉，就可以了。

以重庆市地图为例：

通过图获得重庆的地图json数据，命名为 chongqing.json

通过展示如图：

留下主城九区，其他的区县不要，效果图

详细代码chongging.html：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>echarts map demo</title>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="echarts.js"></script>

<style type="text/css">

html,body{width:100%;height:100%;}

#main{width:100%;height:100%;}

</style>

</head>

<body>

<div id="main"></div>

<script type="text/javascript">

$.get('chongqing.json', function (chinaJson) {

    echarts.registerMap('chongqing', chinaJson); // 给数据命名，本人理解

    var chart = echarts.init(document.getElementById('main'));

    chart.setOption({

        series: [{

            type: 'map',

            map: 'chongqing',

            roam: true,

            label:{

                normal:{

                    show: true

                }

            }

        }]

    });

});

</script>

</body>

</html>
												


											
echarts地图使用的更多相关文章
	

    
						
  1. Echarts 地图添加自定义区域
		
    使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...
    
		
    2. 
						
  2. Echarts 地图上显示数值
		
    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu',  ...
    
		
    3. 
						
  3. echarts地图扩展文件使用geoJson格式。
		
    echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json,但是最多生成到”区 ...
    
		
    4. 
						
  4. react使用echarts地图实现中国地图大区展示
		
    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...
    
		
    5. 
						
  5. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
		
    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
    
		
    6. 
						
  6. 工作中遇到的有关echarts地图和百度地图的问题
		
    工作中遇到的有关echarts地图和百度地图的问题 *** 前言:在做项目中需要制作一个场景是左边是柱状图,右边是地图,地图上悬浮一个按钮可以切换echarts地图和百度地图.*** 功能: 在点击左 ...
    
		
    7. 
						
  7. echarts 地图 动态 展示 结合css+js
		
    echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...
    
		
    8. 
						
  8. echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】
		
    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
    
		
    9. 
						
  9. 本周学习总结(原生+Echarts地图)
		
    本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...
    
		
    10. 
						
  10. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框
		
    [自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 树莓派上使用KickThemOut对局域网内的设备进行ARP欺骗
			
    安装KickThemOut工具 $ git clone https://github.com/k4m4/kickthemout.git $ cd kickthemout/ $ sudo -H pip  ...
    
			
    2. 
						
  2. 暑期OI大电影——不看后悔整个OI生涯！
			
    惊爆~!! 2018暑期OI大电影要开始放送啦~!! 各位OI骨灰级大咖登场荧幕~!! 近四十部大电影纷至沓来~!! 著名特级导演CCF.著名特级编剧刘汝佳等纷纷给予高度评价~!! 观众朋友们,OI的 ...
    
			
    3. 
						
  3. 【模板】kmp
			
    引理:当计算第 \(i\) 位的失配指针时,若 \(j_0\) 是一个候选条件,那么小于 \(j_0\) 的最大候选条件是 \(fail[j_0]\). 证明:反证法.假设存在 \(j_1\),使得\ ...
    
			
    4. 
						
  4. Shell脚本编写及常见面试题
			
      注意事项 1)开头加解释器:#!/bin/bash 2)语法缩进,使用四个空格:多加注释说明. 3)命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用. 4)默认变量是全局的, ...
    
			
    5. 
						
  5. JVM总结（二）：垃圾回收器
			
    这一节我们来总结一下JVM垃圾收集器方面的东西. 垃圾回收器 判断对象引用是否失效 对象生存判断算法 引用判断过程 垃圾收集算法简介 垃圾收集器 新生代垃圾收集器 老年代垃圾收集器 新生代和老年代垃圾 ...
    
			
    6. 
						
  6. Prim算法：最小生成树
			
    #define _CRT_SECURE_NO_WARNINGS /* 7 10 0 1 5 0 2 2 1 2 4 1 3 2 2 3 6 2 4 10 3 5 1 4 5 3 4 6 5 5 6 9 ...
    
			
    7. 
						
  7. 在O(N)时间内求解 正数数组中 两个数相加的 最大值
			
    一,问题描述 给定一个正数数组arr(即数组元素全是正数),找出该数组中,两个元素相加的最大值,其中被加数的下标大于加数的下标.由加法运算的可逆性,j >i 这个条件可以去掉. 即求出: max ...
    
			
    8. 
						
  8. [C++]动态内存分配问题
			
    动态分配内存: 1.malloc(int n)/free(&var): https://openhome.cc/Gossip/CGossip/MallocFree.html; 2.new/de ...
    
			
    9. 
						
  9. stm32中字节对齐问题（__align(n)，__packed用法）
			
    ARM下的对齐处理   from DUI0067D_ADS1_2_CompLib 3.13 type  qulifiers 有部分摘自ARM编译器文档对齐部分  对齐的使用:  1.__align(n ...
    
			
    10. 
						
  10. C - Portals Gym - 102006C （网络流最小割）
			
    题目链接:https://cn.vjudge.net/contest/283918#problem/C 题目大意:T个测试数据,然后给你一个字符串,每一个字符串包括‘s’,‘t’,‘o’,‘#’,‘. ...
    
			
    11.