前言

上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts，这是一款很强大的图表插件，里面的地图控件也是很强大的，支持离线的使用，并且数据也是离线的，使用很方便。下面我就简单介绍一下echarts中的地图控件

一、插件下载

echarts3是一个集成的插件，把很多东西都集成到一起了，使用很方便，从官网上下载一下，和普通js文件一样，直接添加到项目中，在HTML头部引用一下即可。

地图的插件也是一个js文件，数据是一个json文件，从官网下载下来，添加引用，但是一定注意引用的先后顺序。

1、echarts下载地址

http://echarts.baidu.com/download.html

2、地图下载

http://echarts.baidu.com/download-map.html  （js文件和json文件）包括中国地图和世界地图，还有各个省份的地图数据。

二、插件引用

1、js的引用

 <script src="echarts.js"></script>

 <script src="map/js/china.js"></script>

 <script>

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

 chart.setOption({

     series: [{

         type: 'map',

         map: 'china'

     }]

 });

 </script>
 

2、json的引用

 $.get('map/json/china.json', function (chinaJson) {

     echarts.registerMap('china', chinaJson);

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

     chart.setOption({

         series: [{

             type: 'map',

             map: 'china'

         }]

     });

 });


三、完整的demo


HTML代码：






 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

 <title>河南省地图</title>

 </head>

 <body>

 <div id="main" style="width:100%;height:800px;"></div>

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

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

 <script type="text/javascript">

 $(function () {

 //获取地区的json数据

 var henanJson = $.get('json/henan.json');

 //加载省份的地图

 echarts.registerMap('henan', henanJson);

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

 myChart.setOption({

 series: [{

 type: 'map',

 mapType: '河南'

 }]

 });

 myChart.on('click', function (param) {

 var selectedCity = param.name;

 alert(selectedCity);

 //点击获取对应的市的名称

 var flag = false;

 var selected = param.selected;

 for (var p in selected) {

 getVodList(mapUtil.findFbdm(selectedCity), selectedCity);

 //加载右侧的列表

 if (p == selectedCity) {

 flag = true;

 selectedCity = p;

 }

 }

 if (flag) {

 //重新画地图进入到该市的县级地图 (下钻到县级 )

 var map = new Map();

 map = getMap(selectedCity, 3);

 initMap(map, selectedCity, 'xj');

 $('#Header').css('display', '');

 //显示隐藏的返回按钮

 myChart.on('click', function (param) {

 var selectedTown = param.target;

 //点击获取对应的县的名称

 getVodList(mapUtil.findFbdm(selectedTown), selectedTown);

 //加载右侧的列表

 });

 }

 });

 });

 </script>

 </body>

 </html>






四、显示结果




												


											
数据图表插件echarts（二）的更多相关文章
	

    
								
  1. 数据图表插件Echarts（一）
		
    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
    
		
    2. 
						
  2. 大数据-图表插件-echarts 样式修改（迭代）
		
    修改折线图大小   myChart.setOption({             title:{                     text:"价格指数"          ...
    
		
    3. 
						
  3. Echarts数据图表插件--开源、大气、强大
		
    个人觉得不错,分享给大家. 教程地址:http://echarts.baidu.com/, 开源项目:https://github.com/ecomfe/echarts
    
		
    4. 
						
  4. chart 数据 图表插件
		
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js">< ...
    
		
    5. 
						
  5. Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）
		
    导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
    
		
    6. 
						
  6. ECharts数据图表系统？ 5分钟上手！
		
    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下.  ...
    
		
    7. 
						
  7. ECharts图表插件(4.x版本)使用（一、关系图force节点显示为自定义图像/图片，带分类选择）
		
    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
    
		
    8. 
						
  8. 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文
		
    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
    
		
    9. 
						
  9. ECharts  – 大数据时代，重新定义数据图表
		
    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 3.CentOS的一些小笔记
			
    1.一般来说,主文件夹都在/home下面,比如登陆的账户为LyndonMario,则我的主文件夹为 /home/LyndonMario. 2.ctrl+space可以调出输入法. 3.CentOS中的 ...
    
			
    2. 
						
  2. 利用ansible来做kubernetes 1.10.3集群高可用的一键部署
			
    请读者务必保持环境一致 安装过程中需要下载所需系统包,请务必使所有节点连上互联网. 本次安装的集群节点信息 实验环境:VMware的虚拟机 IP地址 主机名 CPU 内存 192.168.77.133 ...
    
			
    3. 
						
  3. Html和websocket初识
			
    一.web框架 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. import socket def handle_request(c ...
    
			
    4. 
						
  4. Python【logging】模块
			
    # 1.负责往控制台里面输出日志信息的 # 2.往日志文件里面写日志的,按天生成日志,清理日志 import logging from logging import handlers logger = ...
    
			
    5. 
						
  5. Python 装饰器（进阶篇）
			
    装饰器是什么呢? 我们先来打一个比方,我写了一个python的插件,提供给用户使用,但是在使用的过程中我添加了一些功能,可是又不希望用户改变调用的方式,那么该怎么办呢? 这个时候就用到了装饰器.装饰器 ...
    
			
    6. 
						
  6. How to Tell Science Stories with Maps
			
    Reported Features How to Tell Science Stories with Maps August 25, 2015   Greg Miller This map, part ...
    
			
    7. 
						
  7. Java8 新特性 Streams map() 示例
			
    在Java 8中stream().map(),您可以将对象转换为其他对象.查看以下示例: 1.大写字符串列表 1.1简单的Java示例将Strings列表转换为大写. TestJava8.java p ...
    
			
    8. 
						
  8. Eclipse中如何改变主题
			
    童鞋们, eclipse主题太丑?想设置护眼的主题? 看看这些主题: 请移驾: Eclipse Color Themes 怎么设设置? 1. 打开”eclipse marketplace“, 如下图: ...
    
			
    9. 
						
  9. （转）Oracle 字符集的查看和修改
			
    一.什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系.ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储,处理,检索数据.它使数据库 ...
    
			
    10. 
						
  10. POJ    2449     Remmarguts' Date     (K短路   A*算法）
			
    题目链接 Description "Good man never makes girls wait or breaks an appointment!" said the mand ...
    
			
    11.