echarts如何引入市级地图

1、获取相应市级地图的json文件

阿里云 DataV - 数据可视化平台

2、在<script></script>标签中使用jquery的异步加载获取资源

3、不说了，直接上图和代码

项目的文件结构

具体的实现代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="js/echarts.js"></script><script src="js/jquery.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">$.get('https://geo.datav.aliyun.com/areas_v3/bound/640100_full.json', function (yCjson) {echarts.registerMap('银川', yCjson);var chart = echarts.init(document.getElementById('main'));option = {title: {text: '四色预警',x:'center'},dataRange:{min:0,max:500,text:['高','低'],realtime:true,calculable:true,color:['orangered','yellow','green']},series:[{name:'犯罪数量',type:'map',map:'银川',mapLocation:{y:60},itemSytle:{emphasis:{label:{show:false}}},data:[{name:'西夏区',value:Math.round(Math.random()*500)},{name:'贺兰县',value:Math.round(Math.random()*500)},{name:'金凤区',value:Math.round(Math.random()*500)},{name:'永宁县',value:Math.round(Math.random()*500)},{name:'灵武市',value:Math.round(Math.random()*500)},{name:'兴庆区',value:Math.round(Math.random()*500)}]}],};chart.setOption(option);
});</script>
</body>
</html>

4、效果展示

ps:如果遇到浏览器报以下问题，参考解决方案：获取省市区geoJson数据（精确到县、镇）用于echarts实现地图数据可视化_姜雪辞的博客-CSDN博客_geojson城市数据 5、示例代码下载：echarts引入离线地图代码.ziphttps://download.csdn.net/download/lissic_blog/75400762

echarts如何引入市级地图相关推荐

Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Echarts引入省级地图（简便快捷，以浙江省为例）
Echarts引入省级地图(简便快捷,以浙江省为例) 最近需求,利用echarts地图显示浙江省行政区.一开始找了很多资料,但是一直没法实现,也不知道为什么.网上的办法试了个遍,老是不成功.总感觉打开 ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...
vue+echarts实现3d地图——引入3d地图,加点,加点击事件
先看效果图: 1,获取相当于的json文件,推荐一个获取各个市县的json文件地址点击前往将下载好的josn文件重命名,简短点. 一共就三个文件第一个就是json文件, 第二个是myMap.js ...
使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
echarts可视化市级地图详细版(vue+element)
echarts可视化市级地图详细版(vue+element) 非常详细的echarts可视化地图,可全国可市级,各种属性踩了好几天的坑,一步一步归纳总结出来的 1.效果图代码如下 import e ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...

echarts如何引入市级地图

echarts如何引入市级地图相关推荐

最新文章

热门文章