分享一个echart 广州地图的demo

话不多说,先看效果图

实际效果网页

echart-map-guangzhou

demo开始

1.你需要一个echart广州地图的JSON文件,这里我给大家准备好了

guangzhou.json

2.然后你需要一个echart的js包,你可以到echart的官网进行下载

echart官网

3.贴出我的参考代码(由于时间急,没有细细的整理代码,就直接扔出来了, 如有错误之处,请留言指明)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>echart-map-gz</title><script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="height: 800px;width: 800px;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.showLoading();//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端ajax.open('get','guangzhou.json');//步骤三:发送请求ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用ajax.onreadystatechange = function () {if (ajax.readyState==4 &&ajax.status==200) {//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的myChart.hideLoading();geoCoordMap=ajax.response;//将地图注册上去echarts.registerMap('guangzhou',ajax.response );// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}}var dataa=[{name:"荔湾区", value: [113.243038,23.124943,"荔湾区-1号店"]},{name:"海珠区", value: [113.262008,23.103131,"海珠区-1号店"]},{name:"越秀区", value: [113.280714,23.125624,"越秀区-1号店"]},{name:"天河区", value: [113.335367,23.13559,"天河区-1号店"]},{name:"黄埔区", value: [113.450761,23.103239,"黄埔区-1号店"]},{name:"白云区", value: [113.262831,23.162281,"白云区-1号店"]},{name:"番禺区", value: [113.364619,22.938582,"番禺区-1号店"]},{name:"南沙区", value: [113.53738,22.794531,"南沙区-1号店"]},{name:"从化区", value: [113.587386,23.545283,"从化区-1号店"]},{name:"花都区", value: [113.211184,23.39205,"花都区-1号店"]},{name:"增城区", value: [113.829579,23.290497,"增城区-1号店"]},]// 指定图表的配置项和数据var option = {backgroundColor: '#ccc',title: {text: '广州市 echart -门店分布图',subtext: '数据来源于我瞎编的',sublink: 'http://lengff.xyz',x: 'center',itemGap:2,subtextStyle:{color:"#fff"},textStyle:{color:"#fff"}},tooltip: {trigger: 'item',formatter: function (params) {return params.name + ' : ' + params.value[2];}},legend: {orient: 'vertical',y: 'bottom',x:'right',data:['测试门店分布'],textStyle: {color: '#fff'}},geo: {map: 'guangzhou',roam: true,zoom:1.2,layoutSize:"50%",label: {emphasis: {show: true}},itemStyle: {normal: {areaColor: '#2b87bb',borderColor: '#73ffb3'},emphasis: {borderColor: '#fff',borderWidth: 1,areaColor: '#4e4e4e'}}},toolbox: {show: true,right: 'left',top: 0,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},series: [{name:'测试门店分布',type: 'scatter',coordinateSystem: 'geo',label: {normal: {color:'#fff',formatter: '{b}',position: 'bottom',show: true}},data: dataa,symbolSize: 30,encode: {value: 2},symbol:'pin',zlevel: 1}]}
</script>
</body>
</html>

分享一个echart 广州地图的demo相关推荐

atm取款机 oracle实战训练_分享一个模拟ATM取款机的DEMO
这是一个模拟ATM取款机的DEMO(C#版)的,还算比较完整.我现在就给大家分享下把.下面是使用说明本系统采用的是sql2005的数据库平台是.net3.5 注: 帐号密码都默认为:123456 ...
分享一个模拟ATM取款机的DEMO
这是一个模拟ATM取款机的DEMO(C#版)的,还算比较完整.我现在就给大家分享下把.下面是使用说明本系统采用的是sql2005的数据库平台是.net3.5 注: 帐号密码都默认为:123456 ...
分享一个可以自定义搜索定位的地图
分享一个可以自定义搜索定位的地图前面的申请ak密钥步骤都是一致的,这里就不重复描述了,可以通过下面的链接看具体步骤然后复制本篇下面的代码 https://blog.csdn.net/weixin_4 ...
分享一个Google Authenticator（动态口令）的AndroidStudio构建的Demo
分享一个Google Authenticator(动态口令)的AndroidStudio构建的Demo 非官方Demo,仅仅是将官方由bazel构建的扒出来,本人仅是搬运分享,给广大猿族带来便捷: A ...
Esp8266 进阶之路31【外设篇】分享一个乐鑫esp8266 SDK编程使用 IIC总线驱动 0.96寸的OLED显示屏，显示天气预报信息。（附带Demo）
本系列博客学习由非官方人员半颗心脏潜心所力所写,不做开发板.仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 序号 SDK版本内容链接 1 nonos2.0 搭建 ...
基于echart青海省地图资源的修改体验
基于echart青海省地图资源的修改体验最近老用echart做首页展示地图,本来都还很正常,却遇到了奇怪的甲方需求. 在青海省下8个同级行政区内,把唐古拉山镇部分独立划分出来和这8个平级. 什么也不 ...
实现百度地图导航Demo的语音播报功能
上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...
分享一个获得Java项目经验的快速途径！
Java作为世界上最受欢迎的编程语言,在多个领域都有非常深入的应用,使用Java编写的程序几乎可用于任何设备! 据统计全球范围内有超过30亿部设备运行Java,90%的互联网产品使用Java进行开发, ...
【C#】分享一个弹出容器层，像右键菜单那样召即来挥则去
[C#]分享一个弹出容器层,像右键菜单那样召即来挥则去适用于:.net2.0+ Winform项目 ------------------201508261813更新(源码有更新.Demo未更新)-- ...
分享一个JAVA专业接口开发利器，牛牛牛新鲜出炉！！！
分享一个JAVA专业接口开发利器,集成在线接口文档 Swagger-ui,采用Jwt Token验证机制,最牛在于业务restful接口代码自动生成,更更牛的在接口可以做细化权限控制(例如:不同开发商 ...

分享一个echart 广州地图的demo

话不多说,先看效果图

实际效果网页

demo开始

分享一个echart 广州地图的demo相关推荐

最新文章

热门文章