数据可视化大屏项目开发中，需要实现云标签效果，今天要实现的是3d云标签效果，云标签会有一个动态旋转的效果。

效果截图

动态效果

演示地址

vue使用js-tag-cloud生成3d标签云

实例代码

/**
* @Author: 858834013@qq.com
* @Name: tagCloud
* @Date: 2024年03月14日
* @Desc: 3d标签云
*/
<template>
  <div class="tagCloud" ref="tagCloud">
  </div>
</template>

<script>
import JsTagCloud from 'js-tag-cloud'

export default {
  name: "tagCloud",
  data: function () {
    return {
      list: ['vue', 'react', '数据可视化大屏', '大屏', 'echarts', 'js', '数据可视化大屏', '大屏', 'echarts', 'js', 'css', 'html', 'node', 'webpack', 'git', 'github', 'gitlab']
    }
  },
  mounted() {
    const options = {
      radius: 170, // 滚动半径, 单位px
      maxSpeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast
      initSpeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast
      direction: -135, // 初始滚动方向, 取值角度(顺时针deg): 0 对应 top, 90 对应 left, 135 对应 right-bottom(默认)...
      keep: false // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
    }
    JsTagCloud(this.$refs.tagCloud, this.list, options)
  },
  methods: {},
}
</script>

<style lang="scss">
.tagCloud {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

</style>

源码下载

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