Vue3整合Echarts绘制地图

1. 绘制地图使用的相关网站

DataV.GeoAtlas地理小工具系列

2. Vue3项目的创建

2.1 Vue3项目创建的过程不再赘述，如果不会创建的小伙伴，请查看我之前的文章

Vue3 安装与配置 详细教程-CSDN博客

2.2 安装 Echarts 

2.2.1 进入到项目根目录下执行：npm install echarts

2.3 安装 axios 网络请求库（为了获取地图的网络数据）

2.3.1 npm install axios

3. Echarts绘制地图

3.1 项目src目录下创建api文件夹（用来存储获取地图数据的请求API）

3.2 项目src目录下创建json文件夹（用来存储地图相关的json格式数据）

3.3 获取地图的的相关数据，登录

3.3.1 左边是地图，右边显示的是左边选择区域的数据，如：JSON:API 等， 其右侧有JSON数据的链接地址，可以选择下载下来，也可以使用在线地址。

3.3.2 如左边选择河北省，右边会出来河北省对应的数据，如下图所示

3.4 在api目录下创建getChineseMap.js 文件（获取中国地图的数据）

3.4.1 内容为

import axios from 'axios'
export default axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')

4. Echart地图配置

4.1 清空App.vue中多余的代码，只保留vue结构代码

<template>

</template>

<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>

</style>

4.2 在对应的vue文件中，引入Echarts及对应的地图数据

import * as echarts from 'echarts';
import getChineseMap from './api/getChineseMap';

4.3 准备绘制地图的容器

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

  注意：容器需要提前设置其宽/高， ref标记是为了对应vue获取dom的节点

4.4 绘制地图

4.4.1 地图在加载页面的时候，就应该将数据加载进去，在vue中使用mounted函数进行数据的预先加载

4.4.2 整个页面代码如下：

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

<script>
import * as echarts from 'echarts';
import getChineseMap from './api/getChineseMap';
import { onMounted } from 'vue';

export default {
  name: 'App',
  mounted: function(){
    // 初始化统计图对象
    var mapChart = echarts.init(this.$refs["chartsDOM"]);
    // 显示 loading 动画
    mapChart.showLoading();
    // 获取数据并进行地图绘制
    getChineseMap.then(res => {
      // 关闭动画
      mapChart.hideLoading();
      // 注册地图数据
      echarts.registerMap('Chinese', res.data);
      var option = {
        series: [
          {
            name: '中国地图',
            type: 'map',
            map: 'Chinese',// 此处map的内容与echarts.registerMap中自定义的名字一直
            label: {
              show: true
            }
          }
        ]
      };
      mapChart.setOption(option);
    })
  }
  
}



</script>

<style>

</style>

4.5 启动项目，并访问项目

至此中国地图绘制完成，如果打算绘制其他省份的地图，只需要将地图获取json数据地址进行修改即可

5. 地图颜色配置

5.1 根据每个区域的数据，可以设置每个区域的显示颜色

5.2 具体代码如下

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

<script>
import * as echarts from 'echarts';
import getChineseMap from './api/getChineseMap';
import { onMounted } from 'vue';

export default {
  name: 'App',
  mounted: function(){
    // 初始化统计图对象
    var mapChart = echarts.init(this.$refs["chartsDOM"]);
    // 显示 loading 动画
    mapChart.showLoading();
    // 获取数据并进行地图绘制
    getChineseMap.then(res => {
      // 关闭动画
      mapChart.hideLoading();
      // 注册地图数据
      echarts.registerMap('Chinese', res.data);
      var option = {
        //-地图配置属性
        visualMap:{
          min: 10,
          max: 100,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        title: {
          text: '全国XXX质量的清空统计'
        },
        series: [
          {
            name: '中国地图',
            type: 'map',
            map: 'Chinese',// 此处map的内容与echarts.registerMap中自定义的名字一直
            label: {
              show: true
            },
            data: [
            { name: '河北省', value: 30 },
            { name: '河南省', value: 50 },
            { name: '陕西省', value: 30 },
            { name: '江西省', value: 70 },
            { name: '浙江省', value: 90 },
            { name: '云南省', value: 80 },
            { name: '青海省', value: 60 },
            { name: '内蒙古自治区', value: 5 },
            ]
          },
        ]
      };
      mapChart.setOption(option);
    })
  }
}
</script>

<style>

</style>

5.3 运行结果图

更多Echarts配置信息，请查看Echarts官网：Apache ECharts 

Echarts 地图 配置手册，请查看：Documentation - Apache ECharts