vue 数据可视化大屏 项目开发中，设计师设计的地图很漂亮，但是前端实现不了这种效果，这时候我们可以通过一个折中的办法来实现这种效果，以图片做地图以echarts做数据支持完成我们想要的效果。

入场动画

实现效果

echarts 自定义label内容，label使用自定义图片，我们通过scatter来实现。

点击地图显示弹窗：首先写一个自定义弹窗效果，然后当鼠标点击地图时，获取当前x轴y轴位置，显示弹窗位置。

默认显示一个弹窗：首先指定这个位置的经纬度，然后通过myChart.convertToPixel来将经纬度转为x轴y轴坐标，达到指定弹窗位置的效果。

组件代码

<template>
  <div class="item1" ref="item1" :style="{width:width?width+'px':'100%',height:height?height+'px':'100%'}">
    <div class="mapPopWin" ref="mapPopWin" v-if="popShow"
         :style="{left:left-(popWidth/2)+'px',top:top-(popHeight/2)+'px'}">
      <img class="close" @click="popShow=false" src="../assets/close.png" alt="">
      <h3>{{ address }}</h3>
      <div class="info2">
        <p>电站数：368</p>
        <p>总发电量：16516</p>
      </div>
    </div>
    <div class="centerMap" :style="{width:width+'px',height:height+'px'}" id="centerMap">

    </div>
    <div class="map">
      <img ref="img" src="../assets/centerMap.png" alt="">
    </div>
  </div>
</template>

地图图片效果2

地图效果3

更新日志

2024年02月18日

增加readme说明

地图图片效果2地图label center微调让地图名称在对应的区域中心。

2024年01月31日

增加地图效果

2023年12月08日

删除用不到的组件和图片资源

2023年10月24日

使用gsap增加入场动画

2023年10月08日

删除多余无用依赖

更多中国地图效果

中国地图geoJson渲染效果实例

其他地区类似效果

echarts宁波市地图自定义底图高亮切换效果

完整实例代码下载

当前完整演示实例代码下载

项目基于Vue3 vite js实现