vue3 数据可视化大屏 组件效果，当前组件由5个半圆背景，一个中心圆背景组成。

5个半圆使用gsap依次加载的动画组成，中间通过css的方式加载动画。

静态效果

动态效果

组件代码

  <div class="mainRight1s">
    <div class="mainRight2">
      <div class="infoTop">
        <p>二氧化碳：700</p>
      </div>
      <div class="infoTop">
        <p>氧气：21.5 </p>
      </div>
      <div class="infoTop">
        <p>pm2.5：50</p>
      </div>
      <div class="infoTop">
        <p>voc：333</p>
      </div>
      <div class="infoTop">
        <p>甲醛：0.08</p>
      </div>
      <div class="mainRight2Inner">
      </div>
      <div class="Title">
        <p>检测数据</p>
        <numcard :number="1123"></numcard>
      </div>
    </div>
  </div>

更多gsap动画效果

gsap 动画效果汇总

项目应用

vue3 数据可视化大屏 倍适莱茵数据大屏

完整实例代码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

虚拟产品一经售出 概不退款请谅解