Echarts-详细配置-功能升级-地图 (七)

作者: coderhzc | 来源:发表于2022-12-11 13:58 被阅读0次

Echarts-详细配置-功能升级-地图 (七)
MUI地图（添加标注、设置折线）
Echarts-自带地图着色
高德地图6.8.0定位修改的修复方法
vue使用amap实现地图选点
iOS11人机交互指南-视图-06：地图视图 Maps
Echarts-数据可视化产品
iOS MobShare分享、微信、支付宝支付、百度地图需要注意
百度地图定位，地图展示功能、大头针，多个大头针及气泡title全
商品信息录入界面功能设计

一. Echarts 地图的展示和绘制的基本使用

需求:如果我只想在某个省份或者某个市区需要展示数据不需要显示整个中国地图那该如何处理呢?
获取单个的省份的数据地址
 获取单个的省份的数据地址

1. ECharts绘制地图步骤（方式一）：
      -- 拿到GeoJSON数据
      -- 注册对应的地图的GeoJSON数据（调用setOption前注册）
      -- .配置geo选项。

2. ECharts绘制地图步骤（方式二）：
      -- 拿到GeoJSON数据
      -- 注册对应的地图的GeoJSON数据（调用setOption前注册）
      -- 配置map series。

#### ./geojson/china_geojson.js 和 ./geojson/china.js 这些都在云盘中,需要的话,下载下来
### 具体代码如下:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <!-- 0. 首先导入Echarts图表库 -->
    <script src="../libs/echarts-5.3.3.js"></script>
    <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
-->
    <!--  这个是通过.json 文件转换后的用法 -->
    <!-- <script src="./geojson/china_geojson.js"></script> -->
    <script src="./geojson/china.js"></script>

    <script>
      window.onload = function () {
        // 这个是通过.json 文件转换后的用法
        // echarts.registerMap('中国', { geoJSON: china_geojson })
        // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
        let myChart = echarts.init(document.getElementById("main"));
        let option = {
          // 3.在 echarts 中展示中国地图
          geo: {
            map: "china",
          },
        };
        myChart.setOption(option);
      };
    </script>
  </body>
</html>

实际截图

image.png

二. 给 Echarts -- 中国地图配置的series配置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
  <script src="./geojson/china_geojson.js"></script>
  <script>
    window.onload = function() {
      // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
      echarts.registerMap('中国', { geoJSON: china_geojson })

      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        // 3.在 echarts 中展示中国地图
        series: [
          {
            type: 'map', // 系列图是 地图
            map: '中国' // 展示中国地图( 因为只注册一个中国地图 )
          }
        ]
      };
      myChart.setOption(option);
    }
  </script>
</body>
</html>

实际截图

image.png

三. geo 和 map series绘制地图的区别?

image.png

1. geo地理坐标系组件
    -- 会生成一个 geo 地理坐标系组件
    -- 地理坐标系组件用于地图的绘制
    -- 支持在地理坐标系上绘制散点图，线集。
    -- 该坐标系可以共其它系列复用
PS注意：其他系列在复用该地理坐标系时，series的itemStyle等样式将不起作用

2. map series
    -- 默认情况下，map series 会自己生成内部专用的 geo 地理坐标系组件
    -- 地理坐标系组件用于地图的绘制
    -- 地图主要用于地理区域数据的可视化，配合data使用
    -- 配合 visualMap 组件用于展示不同区域的人口分布密度等数据

三.一 geo 和 map series绘制地图的区别?---区别代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <script src="../libs/echarts-5.3.3.js"></script>
    <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
    <script src="./geojson/china_geojson.js"></script>
    <script>
      window.onload = function () {
        // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
        echarts.registerMap("中国", { geoJSON: china_geojson });

        let myChart = echarts.init(document.getElementById("main"));
        let option = {
          // geo地图和series地图区别,一下其实已经创建了 2个地图
          // 3.在 echarts 中展示中国地图
          geo: [ // 这个geo 中可以配置多个地图 按照对象的方式 这种创建
            {
              map: "中国", // 全局的地图( 创建一个地理坐标系统, 供其它系列复用该坐标系 )
              roam: true,
            },
          ],

          series: [
            {
              type: "map", // 系列图是 地图(创建一个地理坐标系统, 用来展示数据 )
              map: "中国", //
              roam: true, // 是否可以拖动
            },
          ],
        };
        myChart.setOption(option);
      };
    </script>
  </body>
