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 ...
随机推荐
- 图片 和 base64 互转
图片转base64 NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:urlStr]]; UIImage *img = ...
- ubuntu16.04编译安装opencv3.4.6
1.下载压缩包:https://github.com/opencv/opencv,在Branch栏选择3.4版本,clone下载 2.安装cmake及依赖库,打开终端,输入以下命令: sudo apt ...
- django的Session-10
目录 配置储存引擎 存储在sql数据库 储存在缓存 储存在本地文件 储存在redis session操作 django需要使用一个中间价来实现 session功能, 一般情况下默认启用了该中间价 ,可 ...
- 20155211 课下测试ch12补做
20155211 课下测试ch12补做 有关线程图,下面说法正确的是() A.图的原点表示没有任何线程完成一条指令的初始状态 B.向右向上是合法的转换 C.向左向下是合法的转换 D.对角线是合法的转换 ...
- cnn 滤波
http://blog.csdn.net/zouxy09/article/details/49080029
- django学习笔记(3)
Part 3: Views and templates ====> Write your first view$ edit polls\views.py from django.http imp ...
- 基于Vue的弹框实例
看到博客的人,请养成写博客的习惯,不会不会,就怕曾经会过,现在想不起来了,一起加油.................... 让学习真的成为一种习惯,同时要注意身体 <!DOCTYPE html ...
- C++STL学习笔记_(2)deque双端数组知识
#include<iostream> using namespace std; #include "deque" #include "algorithm&qu ...
- 用CSS3做3D动画的那些事
年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...
- idea配置SOLServer错误解决记录
1.错误信息:2019-03-26 13:32:41.205 ERROR 7828 --- [nio-8081-exec-1] c.alibaba.druid.filter.stat.StatFilt ...