前言

上一篇文章简单介绍了一下百度公司前端部门写的一个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. 安装JDK、Tomcat、Maven’详细步骤
			
    安装JDK 1.首先在官网下载JDK1.8包并解压(随便你装哪个版本) 2.下面开始配置环境变量  此电脑-右键-属性-高级系统配置  点击环境变量 将会看到以下界面 在系统变量下“新建” 变量名(J ...
    
			
    2. 
						
  2. mongodb_修改器（$inc/$set/$unset/$push/$pop/upsert）
			
    转自 https://blog.csdn.net/mcpang/article/details/7752736   对于文档的更新除替换外,针对某个或多个文档只需要部分更新可使用原子的更新修改器,能够 ...
    
			
    3. 
						
  3. linux  diff 命令
			
    diff 命令是 linux上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方.diff在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件.diff程序的 ...
    
			
    4. 
						
  4. Codeforces Round #477 (rated, Div. 2, based on VK Cup 2018 Round 3) D   贪心
			
    http://codeforces.com/contest/967/problem/D 题目大意: 有n个服务器,标号为1~n,每个服务器有C[i]个资源.现在,有两个任务需要同时进行,令他为x1,x ...
    
			
    5. 
						
  5. Redis学习八：Redis的事务
			
    一.是什么 可以一次执行多个命令,本质是一组命令的集合.一个事务中的所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入,不许加塞. 二.能干嘛 一个队列中,一次性.顺序性.排他性的执行一系列命 ...
    
			
    6. 
						
  6. java正则：不包含某个规则字符串【转】
			
    概述 做日志分析工作的经常需要跟成千上万的日志条目打交道,为了在庞大的数据量中找到特定模式的数据,常常需要编写很多复杂的正则表达式.例如枚举出日志文件中不包含某个特定字符串的条目,找出不以某个特定字符 ...
    
			
    7. 
						
  7. MapReduce （MRV1）设计理念与基本架构
			
    MapReduce 是一个分布式计算框架,主要由两部分组成:编程模型和运行时环境. 其中,编程模型为用户提供了非常易用的编程接口,用户只需要像编写串行程序一样实现几个简单的函数即可实现一个分布式程序, ...
    
			
    8. 
						
  8. Donald Ervin Knuth：最年轻的图灵奖高德纳
			
    高德纳(Donald Ervin Knuth,1938年),美国著名计算机科学家,斯坦福大学电脑系荣誉教授.高德纳教授被誉为现代计算机科学的鼻祖,在计算机科学及数学领域发表了多部 具广泛影响的论文和著 ...
    
			
    9. 
						
  9. Android 动态添加Spinner(.java文件内实现)   实现 改变spinner 内文字属性
			
    动态添加spinner 控件 Spinner s = new Spinner(this); String []items={"自己定义的要显示的数组"}; my_SpinnerAd ...
    
			
    10. 
						
  10. session使用
			
    Session的声明与使用 Session的设置不同于Cookie,必须先启动,在PHP中必须调用session_start().session_start()函数的语法格式如下: Bool sess ...
    
			
    11.