vue3 数据可视化大屏 组件效果，由多个六边形组成的六边形组效果。为了让六边形组不是那么死板，这里还增加了一点动画效果。

小六边形内包含了百分比以及数字标题内容。

组件以1 2 3 2 1的方式堆叠组成。

静态效果

动态效果

组件代码

<template>
  <div class="list">
    <div class="list1">
      <div class="item1 wow fadeInLeft" data-wow-delay="2s">
        <item title="专任教师" schedule="10%" :num="6501"></item>
      </div>
    </div>
    <div class="list2">
      <div class="item1 wow fadeInLeft" data-wow-delay="1.8s">
        <item title="特设岗位" schedule="10%" :num="540"></item>
      </div>
      <div class="item1 wow fadeInLeft" data-wow-delay="1.8s">
        <item title="工勤技能" schedule="10%" :num="6501"></item>
      </div>
    </div>
    <div class="list3">
      <div class="item1 wow fadeInDown" data-wow-delay="1.5s">
        <item title="无岗位类别" schedule="10%" :num="6501"></item>
      </div>
      <div class="item1 wow flipInX" data-wow-delay="1.5s"></div>
      <div class="item1 wow fadeInUp" data-wow-delay="1.5s">
        <item title="辅导员岗位" schedule="10%" :num="6501"></item>
      </div>
    </div>
    <div class="list2 list4">
      <div class="item1 wow fadeInRight" data-wow-delay="1.8s">
        <item title="其他岗位" schedule="10%" :num="6501"></item>
      </div>
      <div class="item1 wow fadeInRight" data-wow-delay="1.8s">
        <item title="教辅岗位" schedule="10%" :num="6501"></item>
      </div>
    </div>
    <div class="list1 list5">
      <div class="item1 wow fadeInRight" data-wow-delay="2s">
        <item title="管理岗位" schedule="10%" :num="6501"></item>
      </div>
    </div>
  </div>
</template>

<script>
import item from './item.vue'

export default {
  name: "title",
  data() {
    return {
      list: []
    }
  },
  components: {item},
  watch: {},
  mounted() {
    var that = this;
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  width: 100%;
  height: 100%;

  .list1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    position: relative;
    height: 100%;
    width: 20%;
    margin-right: -15px;

    .item1:nth-child(1) {
      background: url("./assets/bg1.png");
      width: 100%;
      height: 30%;
      background-size: 100% 100%;
      position: relative;
    }
  }

  .list2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    position: relative;
    height: 100%;
    width: 20%;
    margin-right: -15px;

    .item1:nth-child(1) {
      background: url("./assets/bg2.png");
      width: 100%;
      height: 30%;
      background-size: 100% 100%;
      position: relative;
    }

    .item1:nth-child(2) {
      background: url("./assets/bg5.png");
      width: 100%;
      height: 30%;
      background-size: 100% 100%;
      position: relative;
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }

  .list3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    position: relative;
    height: 100%;
    width: 23%;

    .item1:nth-child(1) {
      background: url("./assets/bg3.png");
      width: 100%;
      height: 30%;
      background-size: 100% 100%;
      position: relative;
    }

    .item1:nth-child(2) {
      background: url("./assets/bg0.png");
      width: 100%;
      height: 30%;
      background-size: 100% 100%;
      position: relative;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .item1:nth-child(3) {
      background: url("./assets/bg6.png");
      width: 100%;
      height: 30%;
      position: relative;

      background-size: 100% 100%;
    }
  }

  .list4 {
    margin-left: -15px;
  }

  .list5 {
    .item1:nth-child(1) {
      background: url("./assets/bg4.png");
      width: 100%;
      height: 30%;
      background-size: 100% 100%;
      position: relative;
    }
  }
}
</style>

更多卡片效果实例

数据可视化大屏卡片效果实例

完整实例代码下载

项目环境：vue3+vite+js nodejs 14