echarts r 地图_使用echarts实现省市区地图
20200629175631429.png
1、首先先引入echarts.min.js文件,然后改造下beijing.json文件,改造后把json改成js文件。各省的json文件大家可以在网上搜下,如果要先成的文件可以给我留下邮箱,我发给大家。
2、相关的文件都引入后,就可以构建地图了。 下面是简单的demo代码,
echarts.registerMap('beijing', beijingJson);//这里用的那个省市的就写那个省市的名字
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
title:{ //这里是标题
text: '北京市轮廓地图',
top: '3%',
left: 'center',//标题居中显示
textStyle: {//标题的样式
fontSize: 20,
fontWeight: 600,
color: '#222'
}
},
tooltip: {
// 触发类型, 数据项图形触发
trigger: 'item',
formatter: function (val) {//这里是鼠标滑过显示的弹框,弹框可以根据自己的需求去写
return val.data.name + '
+ '
'
+ '
' + val.data.value + '
'
+ '
'
}
},
series: [{
type: 'map',
map: 'beijing',
roam: true,//是否开启鼠标缩放和平移漫游
geoIndex: 0,// 不可缺少,否则无tooltip 指示效果
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#fff"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#323232"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#0550c3',//区域边框颜色
areaColor:"#17a34f",//区域颜色
},
emphasis: {
borderWidth: .95,//鼠标滑过区域,区域边框宽度
borderColor: '#fff',//鼠标滑过区域,区域边框颜色
areaColor:"#ff6511",//鼠标滑过区域背景色
}
},
data: [//这里是数据
{
name: '延庆区',
url:'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg',
value: '好邻居!可玩的地儿多的数不过来!',
lng: 115.981186,
lat: 40.462706
},
{
name: '怀柔区',
url:'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
value: '好邻居!可玩的地儿多的数不过来!',
lng: 116.63853,
lat: 40.322563
},
{
name: '密云区',
url:'https://pic4.zhimg.com/50/v2-270ccddee1da949f5a951da1220b373a_hd.jpg',
value: '好邻居!可玩的地儿多的数不过来!',
lng: 116.849551,
lat: 40.382999
},
{
name: '昌平区',
url:'https://pic2.zhimg.com/50/v2-ec095df48d0362d3eb4d0525d4394e16_hd.jpg',
value: '立水桥、回龙观、西三旗、明朝十三陵',
lng: 116.237832,
lat: 40.226854
},
{
name: '顺义区',
url:'https://pic4.zhimg.com/50/v2-4eab4a0caf6b0382c115005992bd6de0_hd.jpg',
value: '顺义城关、天竺、南法信、高丽营',
lng: 116.663242,
lat: 40.1362
},
{
name: '平谷区',
url:'https://pic3.zhimg.com/50/v2-273aed32f94cceb43f03fa389265d8d7_hd.jpg',
value: '平谷镇,金海湖镇,京东大溶洞',
lng: 117.128025,
lat: 40.147115
},
{
name: '门头沟区',
url:'https://pic2.zhimg.com/50/v2-8492e1436403ff4b1305ee031b2b7e94_hd.jpg',
value: '百花山、妙峰山、潭柘寺、戒台寺、永定河',
lng: 116.108179,
lat: 39.94648
},
{
name: '海淀区',
url:'https://pic2.zhimg.com/50/v2-0a43a0d541eb2ff159c69122f2c1f154_hd.jpg',
value: '中关村、五道口、公主坟、颐和园',
lng: 116.304872,
lat: 39.96553
},
{
name: '石景山区',
url:'https://pic3.zhimg.com/80/v2-48a9b57c60e2f15c818c02b879420b73_720w.jpg',
value: '苹果园、老古城、衙门口、玉泉路',
lng: 116.229612,
lat: 39.912017
},
{
name: '西城区',
url:'https://pic3.zhimg.com/v2-00aac6ebd1fe7abb4f2dbc287152bbb5_r.jpg',
value: '西单、什刹海、西直门、动物园',
lng: 116.372397,
lat: 39.918561
},
{
name: '东城区',
url:'https://pic2.zhimg.com/50/v2-f3ba9dcfdbf8ee9a16827be4ee63d62c_hd.jpg',
value: '天安门、王府井、钟鼓楼、东内大街',
lng: 116.42272,
lat: 39.934579
},
{
name: '朝阳区',
url:'https://pic2.zhimg.com/50/v2-d8f9da83aa06b7f6982918272befe909_hd.jpg',
value: '朝外大街、大北窑、亚运村、三里屯',
lng: 116.449767,
lat: 39.927254
},
{
name: '通州区',
url:'https://pic3.zhimg.com/50/v2-6234a8e355289891af36a7bc15186976_hd.jpg',
value: '新华大街、北苑、管庄、八里桥',
lng: 116.662928,
lat: 39.917001
},
{
name: '大兴区',
url:'https://pic2.zhimg.com/50/v2-05ae0a59a3ab00eb5debdf5cece23cd3_hd.jpg',
value: '黄村镇、西红门、亦庄、庞各庄',
lng: 116.348053,
lat: 39.732833
},
{
name: '房山区',
url:'https://pic2.zhimg.com/50/v2-4aa9534e0a120c7e4778e75ab07f2644_hd.jpg',
value: '良乡、燕山、十渡、周口店',
lng: 116.149892,
lat: 39.755039
},
{
name: '丰台区',
url:'https://pic4.zhimg.com/50/v2-425af7e363e02c9a16b9b49fa2f9d395_hd.jpg',
value: '丰台镇、方庄、大红门、卢沟桥',
lng: 116.293105,
lat: 39.865042
}
]
}],
});
如果大家有需要要源码的话可以在git上下载:(第一次写的地图,不喜勿喷),喜欢的话给个赞哈
echarts r 地图_使用echarts实现省市区地图相关推荐
- echarts 世界地图标点_关于echarts的那些事(地图标点,折线图,饼图)
前记:离上一篇博客的发布已经过去两个月了,这期间总想写点什么,却怎么都写不出来,一直拖到了现在.现在的感觉,不是像这期间一样,想好好整理一番,写一篇好博客,却写不出来.事实发现,随心就好,较好的博客, ...
- python画交互式地图_使用Python构建交互式地图-入门指南
python画交互式地图 Welcome to The Beginner's Guide to Building Interactive Maps in Python 欢迎使用Python构建交互式地 ...
- arcgis制作瓦片地图_一种GIS瓦片地图的存储方式的制作方法
本发明涉及一项测绘与地理信息行业数据存储方式. 背景技术: 目前主要使用的GIS瓦片存储技术有两种一种是数据库文件存储,另一种是压缩包存储方式:数据库存储文件方式存在存储数据的冗余,数据格式体积较大的 ...
- arcgis制作瓦片地图_【转】ArcGIS地图缓存制作简介
ArcGIS地图缓存制作简介 制作好的电子地图只有发布为服务后才能为更多的用户所查看与使用.ArcGIS Server 为共享 GIS 资源(如地图)提供了一个平台,无论您是坐在同一间办公室使用 Ar ...
- echarts 山东地图_用Python画中国地图,实现各省份数据可视化
第一步:安装pyecharts pyecharts是一款将python与echarts结合的强大的数据可视化工具,本文使用了0.1.9.4版本 pip install pyecharts==0.1.9 ...
- echarts 3d地图_用Echarts绘制地图-绘制省级地图
公司有一个大数据平台的需求,图表什么的都还好实现.主要就是当中的地图效果我没有做过所以耗费了我一些时间去查资料,万幸还是实现出来了,当然只是一个特别基础的图层没有散点没有下钻,但后面会逐步写出来,所以 ...
- echart 三维可视化地图_使用 ECharts GL 实现三维可视化 - 入门款
(题图是使用 ECharts GL 渲染的纽约市建筑群) ECharts GL (后面统一简称 GL)为 ECharts 补充了丰富的三维可视化组件,这篇文章我们会简单介绍如何基于 GL 实现一些常见 ...
- echaer 地图_用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- echarts年龄饼图_解决echarts饼图显示百分比,和显示内容字体及大小
//基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document.getElementById('pieEchart'));//指定图表的配 ...
- vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
最新文章
- android表视图,android – 列表视图与表格布局
- php sql 条件拼组_ThinkPHP框架SQL操作链式写法原理(浅显易懂)
- 【树莓派】不只是一封感谢信!漂移菌手把手指导:小空间树莓派镜像系统备份方法...
- ap模式和sta模式共存_AP+AC组网下的本地转发及集中转发
- 大数据之-Hadoop3.x_MapReduce_WordCount编写_Driver---大数据之hadoop3.x工作笔记0091
- 算法笔记-差分和前缀和
- 2020年最全易语言安装与配置使用教程
- matlab安装自行下载的工具箱
- 软件工程师中的软件维护概述
- 服务器硬盘gpt,硬盘采用GPT分区非常重要
- 怎么用燃尽图高效搞定项目进度监控?看老原这一篇就够了!
- 完整的保存onetab的书签信息
- 中产学院全国首创7大黄金技术桂林游学发布会
- IoT技术概览(postscapes)
- 如何在Mac版达芬奇中安装使用LUT调色预设?达芬奇lut调色预设安装使用教程
- devm_ioremap_resource devm_ioremap 区别
- vue3循环遍历图片渲染无效果
- Unity开发VR——结合VRTK(二)
- 牛腩新闻发布--过程或函数 'news_selectByCaId' 需要参数 '@caid',但未提供该参数(二)
- 百度url参数分别代表什么意思?