echarts如何引入市级地图

最新推荐文章于 2024-02-27 11:30:49 发布

Zerooooooooooooooooo

最新推荐文章于 2024-02-27 11:30:49 发布

阅读量4w

点赞数 32

分类专栏：前端技术文章标签： echarts

本文链接：https://blog.csdn.net/lissic_blog/article/details/52043430

版权

前端技术专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

Zerooooooooooooooooo

关注

32
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
23
评论
echarts如何引入市级地图

1、获取相应市级地图的json文件2、在标签中使用jquery的异步加载获取资源3、不说了，直接上图和代码项目的文件结构具体的实现代码： ECharts $.get('mapjson/yinchuan.json', function (yCjson) {
复制链接

扫一扫