VUE echart绘制地图（伪3D）

这里以宝鸡地图为示例，其他地图只需更换地图JSON（地图JSON获取通过阿里的datav，地址：阿里云地图获取工具）和data数值即可。
效果图如下：

首先我们需要创建一个div来盛放地图，这里的div必须给出对应的宽和高，不然地图无法显示！

template 部分可以参考以下代码：

<template>
<div id="map" style="width: auto;height: 730px;"></div>
</template>复制

js部分可以参考以下代码：

import * as echarts from "echarts";
import BaoJi from "../static/json/baoji.json"
export default {
  name: "map_1",
  mounted() {
    this.map()
  },
  methods: {
    map() {
      const myChart = echarts.init(document.getElementById('map'));
      let option = null;
      const data1 = [
        { name: '陈仓区', value: 45},
        { name: '金台区', value: 0},
        { name: '凤翔区', value: 63 },
        { name: '岐山县', value: 16 },
        { name: '陇县', value: 69 },
        { name: '千阳县', value: 36 },
        { name: '麟游县', value: 46 },
        { name: '扶风县', value: 51 },
        { name: '渭滨区', value: 68 },
        { name: '凤县', value: 42 },
        { name: '太白县', value: 12 },
        { name: '眉县', value: 60 },
      ];
      echarts.registerMap('baoji', BaoJi);
      option = {
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          inRange: {
            color: ['#66a6fa','#0E1E40'],
          },
        },
        tooltip: {
          borderWidth: '1',
          borderColor: 'rgba(255,255,255,0.3)',
          formatter: '{b0}: {c0}', //地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）
          textStyle: { fontSize: '16px', color: '#4d89f8', fontFamily: 'Arial' },
          show: false,
        },
        title: {
          show: true,
          x: 'center',
          y: 'top',
          text: '宝鸡市行政区域图',
          textStyle: {
            color: '#2980b9',
            fontSize: 18,
          },
        },
        series: [
          {
            type: 'map',
            map: 'baoji',
            zoom: 1.5, // 默认显示级别
            layoutCenter: ['50%', '50%'], // 定义地图中心在屏幕中的位置
            layoutSize: '100%', // 相对于屏幕宽高的百分比
            data: data1,
            roam: 'scale', // 缩放'scale'或者平移'move'
            aspectScale: 1.5, // scale 地图的长宽比
            itemStyle: {
              normal: {
                // 静态的时候展示样式
                areaColor: '#013C62',
                shadowColor: '#013C62',
                shadowBlur: 20,
                shadowOffsetX: -5,
                shadowOffsetY: 15,
              },
              emphasis: {
                areaColor: "#f58220"    //选中区域的背景色
              },
            },
            label: {
              normal: {
                //静态的时候展示样式
                show: true, //是否显示地图省份得名称
                //  formatter: '{c0}\n{b0}',
                textStyle: {
                  color: '#dedee7', // 区域文字 颜色
                  fontSize: 15,
                  fontFamily: 'Arial',
                },
              },
              emphasis: {
                //动态展示的样式
                color: '#faf4f4', //选中区域的字体颜色
                show: true,
                textStyle:{
                  fontSize: 18,
                  fontFamily: 'Arial',
                }
              },
            },
            // 选中状态下的多边形和标签样式
            select: {
              itemStyle: {
                areaColor: "#f58220"    //选中区域的背景色
              },
              label: {
                show: true,
                color: '#308cd9',
              },
            },
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  }
}复制

其中import BaoJi from "../static/json/baoji.json"表示将名称为baoji.json的宝鸡地图json数据导入改vue界面，并以BaoJi表示。
地图数据json可以根据自己的项目需求去修改，无固定要求！