vue旋转词云，动态词云#wordCloud

最新推荐文章于 2024-06-20 09:43:44 发布

留丶白

最新推荐文章于 2024-06-20 09:43:44 发布

阅读量2.2k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45678513/article/details/126508249

版权

一遇到困难就面向百度开发😅
转载地址：
参考文章1
参考文章2
参考文章3
参考文章4
以上参考文章都是可以直接复制使用，博主用了参考文章1的第一种方法
使用tagcanvas
步骤1：在index.html标签中引入tagcanvas.min.js，我直接放到了最外层，粘贴时要注意路径，文件地址直接全选复制即可，然后创建名为tagcanvas.min.js的js文件

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <script type="module" src="./tagcanvas.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xxxxxx</title>
  </head>

步骤2：可以当作组件，也可以直接写成单页面
组件形式

<template>
  <div class="world-cloud-3d">
    <div class="world-cloud-canvas-wrapper">
      <canvas
        id="world-cloud-canvas"
        width="400"
        height="200"
        style="width: 100%; max-width: 400px"
      >
      </canvas>
    </div>
    <div style="display: none" id="weightTags"></div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {}
  },
  props: {
    wordArr: {
      type: Array,
      default: () => [
        {
          name: '西安市公共交通集团有限公司',
          light: true
        },
        {
          name: '广平县永信财税服务有限公司',
          light: true
        }, {
          name: '河南薪火传承数字科技有限公司',
          light: true
        }, {
          name: '深圳市智谷天厨科技有限公司',
          light: true
        }, {
          name: '天津麟才教育咨询有限公司',
          light: true
        }, {
          name: '深圳市九策有限公司',
          light: true
        }, {
          name: '深圳大疆有限公司',
          light: true
        },
        {
          name: '云基华海信息技术',
          light: true
        }
      ]
    }
  },
  methods: {
    // 启动词云
    startWorldCloud () {
      this.createTagListDom()
      const o = {
        maxSpeed: 0.01, // 添加最大的运动速度
        minSpeed: 0.01, // 添加最小的运动速度这样就可以保证一直运动，不会停止
        textHeight: 25,
        outlineMethod: 'colour', // tag hover 之后的 轮廓效果
        fadeIn: 800,
        outlineColour: '#fff',
        outlineOffset: 0,
        depth: 0.97,
        minBrightness: 0.2,
        wheelZoom: false,
        reverse: true, // 运动方向与鼠标移动方向相反
        shadowBlur: 2,
        shuffleTags: true,
        shadowOffset: [1, 1],
        stretchX: 1.7, // Stretch or compress the cloud horizontally. 水平拉伸词云
        initial: [0.1, 0.1], // 给词云添加一个初始的运动方向
        textFont: null, // 字体设置为 null 就会继承 每个 tag的a 标签的字体
        textColour: null, // 字体颜色设置为 null 就会继承 每个 tag的a 标签的字体颜色
        weight: true, // weight 打开，就可以根据默认的字体的大小作为权重，对tag 的样式进行调整
        weightMode: 'size', // 样式调整的方式
        weightSize: 0.5 // 调整 tag 字体的大小，加个 权重
      }
      // eslint-disable-next-line no-undef
      TagCanvas.Start('world-cloud-canvas', 'weightTags', o)
      try {
        // 如果不是更新，说明是第一次渲染，就启动 tagcanvas, 否则就代表更新
        // eslint-disable-next-line no-undef
        if (!updateFlag) {
          // eslint-disable-next-line no-undef
          TagCanvas.Start('world-cloud-canvas', 'weightTags', o)
        } else {
          // eslint-disable-next-line no-undef
          TagCanvas.Update('world-cloud-canvas')
        }
      } catch (e) {}
    },
    // 根据父组件传过来的 wordArr 创建 TagList Dom列表，放到页面中供，canvas 渲染
    // 这里后端的数组中的数据结构是一个对象 { name: 要展示的tag名字， light: true/false 据定是否要加重展示}
    createTagListDom: function () {
      const res = [...this.wordArr]
      const fragment = new DocumentFragment()
      for (let i = 0; i < res.length; i++) {
        const a = document.createElement('a')
        // 字符串长度大于10就要换行
        if (res[i].name.length > 10) {
          const charArr = res[i].name.split('')
          charArr.splice(10, 0, '<br>')
          res[i].name = charArr.join('')
        }
        a.innerHTML = res[i].name
        a.href = 'javascript:void(0)'
        // 如果是要加重展示就 设置属性为 huge 或large, 否则就设置属性为 medium 或small
        if (res[i].light) {
          const readomValue = Math.random()
          a.className = readomValue > 0.5 ? 'huge' : 'large'
        } else {
          const readomValue = Math.random()
          a.className = readomValue > 0.5 ? 'medium' : 'small'
        }
        fragment.append(a)
      }
      // 更新 tagContainer中的 tag元素
      const tagsContainer = document.querySelector('#weightTags')
      tagsContainer.innerHTML = ''
      tagsContainer.append(fragment)
    }
  },
  watch: {
    // 如果词云发生变化就要 重绘 tagcanvas
    wordArr: function () {
      this.startWorldCloud(true)
    }
  },
  mounted () {
    // 组件装载成果 绘制 tagcanvas
    this.startWorldCloud()
  }
}
</script>
<style lang="less">
.world-cloud-3d {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  .world-cloud-canvas-wrapper {
    width: 400px;
    height: 200px;
    max-width: 400px;
    max-height: 200px;
  }
  #weightTags {
    font-size: 12px;
    .huge {
      font-size: 30px;
      color: rgb(98,203,235);
    }
    .large {
      font-size: 25px;
      color: rgb(98,203,235, 0.6);
    }
    .medium {
      font-size: 20px;
      color: rgb(98,203,235, 0.4);
    }
    .small {
      font-size: 15px;
      color: rgb(98,203,235, 0.2);
    }
  }
}
</style>

