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

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

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

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

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

1. 用样式标记出位置，:style 实现
2. 通过相同name，将默认位置数据与后端返回的数据 聚合在一起，concatLocate()
3. 完成效果后考虑加上小动画(圆圈荡漾) 动画 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 }}