</html>

实际截图

image.png

四.Echarts -- 中国地图着色

1. 地图着色，可以通过 itemStyle 属性中的 areaColor 和 borderColor 属性。
    -- areaColor ：地图区域的颜色；
    -- borderColor：图形（边界）的描边颜色。

详细参数如下:

image.png

四.一地图着色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
  <script src="./geojson/china_geojson.js"></script>
  <script>
    window.onload = function() {
      // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
      echarts.registerMap('中国', { geoJSON: china_geojson })
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        tooltip: {},
        // 3.在 echarts 中展示中国地图
        // 在geo 属性中创建地图
        // geo: {
        //   map: '中国',
        //   // =======地图着色=========
        //   itemStyle: {
        //     areaColor: "#023677", // 地图区域的颜色。
        //     borderColor: "#1180c7", // 图形的描边颜色。
        //   },
        
        // 此属性是 鼠标经过高亮的时候 会显示的颜色
        //   emphasis: {
        //     itemStyle: {
        //       areaColor: "#4499d0",
        //     },
        //     label: {
        //       color: "white",
        //     },
        //   },
        //   // =======地图着色=========
        // },
      
        // 此属性中创建地图
        series: [
          {
            
            type: 'map', // 系列图是 地图(创建一个地理坐标系统, 用来展示数据 )
            map: '中国', // 
            roam: true,
            // =======地图着色=========
            itemStyle: {
              areaColor: "#023677", // 地图区域的颜色。
              borderColor: "#1180c7", // 图形的描边颜色。
            },
              
            // 此属性是 鼠标经过高亮的时候 会显示的颜色
            emphasis: {
              itemStyle: {
                areaColor: "#4499d0",
              },
              label: {
                color: "white", // 鼠标经过时显示的label文字颜色
              },
            },
              // =======地图着色=========
          }
        ]
      };
      myChart.setOption(option);
    }
  </script>
</body>
</html>

实际截图

image.png

五. 中国地图-填充数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div id="main" style="height: 600px"></div>

    <script src="../libs/echarts-5.3.3.js"></script>
    <script src="./geojson/china_geojson.js"></script>
    <script>
      // 注册地图
      echarts.registerMap("中国", { geoJSON: china_geojson });
      // 1.基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"), null, {
        renderer: "svg",
      });

      var data = [
        { name: "北京", value: 199 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 123 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 180 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 },
      ];



      // 2.指定图表的配置项和数据
      var option = {
        
        tooltip: {}, // 鼠标经过时会出现一个提示框
        grid: {}, 


        // 1.视觉数据映射-- 这个不是放在series中配置的,是单独拿出来和series平级的
        visualMap: [
          {
            // type: "continuous", // 连续型视觉映射组件 (默认)
            // type: "piecewise", // 分段型视觉映射组件
            left: "20%",
            seriesIndex: [0], // 指定取哪个系列的数据
            // 定义 在选中范围中 的视觉元素, 对象类型。
            inRange: {
              color: ["#04387b", "#467bc0"], // 映射组件和地图的颜色(一般和地图色相近)
            },
          },
        ],


         // PS: 这个只是可以展示地理坐标系,他想填充数据是不可以的,必须要在 series 中去填充数据的 !!!!!!!!!!!!!
        // geo: {
          //   map: '中国',
          //   // =======地图着色=========
          //   itemStyle: {
          //     areaColor: "#023677", // 地图区域的颜色。
          //     borderColor: "#1180c7", // 图形的描边颜色。
          //   },

          // 此属性是 鼠标经过高亮的时候 会显示的颜色
          //   emphasis: {
          //     itemStyle: {
          //       areaColor: "#4499d0",
          //     },
          //     label: {
          //       color: "white",
          //     },
          //   },
          //   // =======地图着色=========
          // },

        
        series: [
          {
            name: "中国地图",
            type: "map",
            map: "中国",
            data,
            // data: [
            //   { name: "广东", value: 123 },
            //   { name: "广西", value: 59 },
            //   { name: "海南", value: 14 },
            //   // ....
            //   // ...
            // ],
            itemStyle: {
              areaColor: "#023677",
              borderColor: "#1180c7",
            },
            emphasis: {
              itemStyle: { areaColor: "#4499d0" },
              label: { color: "white" },
            },
            select: {
              label: { color: "white" },
              itemStyle: { areaColor: "#4499d0" },
            },
          },
        ],
      };
      myChart.setOption(option);
    </script>
  </body>
