Echarts 绘制地图（中国、省市、区县），保姆级教程！-阿里云开发者社区

Echarts 绘制地图（中国、省市、区县），保姆级教程！

2024-06-25 19

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Echarts 绘制地图（中国、省市、区县），保姆级教程！

一. 安装 Apache Echarts

1.1 安装

npm install echarts --save

1.2 引用

这个不用在main中注册使用，直接在需要echarts的页面中引入即可。

二. 新建目录

api：用于存放获取（后端、地图JSON数据）数据的文件夹；

json：存放map的GeoJSON数据；

三. 获取地图的GeoJSON

点击DataV.地图GeoJSON数据

左侧是地图，右侧是JSON数据路径，点击你想要生成的地图省市、地级（以广西省为例）；

点进去是一级，再点进去是二级，直到你想要的省市地区（点击旁边的空白可以返回上一级）；

然后其右侧有JSON数据的链接地址，可以选择下载下来（放在json文件夹中），也可以使用在线地址！（json API与geoJSON数据地址均可用）

四. 配置api

使用axios获取数据（使用在线链接）：

代码不难，我就不解释了

五. 配置地图信息

数据都准备好了，我们开始绘制地图：

5.1 引入 Echarts、广西地图数据

import * as echarts from 'echarts';

import getGuangXiMap from './api/getGuangXiMap';

5.2 准备容器：（使用div、canvas均可）

<div style="width:800px;height:600px" ref="chartsDOM"></div>

解释一下： 1. 需要先指定宽高；2. ref标记是为了应和vue获取dom的方式。

5.3 绘制地图

vue在mounted时才能获取到页面DOM，故而地图写在mounted中：

 mounted() {
    // 初始化统计图对象
    var myChart = echarts.init(this.$refs["chartsDOM"]);
    // 显示 loading 动画
    myChart.showLoading();
    // 再得到数据的基础上，进行地图绘制
    getGuangXiMap.then(res => {
      // 得到结果后，关闭动画
      myChart.hideLoading();
      // 注册地图(数据放在axios返回对象的data中哦)
      echarts.registerMap('GX', res.data);
      var option = {
        series: [
          {
            name: '广西地图',
            type: 'map',
            map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true
            }
          }
        ]
      };
      myChart.setOption(option);
    })
  }
}

5.4 即可得到广西的地图啦

六. Apache Echarts配置项

大家有可能看过apache echarts 的地图配置项，非常多，只是为了实现其他的效果，可以参考配置项手册；后期我会推出【配置式统计图工具】，就是不用大家查阅配置手册啦，通过按钮点击、选择，即可得到你想要的效果，望大家 持续关注 呀。

6.1 配置数据项

现在大家还是通过查阅配置项手册完善地图信息，下面简单演示一下其他效果：

6.1.1 配置数据

var option = {
        series: [
          {
            name: '广西地图',
            type: 'map',
            map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true
            },
            data: [
              { name: '南宁市', value: 12001 },
              { name: '崇左市', value: 12001 },
              { name: '柳州市', value: 12001 },
              { name: '来宾市', value: 12001 },
              { name: '桂林市', value: 12001 },
              { name: '梧州市', value: 12001 },
              { name: '贺州市', value: 12001 },
              { name: '玉林市', value: 12001 },
              { name: '贵港市', value: 12001 },
              { name: '百色市', value: 12001 },
              { name: '钦州市', value: 12001 },
              { name: '河池市', value: 12001 },
              { name: '北海市', value: 12001 },
              { name: '防城港市', value: 12001 },
            ]
          },
        ]
      };

6.1.2 配置提示框

