ECharts怎样显示中国地图

最新推荐文章于 2024-04-16 16:13:37 发布

不想再做小白！

最新推荐文章于 2024-04-16 16:13:37 发布

阅读量1.3k

点赞数 4

分类专栏： ECharts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_59390994/article/details/122255043

版权

ECharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、首先需要准备一个HTML和一个地图的json文件。

HTML文件自己新建一个即可。

地图的json文件可以去阿里云下载。

下载地址：阿里云 DataV - 数据可视化平台

进入这个网页之后，选择自己需要的地图。然后在右边下载json文件。

2、HTML中需要引入jQuery和ECharts

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

3、想要地图显示，就需要盛放地图的盒子，进行初始化。

<div id="main" style="width: 1000px; height: 1000px"></div>

<script type="text/javascript">
   var myChart = echarts.init(document.getElementById("main"));
</script>

4、最后就需要读取json文件，将地图显示出来

$get()可以解析json文件

5、查看全部代码

<!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>中国地图</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 1000px; height: 1000px"></div>
    
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById("main"));

      //各省份的地图json文件
      var provinces = [];

      //初始化全国地图
      loadMap("./china.json", "china");

      function loadMap(mapCode, name) {
        $.get(mapCode, function (data) {
          //使用 HTTP GET 请求从服务器加载数据
          echarts.registerMap(name, data); //注册可用地图
          var option = {
            series: [
              {
                name: "MAP",
                type: "map",
                mapType: name,
                selectedMode: false, //是否允许选中多个区域
                data: provinces,
              },
            ],
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        });
      }
    </script>
  </body>
</html>