</html>

实际截图

image.png

五.一视觉映射

image.png

六.Echarts - 中国地图-散点图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
  <script src="./geojson/china_geojson.js"></script>
  <script>
    window.onload = function() {
      // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
      echarts.registerMap('中国', { geoJSON: china_geojson })

      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        // 3.在 echarts 中展示中国地图
       geo: [
        {
          map: '中国'
        }
       ],

       // 
       series: [
        {
          name: "散点图",
          type: "effectScatter", // type:设置为effectScatter 代表他的类型是散点图

          geoIndex: 0, // geo 支持数组，默认是 0
          coordinateSystem: "geo", // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
          data: [
            {
              name: "广东",
                         [参数一: 经度, 参数二:纬度, 参数三:此点的数据]
              value: [113.280637, 23.125178, 93],
            },
            {
              name: "北京",
                         [参数一: 经度,参数二:纬度,参数三:此点的数据]
              value: [116.405285, 39.904989, 199],
            },
            // {
            //   name: "天津",
            //   value: [117.190182, 39.125596, 99],
            // },
          ],


                        
           // ====== 散点大小和着色========   
           symbolSize: function (val) {
            console.log(val)
              return val[2] / 10;  // 控制散点图的大小
           },

            itemStyle: {
              color: "green",
              shadowBlur: 10,
              shadowColor: "yellow",
            },
           // ====== 散点大小和着色========   

        }
       ]
      };
      myChart.setOption(option);
    }
  </script>
</body>
</html>

实际截图

image.png

六.一最终方案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <script src="../libs/echarts-5.3.3.js"></script>
    <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
    <script src="./geojson/china_geojson.js"></script>
    <script>
      window.onload = function () {
        let mapName = "中国";
        // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
        echarts.registerMap(mapName, { geoJSON: china_geojson });

        let myChart = echarts.init(document.getElementById("main"));

        var data = [
          { name: "北京", value: 199 },
          { name: "天津", value: 42 },
          { name: "河北", value: 102 },
          { name: "山西", value: 81 },
          { name: "内蒙古", value: 47 },
          { name: "辽宁", value: 67 },
          { name: "吉林", value: 82 },
          { name: "黑龙江", value: 123 },
          { name: "上海", value: 154 },
          { name: "江苏", value: 102 },
          { name: "浙江", value: 114 },
          { name: "安徽", value: 109 },
          { name: "福建", value: 116 },
          { name: "江西", value: 91 },
          { name: "山东", value: 119 },
          { name: "河南", value: 137 },
          { name: "湖北", value: 116 },
          { name: "湖南", value: 114 },
          { name: "重庆", value: 101 },
          { name: "四川", value: 125 },
          { name: "贵州", value: 62 },
          { name: "云南", value: 83 },
          { name: "西藏", value: 9 },
          { name: "陕西", value: 80 },
          { name: "甘肃", value: 56 },
          { name: "青海", value: 10 },
          { name: "宁夏", value: 18 },
          { name: "新疆", value: 120 },
          { name: "广东", value: 193 },
          { name: "广西", value: 59 },
          { name: "海南", value: 14 },
        ];

        var geoCoordMap = {};
        /*获取地图数据*/
        myChart.showLoading();
        // console.log(echarts.getMap(mapName));

        // 1.先拿到地图的 geo json 对象
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        mapFeatures.forEach(function (v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp;
        });
        myChart.hideLoading();
        console.log("data=>", data);
        console.log("geoCoordMap=>", geoCoordMap);

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: [...geoCoord, data[i].value],
              });
            }
          }
          console.log("res=>", res);
          return res;
        };

        // 2.指定图表的配置项和数据
        var option = {
          tooltip: {}, // 提示框

          // visualMap: {  // 视觉映射组件
          //   left: "20%",
          //   seriesIndex: [0],
          //   inRange: {
          //     color: ["#04387b", "#467bc0"], // 蓝绿
          //   },
          // },

          geo: {
            // 注册一个地理坐标系组件( 给散点图用 )
            map: "中国",
            roam: false,
            label: { show: false },
            aspectScale: 0.75, // 缩放地图
            itemStyle: {
              areaColor: "#023677",
              borderColor: "#1180c7",
            },
            emphasis: {
              itemStyle: { areaColor: "#4499d0" },
              label: { color: "white" },
            },
          },
          series: [
            {
              name: "中国地图",
              type: "map",
              map: "中国",
              data, // 给地图填充数据

              // 地图样式
              itemStyle: {
                areaColor: "#023677",
                borderColor: "#1180c7",
              },
              emphasis: {
                itemStyle: { areaColor: "#4499d0" },
                label: { color: "white" },
              },
              select: {
                label: { color: "white" },
                itemStyle: { areaColor: "#4499d0" },
              },
              // 地图样式
            },

            {
              name: "散点图充电桩",
              type: "effectScatter",

              // 散点图使用的坐标系: geo定义的坐标系组件
              geoIndex: 0,
              coordinateSystem: "geo", // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。

              data: convertData(data),

              symbolSize: function (val) {
                return val[2] / 10;
              },

              itemStyle: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
              },
              tooltip: {
                show: true,
                trigger: "item",
                formatter: function (params) {
                  console.log(params);
                  var data = params.data;
                  return `${params.seriesName} <div style="margin:5px 0px;"/> ${data.name} ${data.value[2]}`;
                },
              },
            },
          ],
        };

        myChart.setOption(option);
      };
    </script>
  </body>
