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 ...
随机推荐
- 【安装Ecshop2.7.2网站（LAMP环境）】--实践
LAMP : Linux + Apache + Mysql + PHPEcshop2.7.2 注意:在输入命令过程中,学会用tab键补全命令,不要对着照抄,很容易出错. 前置:A:先设置虚拟机中的CD ...
- 接口与协议学习笔记-AMBA片上通信协议_APB_AHB_AXI_AXI4不同版本（二）
随着深亚微米工艺技术日益成熟,集成电路芯片的规模越来越大.数字IC从基于时序驱动的设计方法,发展到基于IP复用的设计方法,并在SOC设计中得到了广泛应用.在基于IP复用的SoC设计中,片上总线设计是最 ...
- 2017-2018-1 20155216 《信息安全系统设计基础》 实现mypwd
2017-2018-1 20155216 <信息安全系统设计基础> 实现mypwd 作业要求: 1.学习pwd命令 2.研究pwd实现需要的系统调用(man -k; grep),写出伪代码 ...
- vue-cli打包后，图片路径不对
在config文件夹下的 index.js 里面,查找build,在builid方法里面,添加一行:assetsPublicPath: './' 例: 在build文件夹下的utils.js里面,查找 ...
- JavaWeb总结（十）
Filter配置详解 web项目目录示意图 <!-- Filter配置 --> <filter> <display-name>Filter_one</disp ...
- SQL Server 创建带返回值的存储过程
--drop procedure zcstest; create procedure zcstest ( @tableName varchar(max), @dataCount int output ...
- Jmeter接口测试（七）用例数据分离
之前我们的用例数据都是配置在 Jmeter Http 请求中,每次需要增加,修改用例都需要打开 jmeter 重新编辑,当用例越来越多的时候,用例维护起来就越来越麻烦,有没有好的方法来解决这种情况呢? ...
- git pull fatal: refusing to merge unrelated histories
1.首先我github有个远程仓库,然后我本地有个仓库 本地仓库我新添加了一个文件,然后我去关联(git remote add origin git@github.com:qshilary/gitte ...
- 在eclipse中修改项目发布tomcat的路径名
第一种.右键点击项目,选中Properties 第二种.双击tomcat 保存 第三种.修改项目目录下的 .setting目录下的
- 企业服务总线ESB
# 企业服务总线ESB 由中间件技术实现并支持SOA的一组基础架构,支持异构环境中的服务.消息以及基于事件的交互,并且具有适当的服务级别和可管理性. 通过使用ESB,可以在几乎不更改代码的情况下,以一 ...