echarts集成地图，实现省地图

一、获取地图的GeoJSON

地址：DataV.地图GeoJSON数据

搜索想要操作的地方，选择需要的粒度

点击下载，得到json文件

二、在页面中创建容器，用来存储地图

                <div class="card-body">
                  <h5 class="card-title">热门景区地图</h5>

                  <!-- Line Chart -->
                  <div id="mains" style="width:100%;height:450px">

                  </div>


                </div>

三、引入echarts和json文件
 

 <script src="/static/echarts.min.js"></script>
  <script src="/static/辽宁省.json"></script>

  <script>    
echarts.registerMap('辽宁省', liaoning) //辽宁省是下载的json文件的名字,liaoning是注册的地图名，得和下面的map设置名一致
      var chinaChart = echarts.init(
        document.getElementById("mains")
      );

var option = {
    // ... 其他配置项
       geo: {
                        map: "liaoning", //此处跟上面注册名字一致
                        roam: true,
                        scaleLimit: {
                            min: 1,
                            max: 2
                        }
            
                    },
    series: [{
        // ... 系列配置项
        data: [
            {name: '北京', value: 10},
            {name: '天津', value: 10},
            // 更多数据...
        ]
    }]

      chinaChart.setOption(option);
  </script>

也可以下载echarts项目，里面有各个地方的地图

注册的名字要在js文件上找

引入js文件，就已经注册地图了，一般就是地方名，只需要配置option就可以了

 var chinaChart = echarts.init(
        document.getElementById("mains")
      );

var option = {
    // ... 其他配置项
       geo: {
                        map: "辽宁", //此处跟js注册名字一致
                        roam: true,
                        scaleLimit: {
                            min: 1,
                            max: 2
                        }
            
                    },
    series: [{
        // ... 系列配置项
        data: [
            {name: '北京', value: 10},
            {name: '天津', value: 10},
            // 更多数据...
        ]
    }]

      chinaChart.setOption(option);
  </script>

坑点：地图加载不出来或者报Uncaught TypeError: Cannot read properties of undefined (reading ‘regions‘)或者没有bestoption，可能是地图名字不对，得校对一下注册的地图名叫什么