echart 插件实现全国地图
最近的项目要用到一个能展现全国地图的功能，并且全国各个省份显示的颜色不同，点击省份后会返回省份名称。经过反复的查找最终确定了echart这个插件，最后的成果还不错，在这里写下来希望对大家有所帮助。话不多说先看最终的效果图。
最终的效果就是这个样子的啦，感觉还是很好看的，echart这个插件使用还是很简单的，按照官网步骤来就好了。官网地址：http://echarts.baidu.com/index.html
下面就是我实现这个效果的代码了：
<!DOCTYPE html>
<html style="height: 100%"> <head>
<meta charset="utf-8">
</head> <body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript">
var myChart = echarts.init(document.getElementById("container")); option = { tooltip: {
trigger: 'item',
formatter: '{b}'
}, series: [{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: 'single',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [{
name: '北京',
itemStyle: {
normal: {
areaColor: '#D9EDE1'
}
}
},
{
name: '天津',
itemStyle: {
normal: {
areaColor: '#D9EDE1'
}
}
},
{
name: '上海',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
},
{
name: '重庆',
itemStyle: {
normal: {
areaColor: '#FBE0EC'
}
}
},
{
name: '河北',
itemStyle: {
normal: {
areaColor: '#FFFDE4'
}
}
},
{
name: '河南',
itemStyle: {
normal: {
areaColor: '#FBE0EC'
}
}
},
{ name: '云南',
itemStyle: {
normal: {
areaColor: '#FBE0EC'
}
}
},
{
name: '辽宁',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
},
{
name: '黑龙江',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
},
{
name: '湖南',
itemStyle: {
normal: {
areaColor: '#D7EDFB'
}
}
},
{
name: '安徽',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
},
{
name: '山东',
itemStyle: {
normal: {
areaColor: '#D9EDE1'
}
}
},
{
name: '新疆',
itemStyle: {
normal: {
areaColor: '#D7EDFB'
}
}
},
{
name: '江苏',
itemStyle: {
normal: {
areaColor: '#D7EDFB'
}
}
},
{
name: '浙江',
itemStyle: {
normal: {
areaColor: '#D9EDE1'
}
}
},
{
name: '江西',
itemStyle: {
normal: {
areaColor: '#FBE0EC'
}
}
},
{
name: '湖北',
itemStyle: {
normal: {
areaColor: '#FFFDE4'
}
},
selected: true
},
{
name: '广西',
itemStyle: {
normal: {
areaColor: '#D9EDE1'
}
}
},
{
name: '甘肃',
itemStyle: {
normal: {
areaColor: '#FFFDE4'
}
}
},
{
name: '山西',
itemStyle: {
normal: {
areaColor: '#D9EDE1'
}
}
},
{
name: '内蒙古',
itemStyle: {
normal: {
areaColor: '#D7EDFB'
}
}
},
{
name: '陕西',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
},
{
name: '吉林',
itemStyle: {
normal: {
areaColor: '#FFFDE4'
}
}
},
{
name: '福建',
itemStyle: {
normal: {
areaColor: '#D7EDFB'
}
}
},
{
name: '贵州',
itemStyle: {
normal: {
areaColor: '#FFFDE4'
}
}
},
{
name: '广东',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
},
{
name: '青海',
itemStyle: {
normal: {
areaColor: '#FBE0EC'
}
}
},
{
name: '西藏',
itemStyle: {
normal: {
areaColor: '#FFFDE4'
}
}
},
{
name: '四川',
itemStyle: {
normal: {
areaColor: '#D9EDE1'
}
}
},
{
name: '宁夏',
itemStyle: {
normal: {
areaColor: '#FBE0EC'
}
}
},
{
name: '海南',
itemStyle: {
normal: {
areaColor: '#FBE0EC'
}
}
},
{
name: '台湾',
itemStyle: {
normal: {
areaColor: '#FBE0EC'
}
}
},
{
name: '香港',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
},
{
name: '澳门',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
},
{
name: '南海诸岛',
itemStyle: {
normal: {
areaColor: '#FCE1D8'
}
}
}
]
}]
}; myChart.setOption(option, true);
</script>
</body> </html>
这部分代码只引用了一个js文件，这个官网就可以下载的到，最后还有两个细节的部分提醒大家：
1.点击省份返回省份信息
myChart.on('click', function(params) {
console.log(params.name);
});
只要有这部分代码就可以实现点击省份返回省份名称的功能啦！
2.关于地图的大小问题
尽管地图的大小和echart的容器大小挂钩，但是地图在容器内并不是全部占满的，这样就会影响一部分的美观，解决这个问题。只要添加一个属性就可以 了。
series: [{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: 'single',
roam: false,
zoom: 1.2,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
}，
...}]
注意 zoom: 1.2 这个属性是让地图放大的关键，看一下效果对比图
放大前：
放大地图后：
在容器大小一致的情况下，地图明显变大了。
好了，这就是我在项目中遇到的一个小小的问题，已经解决了，也希望对大家有所帮助，大家如果有更好的实现方式也欢迎在评论中提出。
echart 插件实现全国地图的更多相关文章
- MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
@{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...
- arcgis for flex全国地图天气预报的具体实现过程解析
系统架构是B/S,开发语言是flex,开发工具是myeclise或者flashbuild,通过调用百度提供的在线天气预报web api接口的方式来实现. 采用地图是ArcGIS全国地图,开发接口为ar ...
- arcgis for flex或silverlight全国地图天气预报的实现
系统架构是B/S,目前有两个不同的版本,1.开发语言是C#.silverlight,开发平台是.NET:2.开发语言是java.flex,开发平台是myeclise. 采用地图是ArcGIS全国地图, ...
- vue+echarts可视化大屏,全国地图下钻,页面自适应
之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应 ...
- 使用JS+Three.js+Echart开发商场室内地图客流信息统计功能
现在的商场管理者在管理商场的同时面临着一些无法避免的问题比如:人员监管不到位.效率低下.商场同质化严重,人流量少等.发现了这些问题作为开发人员的我们怎能视而不见,我们的责任就是发现问题解决问题,提供更 ...
- 线形，柱形，条形数据表（百度Echart插件）
[获取资源]进入官网, http://echarts.baidu.com/导航,下载,下拉框下载,常用303k.就是这么简单,就个一个js.[项目使用]新建项目,MyChart具体使用的过程中, ...
- 百度地图插件（百度地图AK申请配置指南）
百度地图AK申请配置指南 [LBS云] 百度地图AK申请配置指南 1. 该文档是详细版,图文并茂: 2. 该指南是针对browser-mobile-sever三种终端开发的申请与配置说明: 3 ...
- ionic3使用echart插件
安装 看官方文档可以知道ECharts可以在webpack中使用看这里,故我们可以使用npm下载安装到项目中 npm install echarts --save //下载ECharts npm in ...
- 通过百度地图API--获取全国地图的经纬度
因为要做一个前端画图需要经纬度,一个个的查询过麻烦,最终弄出这个,以备后查! import threading , time import requests from decimal import D ...
随机推荐
- BCNF范式及其分解方法（对一次Lab作业的总结）
BCNF是比第三范式更严格一个范式.它要求关系模型中所有的属性(包括主属性和非主属性)都不传递依赖于任何候选关键字.也就是说,当关系型表中功能上互相依赖的那些列的每一列都是一个候选关键字时候,该满足B ...
- c语言计算功能
---恢复内容开始--- #include <stdio.h> int main(){int a1,a2,a3,a4; printf("请输入数值"); a4=0;wh ...
- leetcode之转置矩阵
转置矩阵 题目描述: 给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引. 示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]] ...
- SAP库龄表
&---------------------------------------------------------------------* *& Report ZFIR005 *& ...
- JavaWeb基础—Http协议
一.什么是Http协议 超文本传输协议的简称,用于定义客户端与web服务器通迅的格式. 关于[标准的HTTP协议是无状态的],请参见:http://www.cnblogs.com/bellkosmos ...
- 2017-2018-2 20155315《网络对抗技术》Exp4：恶意代码分析
实验目的 是监控你自己系统的运行状态,看有没有可疑的程序在运行. 是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systracer套件 ...
- python基础学习1-描述符
#!/usr/bin/env python # -*- coding:utf-8 -*- #描述符就是将某种特殊类型的类的实例指派给另一个类的属性 #特殊类型指 实现了 # __get__(self, ...
- Wannafly挑战赛18B 随机数
Wannafly挑战赛18B 随机数 设\(f_i\)表示生成\(i\)个数有奇数个1的概率. 那么显而易见的递推式:\(f_i=p(1-f_{i-1})+(1-p)f_{i-1}=(1-2p)f_{ ...
- git删除所有提交历史记录
这种方式是最快最有效的 进项目根目录启动git bash,然后执行这些即可 最后的 git push -f origin master 会失败,直接在idea里push就能成功了 .Checkout ...
- JS ,substr、 substring、charAt方法的区别
JS 截取字符串substr 和 substring方法的区别,需要的朋友可以参考下,根据需要自行选择. substr 方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.subs ...