首页 > 其他分享> > echarts矢量地图

echarts矢量地图

2022-06-28 08:34:19 作者：互联网

步骤

引入echarts.js,jquery，并创建图表容器、初始化echarts对象

 <script src="./lib/echarts.min.js"></script>
<script src="./lib/jquery.min.js"></script>
<style>
  .demo {
    width: 400px;
    height: 300px;
    background-color: pink;
  }
</style>
<div class="demo"></div>
<script>
  const myChart = echarts.init(document.querySelector(".demo"));
</script>

使用jquery发送ajax请求获取地图的json文件数据

矢量地图数据参考地址：http://datav.aliyun.com/portal/school/atlas/area_selector

代码：

 $.getJSON(
        "https://geo.datav.aliyun.com/areas_v3/bound/220000_full.json",
        (res) => {
          console.log(res);
          
        }
      );

往echarts全局对象上注册地图矢量的数据，并在实例化的echarts对象中设置geo

 $.getJSON(
        "https://geo.datav.aliyun.com/areas_v3/bound/220000_full.json",
        (res) => {
          echarts.registerMap("chinaMap", res);
          myChart.setOption({
            geo: {
              type: "map",
              map: "chinaMap",     // 注意：此处使用的字符串必须和上面"echarts.registerMap"注册时传递的第一个参数名保持一致
            },
          });
        }
      );

完整代码

<!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>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
    <style>
      .demo {
        width: 400px;
        height: 300px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="demo"></div>
    <script>
      const myChart = echarts.init(document.querySelector(".demo"));
      $.getJSON(
        "https://geo.datav.aliyun.com/areas_v3/bound/220000_full.json",
        (res) => {
          echarts.registerMap("chinaMap", res);
          myChart.setOption({
            geo: {
              type: "map",
              map: "chinaMap",
            },
          });
        }
      );
    </script>
  </body>
</html>

效果图

标签：res,矢量,地图,json,aliyun,demo,geo,echarts
来源： https://www.cnblogs.com/it774274680/p/16418194.html