Vue 世界地图七大洲mark标记效果

最新推荐文章于 2025-05-04 22:47:28 发布

原创

最新推荐文章于 2025-05-04 22:47:28 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#世界七大洲地图

本文展示了如何在Vue项目中，利用SVG图片和后台动态数据，实现世界地图上七大洲的标记效果，并添加了小动画，具体包括设计稿、ECharts插件尝试及最终的前端实现方案。

设计稿如下：（世界地图七大洲xx分布）

在这里插入图片描述

用echart插件实现效果如下：（`差别很大`），需要换思路

在这里插入图片描述

最终前端实现效果：（svg图片 + 数据 + 标记 + 小动画）

在这里插入图片描述
最终使用由设计提供的svg图片（普通png,jpg也可以）实现，后台动态数据接入

用样式标记出位置，:style 实现
通过相同name，将默认位置数据与后端返回的数据聚合在一起，concatLocate()
完成效果后考虑加上小动画(圆圈荡漾) 动画 ripple

<template>
  <div class="worldBox">
    <div class="mapBox">
      <img src="@/assets/img/map.svg" alt="" width="100%" height="auto" />
      <div
        v-for="(item, index) in worldData"
        :key="index"
        class="markBox"
        :style="{
      
       left: item.left + 'px', top: item.top + 'px' }"
      >
        <i class="circleRipple"></i>
        <i class="el-icon-location"></i>
        <p>{
  
  { item.name }}: {
  
  { item.count }}</p>
      </div>
    </div>

    <div class="barBox">
      <p v-for="(item, index) in worldData" :key="index">
        <span>{
  
  { item.count }}</span>
        <span>{