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 ...
随机推荐
- MySQL-ALTER TABLE命令学习[20180503]
学习ALTER TABLE删除.添加和修改字段和类型 CREATE TABLE alter_tab01( id int, col01 char(20)) engin=I ...
- VS2010调试和头文件路径设置
1:VS2010 release 调试C/C++ -> 常规 -> 调试信息格式, 修改为程序数据库(/Zi)C/C++ ->优化 -> 优化,修改为已禁用(/Od)链接器 - ...
- linux用户管理（1）----创建用户（adduser和useradd）和删除用户（userdel）
一.常用命令: (1)创建用户命令两条: adduser useradd (2)用户删除命令: userdel 二.两个用户创建命令之间的区别 adduser: 会自动为创建的用户指定主目录.系统sh ...
- Git 解决添加到.gitignore的忽略项不生效的问题
今天又在.gitignore添加了一些忽略项,但是后来发现一些东西命名配置了忽略项却还是没起作用,so,分析原因,可能是在我添加忽略项之前,因为这些文件就早已经被提交了,所有他们已经在版本控制中,导致 ...
- 【Vijos】lxhgww的奇思妙想
题面 题解 求$k$级祖先孙子 为什么要用长链剖分啊??? 倍增并没有慢多少... 其实是我不会 长链剖分做这道题还是看这位巨佬的吧. 代码 #include<bits/stdc++.h> ...
- PLSQL Developer 客户端没有TNS监听，无法连接数据库
在Windows Server 2008 中安装了 64位的Oracle,好不容易将监听做好,在使用客户端 PLSQL Developer 的时候发现竟然没有TNS监听. 问题如下: 如上图所示,打开 ...
- .Net Core和.Net Standard直观理解
.NET framework和.NET Core里面有一些部分,内容是相同的. 这部分相同的内容,就被称为标准库...即NET Standard Library. 而那些不同的部分,则分别叫做.NET ...
- futuba R70085SB 接收机 只有SBus端口有输出其他端口输出不变
接收机能收到遥控器信号,且Sbus端口有输出,其他端口输出没有变化,这时你要看一下接收机的模式了,肯定是遥控器的通道跟输出端口的通道不匹配.参考Futuba T14SG遥控器的说明书,如下图
- 从零搭建HBase集群
本文从零开始搭建大数据集群,涉及Linux集群安装搭建,Hadoop集群搭建,HBase集群搭建,Java接口封装,对接Java的C#类库封装 Linux集群搭建与配置 Hadoop集群搭建与配置 H ...
- 【转载】钉钉开发c#帮助类 获取用户信息 DingHelper.cs
using System;using System.Collections.Generic;using System.Configuration;using System.Linq;using Sys ...