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 ...
随机推荐
- iOS 多线程：『GCD』详尽总结
本文用来介绍 iOS 多线程中 GCD 的相关知识以及使用方法.这大概是史上最详细.清晰的关于 GCD 的详细讲解+总结的文章了.通过本文,您将了解到: 1. GCD 简介 2. GCD 任务和队列 ...
- nginx负载均衡及配置
nginx负载均衡及配置 1 负载均衡概述 负载均衡由来是因为当一台服务器单位时间内的访问量很大时,此时服务器的压力也会很大,当超过自身承受能力时,服务器就会崩溃.为避免让服务器崩溃,用户拥有更好的体 ...
- SAP函数 CS_WHERE_USED_MAT 反查上层BOM
遇到用户要根据下层物料反查最上层BOM物料是什么. 试了一下,通过函数 CS_WHERE_USED_MAT 来查询,但是只能往上查询一层,类似事务码CS15的效果.如果要找最上层物料,需要自己写迭代进 ...
- 20145209刘一阳《JAVA程序设计》第九周课堂测试
第九周课堂测试 1.域名解析服务器(ARP)负责将域名转化为IP地址,从而与主机连接.(B) A .true B .false 2.下列关于URL类的说法,正确的是(BD) A .URL 类自身可根据 ...
- POJ-2299 Ultra-QuickSort (树状数组)
题目链接:Ultra-QuickSort 题意: 给出了一个序列,序列中有n个数,现在每次操作能交换相邻的两个数,要求操作几次可以将这个序列转换为一个从小到大排序的序列. 题解: 我的解法是先把所有的 ...
- dpkg使用记录
dpkg -l 查看所有已安装的包 grep即可过滤想要的内容 dpkg -r 包名 // 卸载包 -P 完全卸载 可能会有配置文件不能删除 不能删除的重启再卸载即可 dpkg -i 包 ...
- $anchorScroll angular锚点服务
angular锚点服务 $anchorScroll 普通的html页面中,我们会通过在url后面添加#elementId的方式,将页面显示定位到某个元素上,也就是所谓的锚点. 但是在angular应用 ...
- Convert Application Model Differences
The eXpressApp Framework is based on the modules concept. As a rule, every module implements a certa ...
- 如何创建XHTML表单
首先奉上本菜曾经的作业——一张模仿智联招聘中的注册表单.虽然没有加样式显得很难看,但表单的基本要素已经具备了. 接下来进入正文,开始介绍各表单元素 form标签: 在创建表单时,第一步就是form标签 ...
- 初识IT行业,人生苦短，我学python
第一次写,我也不知道该怎么写.只有慢慢的去体会大神们的见解与看法. Python是一个较强的脚本语言,而Java是强类型的编程语言.为了更好的入门,我没有去选择强类型语言的Java,而选择使用Pyth ...