var option = {
        tooltip: {},// 配置提示框，有这个配置项即可
        series: [
          {
            name: '广西地图',
            type: 'map',
            map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true
            },
            data: [
              { name: '南宁市', value: 12001 },
              { name: '崇左市', value: 12001 },
              { name: '柳州市', value: 12001 },
              { name: '来宾市', value: 12001 },
              { name: '桂林市', value: 12001 },
              { name: '梧州市', value: 12001 },
              { name: '贺州市', value: 12001 },
              { name: '玉林市', value: 12001 },
              { name: '贵港市', value: 12001 },
              { name: '百色市', value: 12001 },
              { name: '钦州市', value: 12001 },
              { name: '河池市', value: 12001 },
              { name: '北海市', value: 12001 },
              { name: '防城港市', value: 12001 },
            ]
          },
        ]
      };

6.1.3 加标题

var option = {
        title:{
            text:'广西GDP统计图(/万元)'
        },
        tooltip: {},// 配置提示框，有这个配置项即可
        series: [
          {
            name: '广西地图',
            type: 'map',
            map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true
            },
            data: [
              { name: '南宁市', value: 12001 },
              { name: '崇左市', value: 12001 },
              { name: '柳州市', value: 12001 },
              { name: '来宾市', value: 12001 },
              { name: '桂林市', value: 12001 },
              { name: '梧州市', value: 12001 },
              { name: '贺州市', value: 12001 },
              { name: '玉林市', value: 12001 },
              { name: '贵港市', value: 12001 },
              { name: '百色市', value: 12001 },
              { name: '钦州市', value: 12001 },
              { name: '河池市', value: 12001 },
              { name: '北海市', value: 12001 },
              { name: '防城港市', value: 12001 },
            ]
          },
        ]
      };

6.1.4 根据数据配置不同显示颜色

Apache Echarts 配置项手册-visualMap

详情参考上链接（颜色能否区分，取决于数据的差距程度）

实现如上。

完整代码如下：

 mounted() {
    // 初始化统计图对象
    var myChart = echarts.init(this.$refs["chartsDOM"]);
    // 显示 loading 动画
    myChart.showLoading();
    // 再得到数据的基础上，进行地图绘制
    getGuangXiMap.then(res => {
      // 得到结果后，关闭动画
      myChart.hideLoading();
      // 注册地图(数据放在axios返回对象的data中哦)
      echarts.registerMap('GX', res.data);
      var option = {
        visualMap: {
          min: 1111,
          max: 333332,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        title: {
          text: '广西GDP统计图(/万元)'
        },
        tooltip: {},
        series: [
          {
            name: '广西地图',
            type: 'map',
            map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true
            },
            data: [
              { name: '南宁市', value: 11111 },
              { name: '崇左市', value: 22221 },
              { name: '柳州市', value: 33333 },
              { name: '来宾市', value: 22231 },
              { name: '桂林市', value: 44441 },
              { name: '梧州市', value: 555525 },
              { name: '贺州市', value: 162475 },
              { name: '玉林市', value: 65454 },
              { name: '贵港市', value: 77771 },
              { name: '百色市', value: 88884 },
              { name: '钦州市', value: 99995 },
              { name: '河池市', value: 10001 },
              { name: '北海市', value: 122222 },
              { name: '防城港市', value: 333332 },
            ]
          },
        ]
      };
      myChart.setOption(option);
    })
  }

七. 绘制中国地图

步骤同上，演示一下效果：

（修改请求json路径）

mounted() {
    // 初始化统计图对象
    var myChart = echarts.init(this.$refs["chartsDOM"]);
    // 显示 loading 动画
    myChart.showLoading();
    // 再得到数据的基础上，进行地图绘制
    getChinaMap.then(res => {
      // 得到结果后，关闭动画
      myChart.hideLoading();
      // 注册地图(数据放在axios返回对象的data中哦)
      echarts.registerMap('China', res.data);
      var option = {
        series: [
          {
            name: '中国地图',
            type: 'map',
            map: 'China',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
            label: {
              show: true
            },
          },
        ]
      };
      myChart.setOption(option);
    })
  }

八. 绘制县级地图

步骤同上，就不在赘述了~

以柳城县为例，效果如下：

好了，本文就到这里吧，点个关注再走嘛~