vue中使用css实现气泡图

html部分：

<div  id="scatter">
   <div class="bubble_min bubble10"></div>
   <div class="bubble_min bubble12"></div>
   <div class="bubble_min bubble8"></div>
   <div class="bubble_min bubble12"></div>
   <div class="bubble_min bubble8"></div>
   <ul>
     <li class="li" v-for="item,index in bubbleData" :key="index" 
      :style="{top:item.top,left:item.left,background:item.background,width:item.width+'px',height:item.width+'px',animationDuration:item.time+'s'}">
        <span :style="{width:item.width+'px'}">{{item.width>40?item.name:''}}</span>
        <span :style="{width:item.width+'px'}">{{item.width>40?item.value+'%':''}}</span>
        <div class="tip">{{item.name+':'+item.value+'%'}}</div>
     </li>
   </ul>
 </div>

js部分：

/**
     *获取n等分圆周坐标点
     *半径：r
     *圆心坐标：(ox,oy)
     */
    getPoint(r, ox, oy, n) {
      let point = [];
      var radians = (Math.PI / 180) * Math.round(360 / n);
      for (let i = 0; i < n; i++) {
        var x = ox + r * Math.sin(radians * i),
          y = oy + r * Math.cos(radians * i);
        point.unshift([Math.floor(x), Math.floor(y)]);
      }
      return point;
    },
    // 初始化气泡图
    initScatter() {
      this.bubbleData = [
        {value:56,name:'类目一'},
        {value:13,name:'类目二'},
        {value:45,name:'类目三'},
        {value:1,name:'类目四'},
        {value:69,name:'类目四'}
      ]
      let offsets;
      let colors = ["#f1a137", "#8585f8", "#68ccf7", "#95da2f", "#f8a1ac"];
	  //气泡位置，只有一个时显示在中间，较多时围成一个圆
      if (this.bubbleData.length === 1) {
        offsets = [[100, 100]];
      } else {
        offsets = this.getPoint(100, 100, 110, this.bubbleData.length);
      }
      this.bubbleData.forEach((v, i) => {
        v.top = offsets[i][0] + "px";
        v.left = offsets[i][1] + "px";
		//循环使用colors颜色列表
        v.background = colors[i % 5];
		//将类目的value作为气泡的宽度，由于value为1-20时，气泡太小不美观，因此给每个气泡增加20的宽度
        v.width = v.value + Math.ceil(v.value / (v.value + 1)) * 20;
		//气泡的动画时长
        v.time = v.value>50?(v.value%6)+10:(v.value%6)+6
      });
    },

css部分：

/* 气泡图 */
#scatter {
  width: 350px;
  height: 300px;
  position: relative;
  li {
    opacity: 0.7;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation-name: itemfloat;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    .tip {
      width: 150px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #000;
      border: 1px solid #ccc;
      border-radius: 8px;
      background: #fff;
      display: none;
      position: absolute;
      top: -45px;
      z-index: 101;
      transition: display 2s;
    }
    span {
      color: #fff;
      font-size: 12px;
      text-align: center;
      padding: 0 5px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  li:hover .tip {
    display: block;
  }
  li:nth-child(2n) {
    animation-duration: 8s;
  }
  li:nth-child(2n-1) {
    animation-duration: 12s;
  }
  li:hover {
    z-index: 100;
    opacity: 1;
    transition: opacity 2 s;
  }

  .bubble_min:nth-child(1) {
    width: 20px;
    height: 20px;
    top: 100px;
    left: 40px;
  }
  .bubble_min:nth-child(2) {
    width: 60px;
    height: 60px;
    top: 130px;
    left: 100px;
  }
  .bubble_min:nth-child(3) {
    width: 50px;
    height: 50px;
    top: 90px;
    left: 180px;
  }
  .bubble_min:nth-child(4) {
    width: 30px;
    height: 30px;
    top: 250px;
    left: 300px;
  }
  .bubble_min:nth-child(5) {
    width: 30px;
    height: 30px;
    top: 110px;
    left: 240px;
  }
  .bubble_min {
    background-image: url(../../../../assets/bubble.png);
    background-size:100% 100% ;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    opacity: 0.5;
    animation-name: minibubble;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
  }
  .bubble8 {
    animation-duration: 8s;
  }
  .bubble10 {
    animation-duration: 10s;
  }
  .bubble12 {
    animation-duration: 12s;
  }
  @keyframes itemfloat {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(-15px);
    }
    50% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(15px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes minibubble {
    0% {
      transform: translateY(200px)  rotate(0deg);
    }
    100% {
      transform: translateY(-240px)  rotate(1500deg);
    }
  }
}

效果图如下：