</html>

实际截图

image.png

七.Echarts 常见API:

一. Echarts 常见 API
1.  全局 echarts 对象，在 script 标签引入 echarts.js 文件后获得，或者在 AMD 环境中通过 require('echarts') 获得。
     -- echarts. init( dom， theme， opts )：创建echartsInstance实例
     -- echarts. registerMap( mapName， opts )：注册地图
     -- echarts. getMap( mapName )：获取已注册地图

2. 通过 echarts.init 创建的实例（echartsInstance）
    -- echartsInstance. setOption(opts)：设置图表实例的配置项以及数据，万能接口。
    -- echartsInstance. getWidth()、 echartsInstance. getHeight()：获取 ECharts 实例容器的宽高度。
    -- echartsInstance. resize(opts)：改变图表尺寸，在容器大小发生改变时需要手动调用。
    -- echartsInstance. showLoading()、 echartsInstance. hideLoading()：显示和隐藏加载动画效果
    -- echartsInstance. dispatchAction( )：触发图表行为，例如：图例开关、显示提示框showTip等
    -- echartsInstance. dispose：销毁实例，销毁后实例无法再被使用
    -- echartsInstance. on()：通过 on 方法添加事件处理函数，该文档描述了所有 ECharts 的事件列表。

八. 响应式 Echarts 图表

1. 响应式图片的实现步骤：
     -- 图表只设置高度，宽度设置为100% 或 不设置。
     -- 监听窗口的resize事件，即监听窗口尺寸的变化（需节流）。
     -- 当窗口大小改变时，然后调用 echartsInstance.resize 改变图表的大小

PS: 在容器节点被销毁时，可以调用 echartsInstance.dispose 以销毁echarts的实例释放资源，避免内存泄漏。

image.png

八.一响应式图表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <script>
    window.onload = function() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        backgroundColor: 'rgba(255, 0, 0, 0.1)',
        grid: {
          show: true,
          backgroundColor: 'rgba(0, 255, 0, 0.1)',
        },
        

        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);

      // 1.响应式图表
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  </script>
</body>
</html>

PS: 这个宽度是不可以给固定的宽度的, 但是可以设置宽度为 width: 100% 这样也是可以实现响应式的,
       千万不能给width: 200 px; 这种是实现不了响应式的

image.png

