vue3 数据可视化大屏 项目开发时，需要实现3d地图效果，这里我们使用echarts和echarts-gl来实现地图。

安装依赖

使用echarts实现3d地图，我们需要安装依赖，echarts和echarts-gl的版本是一一对应的，版本差别很大可能会报错，这里我们使用的是echarts 5.2.0和 echarts-gl 2.0.8

"echarts": "^5.2.0",
"echarts-gl": "^2.0.8",

窗口适配代码

监听窗口变化，重绘echarts地图

var that = this;
const viewElem = document.body;
// 监听窗口变化,重绘echarts
const resizeObserver = new ResizeObserver(() => {
  setTimeout(() => {
    that.drawEcharts();
  }, 300)
});
resizeObserver.observe(viewElem);

完整实例代码

<template>
  <div class="item1">
    <div class="centerMap" ref="centerMap">
    </div>
  </div>
</template>

<script>

import data from '../assets/data.json'
import * as echarts from "echarts"
import 'echarts-gl'

export default {
  name: "item1",
  data() {
    return {
      data,
      list: []
    }
  },
  components: {},
  watch: {},
  mounted() {
    var that = this;
    const viewElem = document.body;
    // 监听窗口变化,重绘echarts
    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        that.drawEcharts();
      }, 300)
    });
    resizeObserver.observe(viewElem);
  },

  methods: {
    drawEcharts() {
      var that = this;
      var chartDom = that.$refs.centerMap;
      var myChart = echarts.init(chartDom);
      myChart.clear()
      myChart.resize()
      var nameMap = '地图数据';
      // 图标数据
      echarts.registerMap(nameMap, this.data);
      var optionMap = {
        geo3D: {
          map: nameMap,
          roam: true,
          itemStyle: {
            areaColor: '#6089d1',
            color: '#6089d1',
            opacity: 1,
            borderWidth: 0.8,
            borderColor: '#a9dbff'
          },
          label: {
            show: false,
            textStyle: {
              color: '#fff', //地图初始化区域字体颜色
              fontSize: 16,
              opacity: 1,
            },
          },
        },
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(optionMap);
    }
  },
}
</script>

<style lang="scss" scoped>
.item1 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.map {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin: 0 auto;
  position: absolute;
  z-index: 0;

  img {
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
}

.centerMap {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  top: 0;
}
</style>

更多echarts 3d地图

vue3 echarts-gl 3d地图实例汇总