Vue 使用 Apache Echarts 绘制地图

前言：

大家好啊，今天给大家带来的是Echarts 绘制地图的使用方法，会详细的说明地图的绘制，以及地图的引入，及地图的一些设置选项，下边是地图资源的绘制地址。

DataV.GeoAtlas地理小工具

有需要Echarts 绘制3d地图、水波纹及插入图标的点这里

有需要解决Echarts地图省级下钻市级散点图偏移塌陷问题的点这里

一、配置Vue项目

这个就不多说了。

二、安装Apache ECharts

2.1 安装Apache ECharts

npm install echarts --save

或者

yarn add echarts

2.2 引入Apache ECharts
在main.js中引入echarts

// 引入echarts
import *as echarts from 'echarts'
Vue.prototype.$echarts = echarts

也可以在使用的页面引入都可以

三、创建目录

map: 用于存放地图资源的GeoJSON数据文件

四、获取地图的GeoJSON

GeoJSON获取地址


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

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

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

五、配置地图信息

5.1、 引入 Echarts、郑州地图数据

import * as echarts from "echarts";
import ZhengZhouMap from "@/assets/map/ZhengZhouMap.json";

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

 <div style="width: 700px; height: 500px" ref="chartsDOM"></div>

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

5.3、绘制地图
废话不多说直接上代码

<template>
  <div>
    <div style="width: 700px; height: 500px" ref="chartsDOM"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import ZhengZhouMap from "@/assets/map/ZhengZhouMap.json";
export default {
  name: "ZhengZhouMapView",
  data() {
    return {};
  },
  mounted() {
    this.initCharts();
    // // 初始化统计图对象
  },
  methods: {
    initCharts() {
      var myChart = echarts.init(this.$refs["chartsDOM"]);
      var option = {
        series: [
          {
            name: "郑州地图",
            type: "map",
            map: "ZhengZhouMap", // 这个是上面注册时的名字哦，ZhengZhouMap（'这个名字保持一致'）
            label: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#031525",  //更改地图各个区域的颜色背景
                borderColor: "#93eaf8",//更改地图各个区域之间边框的颜色
              },
              emphasis: {
                areaColor: "#77e8e4",//更改鼠标选中区域地图上的颜色
              },
            },
            select: {
              // 地图选中区域样式
              label: {
                // 选中区域的label(文字)样式
                color: "#000000",
              },
              itemStyle: {
                // 选中区域的默认样式
                areaColor: "#77e8e4",
              },
            },
          },
        ],
      };
      // 注册地图
      echarts.registerMap("ZhengZhouMap", ZhengZhouMap);
      myChart.setOption(option);
      //点击事件,获取点击城市详细信息
      myChart.on("click", function (params) {
        console.log(params);
      });
    },
  },
};
</script>

六、这样就可以得到一个郑州市的地图了（想要什么地图取决于下载什么地图文件）

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

此文章写作时受别的博客启发写的原文出处。