工具库
-
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 或smallif (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>效果
