工具库

• tagcanvas.min.js

• vue3（框架其实无所谓，都可以）

实现

<script setup>
import { onMounted, ref } from 'vue';
import './tagcanvas.min.js';

const updateFlag = ref(false);

// 词云图初始化
const initWordCloud = () => {
  let o = {
    maxSpeed: 0.02, // 添加最大的运动速度
    minSpeed: 0.01, // 添加最小的运动速度这样就可以保证一直运动，不会停止
    textHeight: 14,
    outlineMethod: 'colour', // tag hover 之后的 轮廓效果
    fadeIn: 800,
    outlineColour: '#2463f3',
    textColour: null,
    outlineOffset: 0,
    depth: 0.97,
    minBrightness: 0.2,
    wheelZoom: false,
    reverse: true, // 运动方向与鼠标移动方向相反
    // shadowBlur: 1,
    shuffleTags: true,
    shadowOffset: [1, 1],
    stretchX: 1.2, // Stretch or compress the cloud horizontally. 水平拉伸词云
    initial: [0.1, 0.1], // 给词云添加一个初始的运动方向
    textFont: null, // 字体设置为 null 就会继承 每个 tag的a 标签的字体
    weight: false, // weight 打开，就可以根据默认的字体的大小作为权重，对tag 的样式进行调整
    weightMode: 'size', // 样式调整的方式
    weightSize: 0.5, // 调整 tag 字体的大小，加个 权重
  };

  try {
    // 如果不是更新，说明是第一次渲染，就启动 tagcanvas, 否则就代表更新
    if (!updateFlag.value) {
      window.TagCanvas.Start('world-cloud-canvas', 'weightTags', o);
      updateFlag.value = true;
    } else {
      window.TagCanvas.Update('world-cloud-canvas');
    }
  } catch (e) {
    console.error(e);
  }
};

const createTagListDom = (res) => {
  let fragment = new DocumentFragment();

  for (let i = 0; i < res.length; i++) {
    let a = document.createElement('a');

    // 字符串长度大于10就要换行
    if (res[i].word.length > 10) {
      let charArr = res[i].word.split('');

      charArr.splice(10, 0, '<br>');
      res[i].word = charArr.join('');
    }

    a.innerHTML = res[i].word;
    a.href = 'javascript:void(0)';

    // 如果是要加重展示就 设置属性为 huge 或large, 否则就设置属性为 medium 或small
    if (res[i].isActive) {
      // 设置a标签颜色为红色
      a.style.color = '#2463f3';
      a.style.fontSize = '28px';
    } else {
      a.style.color = '#66666690';
      a.style.fontSize = '14px';
    }

    fragment.append(a);
  }

  // 更新 tagContainer中的 tag元素
  let tagsContainer = document.querySelector('#weightTags');

  tagsContainer.innerHTML = '';
  tagsContainer.append(fragment);

  initWordCloud();
};

onMounted(() => {
  createTagListDom([
    {
      id: 1,
      word: 'JavaScript',
      isActive: true,
    },
    {
      id: 2,
      word: 'Vue.js',
      isActive: true,
    },
    {
      id: 3,
      word: 'React.js',
      isActive: false,
    },
    {
      id: 4,
      word: 'Node.js',
      isActive: false,
    },
    {
      id: 5,
      word: 'TypeScript',
      isActive: false,
    },
    {
      id: 6,
      word: 'HTML',
      isActive: false,
    },
    {
      id: 7,
      word: 'CSS',
      isActive: false,
    },
    {
      id: 8,
      word: 'Sass',
      isActive: false,
    },
    {
      id: 9,
      word: 'Less',
      isActive: false,
    },
    {
      id: 10,
      word: 'Webpack',
      isActive: false,
    },
    {
      id: 11,
      word: 'Babel',
      isActive: false,
    },
    {
      id: 12,
      word: 'Gulp',
      isActive: false,
    },
    {
      id: 13,
      word: 'Grunt',
      isActive: false,
    },
    {
      id: 14,
      word: 'NPM',
      isActive: false,
    },
    {
      id: 15,
      word: 'Yarn',
      isActive: false,
    },
    {
      id: 16,
      word: 'Git',
      isActive: false,
    },
    {
      id: 17,
      word: 'GitHub',
      isActive: false,
    },
    {
      id: 18,
      word: 'Jest',
      isActive: false,
    },
    {
      id: 19,
      word: 'Mocha',
      isActive: false,
    },
    {
      id: 20,
      word: 'Enzyme',
      isActive: false,
    },
  ]);
});
</script>

<template>
  <div class="w-386px">
    <div class="h-306px w-full">
      <canvas id="world-cloud-canvas" width="386" height="306" style="width: 100%; max-width: 386px"> </canvas>
    </div>
    <div id="weightTags" class="hidden"></div>
  </div>
</template>

效果