Echarts 地图配置拖动缩放/初始化缩放比例/不同地区显示不同颜色/地图和散点图结合

本文链接：https://blog.csdn.net/weixin_42448623/article/details/109000716

文章目录

特点

主要可以帮助我们从宏观的角度快速看出不同地理位置上的数据差异。

基本使用

百度地图API

需要申请百度地图ak

矢量地图

资料
需要准备矢量地图数据
注册矢量地图数据 echarts.registerMap('map',data)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Echarts_kaifa.js"></script>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>
        <h4> 地图 </h4>
        <div id="map" style="width: 600px;height:400px;"></div>
    </div>
    <hr>
    <script>
        let myEchart = echarts.init(document.querySelector("#map"))
        let mapKey = 'fmap'
        $.get('json/map/china.json',ret=>{
   
            // 注册地图的JSON数据
            echarts.registerMap(mapKey,ret)
            let option = {
   
                geo:{
   
                    type: 'map',
                    map: mapKey 
                }
            }
            myEchart.setOption(option)
        })
        
    </script>
</body>

</html>

在这里插入图片描述

常用配置

拖动缩放 roam

geo:{
   
    roam: true //拖动缩放
}

Echarts 地图配置 拖动缩放/初始化缩放比例/不同地区显示不同颜色/地图和散点图结合

文章目录

特点

基本使用

百度地图API

矢量地图

常用配置

拖动缩放 roam

名称显示

Echarts 地图配置拖动缩放/初始化缩放比例/不同地区显示不同颜色/地图和散点图结合