页面形式（真实情况，请求回的数据需要延时一下再调用词云方法）

<template>
  <div class="world-cloud-3d">
    <div class="world-cloud-canvas-wrapper">
      <canvas
        id="world-cloud-canvas"
        width="400"
        height="200"
        style="width: 100%; max-width: 400px"
      >
      </canvas>
    </div>
    <div style="display: none" id="weightTags"></div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
    	wordArr:[
    	{
          name: '西安市公共交通集团有限公司',
          light: true
        },
        {
          name: '广平县永信财税服务有限公司',
          light: true
        }, {
          name: '河南薪火传承数字科技有限公司',
          light: true
        }, {
          name: '深圳市智谷天厨科技有限公司',
          light: true
        }, {
          name: '天津麟才教育咨询有限公司',
          light: true
        }, {
          name: '深圳市九策有限公司',
          light: true
        }, {
          name: '深圳大疆有限公司',
          light: true
        },
        {
          name: '云基华海信息技术',
          light: true
        }]
    }
  },
  methods: {
    // 启动词云
    startWorldCloud () {
      this.createTagListDom()
      const o = {
        maxSpeed: 0.01, // 添加最大的运动速度
        minSpeed: 0.01, // 添加最小的运动速度这样就可以保证一直运动，不会停止
        textHeight: 25,
        outlineMethod: 'colour', // tag hover 之后的 轮廓效果
        fadeIn: 800,
        outlineColour: '#fff',
        outlineOffset: 0,
        depth: 0.97,
        minBrightness: 0.2,
        wheelZoom: false,
        reverse: true, // 运动方向与鼠标移动方向相反
        shadowBlur: 2,
        shuffleTags: true,
        shadowOffset: [1, 1],
        stretchX: 1.7, // Stretch or compress the cloud horizontally. 水平拉伸词云
        initial: [0.1, 0.1], // 给词云添加一个初始的运动方向
        textFont: null, // 字体设置为 null 就会继承 每个 tag的a 标签的字体
        textColour: null, // 字体颜色设置为 null 就会继承 每个 tag的a 标签的字体颜色
        weight: true, // weight 打开，就可以根据默认的字体的大小作为权重，对tag 的样式进行调整
        weightMode: 'size', // 样式调整的方式
        weightSize: 0.5 // 调整 tag 字体的大小，加个 权重
      }
      // eslint-disable-next-line no-undef
      TagCanvas.Start('world-cloud-canvas', 'weightTags', o)
      try {
        // 如果不是更新，说明是第一次渲染，就启动 tagcanvas, 否则就代表更新
        // eslint-disable-next-line no-undef
        if (!updateFlag) {
          // eslint-disable-next-line no-undef
          TagCanvas.Start('world-cloud-canvas', 'weightTags', o)
        } else {
          // eslint-disable-next-line no-undef
          TagCanvas.Update('world-cloud-canvas')
        }
      } catch (e) {}
    },
    // 根据父组件传过来的 wordArr 创建 TagList Dom列表，放到页面中供，canvas 渲染
    // 这里后端的数组中的数据结构是一个对象 { name: 要展示的tag名字， light: true/false 据定是否要加重展示}
    createTagListDom: function () {
      const res = [...this.wordArr]
      const fragment = new DocumentFragment()
      for (let i = 0; i < res.length; i++) {
        const a = document.createElement('a')
        // 字符串长度大于10就要换行
        if (res[i].name.length > 10) {
          const charArr = res[i].name.split('')
          charArr.splice(10, 0, '<br>')
          res[i].name = charArr.join('')
        }
        a.innerHTML = res[i].name
        a.href = 'javascript:void(0)'
        // 如果是要加重展示就 设置属性为 huge 或large, 否则就设置属性为 medium 或small
        if (res[i].light) {
          const readomValue = Math.random()
          a.className = readomValue > 0.5 ? 'huge' : 'large'
        } else {
          const readomValue = Math.random()
          a.className = readomValue > 0.5 ? 'medium' : 'small'
        }
        fragment.append(a)
      }
      // 更新 tagContainer中的 tag元素
      const tagsContainer = document.querySelector('#weightTags')
      tagsContainer.innerHTML = ''
      tagsContainer.append(fragment)
    }
  },
  watch: {
    // 如果词云发生变化就要 重绘 tagcanvas
    wordArr: function () {
      this.startWorldCloud(true)
    }
  },
  mounted () {
    // 组件装载成果 绘制 tagcanvas
    this.startWorldCloud()
  }
}
</script>
<style lang="less">
.world-cloud-3d {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  .world-cloud-canvas-wrapper {
    width: 400px;
    height: 200px;
    max-width: 400px;
    max-height: 200px;
  }
  #weightTags {
    font-size: 12px;
    .huge {
      font-size: 30px;
      color: rgb(98,203,235);
    }
    .large {
      font-size: 25px;
      color: rgb(98,203,235, 0.6);
    }
    .medium {
      font-size: 20px;
      color: rgb(98,203,235, 0.4);
    }
    .small {
      font-size: 15px;
      color: rgb(98,203,235, 0.2);
    }
  }
}
</style>

如果需要随机颜色的话或者随机字体的话

// 将以下代码注释掉
// 如果是要加重展示就 设置属性为 huge 或large, 否则就设置属性为 medium 或small
// if (res[i].light) {
//   const readomValue = Math.random();
//   a.className = readomValue > 0.5 ? "huge" : "large";
// } else {
//   const readomValue = Math.random();
//   a.className = readomValue > 0.5 ? "medium" : "small";
// }

// 更改为以下代码
// 随机颜色
a.style.color =
  "rgb(" +
  parseInt(Math.random() * 255) +
  "," +
  parseInt(Math.random() * 255) +
  "," +
  parseInt(Math.random() * 255) +
  ")";
  //随机字体大小
a.style.fontSize = Math.floor(Math.random() * 30 + 16) + "px";