八.二需求: 实现tootip鼠标经过的时候自动轮播提示框 (自动触发Action实现提示框轮播)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <script>
    window.onload = function() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        backgroundColor: 'rgba(255, 0, 0, 0.1)',
        grid: {
          show: true,
          backgroundColor: 'rgba(0, 255, 0, 0.1)',
        },
        
        tooltip: {
          position: 'top', // top
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);

      // 1.实现提示框轮播的功能
      setInterval(function () {
        autoToolTip();
      }, 1000);

      let index = 0; // 0-5
      
      function autoToolTip() {
        index++;
        if (index > 5) {
          index = 0;
        }
        // 1.显示提示框
        myChart.dispatchAction({
          type: "showTip", // 触发的action type
          seriesIndex: 0, // 系列的 索引
          dataIndex: index,// 数据项的 索引
          position: "top", // top
        });
      }
    }
  </script>
</body>
</html>

实际截图

image.png

八.三当点击地图的时候比如点击广东要单独的把广东省这个模块显示出来,该如何做呢?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <button onclick="back()"> 返回 > 中国地图</button>
  <div id="main" style="height: 400px"></div>
  <script src="../libs/echarts-5.3.3.js"></script>
  <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
   // 引入中国地图
  <script src="./geojson/china_geojson.js"></script>
  // 我这里只做了一个广东省的单独显示出来的效果,如果你想点击全国地图,每个省份都显示单独的模块的话,就要把每个省份的地图都要引入进来 
  <script src="./geojson/guangdong_geojson.js"></script>

  <script>
    let myChart = null
    let option = {}
    window.onload = function() {
      // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
      echarts.registerMap('中国', { geoJSON: china_geojson })

       myChart = echarts.init(document.getElementById('main'));
       option = {
        // 3.在 echarts 中展示中国地图
        series: [
          {
            type: 'map', // 系列图是 地图
            map: '中国', // 展示中国地图( 因为只注册一个中国地图 )
            roam: true
          }
        ]
      };
      myChart.setOption(option);


      // 1.地图下钻的功能
      myChart.on('click', function(event) {
        // console.log(event)
        // event.name == 广东
        if(event.name === '广东'){
          if(!echarts.getMap(event.name)){ // echarts.getMap(event.name): 当这个为空的时候走的判断逻辑,去注册地图
            console.log('注册地图')
            echarts.registerMap(event.name, { geoJSON: guangdong_geojson})
          }
          option.series[0].map = event.name // 将中国地图切换为广东地图
          myChart.setOption(option)
        }
      })
    }
    // 返回中国地图
    function back() {
      option.series[0].map ='中国' 
      myChart.setOption(option)
    }
    
  </script>
</body>
</html>

实际截图

image.png

Echarts-详细配置-功能升级-地图 (七)
一. Echarts 地图的展示和绘制的基本使用需求:如果我只想在某个省份或者某个市区需要展示数据 ...
MUI地图（添加标注、设置折线）
简述：MUI地图提供很方便的接口来调取地图功能（百度、高德），要使用地图功能首先要配置SDK开启地图，配置在man...
Echarts-自带地图着色
高德地图6.8.0定位修改的修复方法
高德地图6.8.0或以上版本开启后台定位问题如果APP中使用了高德地图并且具有后台定位功能，然后在3D地图升级...
vue使用amap实现地图选点
需求在页面中实现地图选点功能（包括输入位置标记点，地图点击标记点，标记点需要有经度、纬度和详细地址）思路分析 ...
iOS11人机交互指南-视图-06：地图视图 Maps
地图视图可让用户在应用中显示地理位置信息，并支持内置 Google 地图提供的大部分功能。地图视图可以配置为显示标...
Echarts-数据可视化产品
Echarts-数据可视化产品
iOS MobShare分享、微信、支付宝支付、百度地图需要注意
1、涉及静态库 2、分享功能 3、地图功能 4、支付功能 5、需在info.plist文件中配置以下代码，描述具体...
百度地图定位，地图展示功能、大头针，多个大头针及气泡title全
百度地图定位，地图展示功能、大头针，多个大头针及气泡title展示。为了维护宇宙的和平，又鉴于网上资料的不详细，...
商品信息录入界面功能设计
一、本节功能演示二、下面为大家介绍功能实现的详细步骤： 1、配置连接字符串在项目开始前先学习了以下字符串的配置...