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

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

2024-06-25 6270

版权

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

简介： 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);
    })
  }

八. 绘制县级地图

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

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

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

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

一. 安装 Apache Echarts

1.1 安装

1.2 引用

二. 新建目录

三. 获取地图的GeoJSON

四. 配置api

五. 配置地图信息

5.1 引入 Echarts、广西地图数据

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

5.3 绘制地图

5.4 即可得到广西的地图啦

六. Apache Echarts配置项

6.1 配置数据项

6.1.1 配置数据

6.1.2 配置提示框

6.1.3 加标题

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

七. 绘制中国地图

八. 绘制县级地图

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一. 安装 Apache Echarts

1.1 安装

1.2 引用

二. 新建目录

三. 获取地图的GeoJSON

四. 配置api

五. 配置地图信息

5.1 引入 Echarts、广西地图数据

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

5.3 绘制地图

5.4 即可得到广西的地图啦

六. Apache Echarts配置项

6.1 配置数据项

6.1.1 配置数据

6.1.2 配置提示框

6.1.3 加标题

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

七. 绘制中国地图

八. 绘制县级地图

热门文章

最新文章

相关电子书