vue2 + echarts 3D贵州 地图

<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script>
import * as echarts from 'echarts';
// 若需使用贵州地图，需单独引入地图JSON（需提前准备或通过ECharts官方获取）
// import 'echarts/map/js/province/guizhou.js'; 

export default {
  name: 'Geo3DMap',
  data() {
    return {
      chart: null,
      // ECharts 配置项（包含标签始终显示和悬停样式）
      option: {
        geo3D: {
          map: "guizhou",
          roam: true, // 允许鼠标缩放平移（若需禁止设为 false）
          zoom: 0.1,
          silent: false,
          itemStyle: {
            color: "#38CFE5",
            borderWidth: 1,
            borderColor: "#fff",
          },
          viewControl: {
            distance: 110,
            azimuth: 0,
            elevation: 45,
            autoRotate: false,
            autoRotateSpeed: 5,
            minDistance: 50,
            maxDistance: 120,
            zoomSensitivity: 0.5,
          },
        },
        series: [
          {
            type: "geo3D",
            map: "guizhou",
            coordinateSystem: "geo3D",
            label: {
              show: true, // 始终显示标签
              color: "#333", // 默认标签颜色
              fontSize: 12, // 标签字体大小
              // 可选：调整标签位置（如 'top'、'inside' 等）
              position: 'top'
            },
            emphasis: {
              label: {
                color: "#fff", // 悬停时标签颜色变白
                fontSize: 14 // 可选：悬停时字体放大
              },
              itemStyle: {
                color: "#2A9FD6" // 可选：悬停时地图区域颜色变化
              }
            }
          }
        ]
      }
    };
  },
  mounted() {
    // 初始化图表
    this.initChart();
  },
  methods: {
    initChart() {
      // 获取图表容器DOM
      const chartDom = this.$refs.chartRef;
      // 初始化ECharts实例
      this.chart = echarts.init(chartDom);
      // 应用配置项
      this.chart.setOption(this.option);
      
      // 监听窗口 resize，自适应尺寸
      window.addEventListener('resize', () => {
        this.chart.resize();
      });
    }
  },
  beforeDestroy() {
    // 销毁图表实例，避免内存泄漏
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
    // 移除 resize 监听
    window.removeEventListener('resize', () => {
      this.chart.resize();
    });
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 600px; /* 根据需求调整高度 */
  border: 1px solid #eee;
  margin: 20px 0;
}
</style>