vue词云图自己实现

实现 Vue 词云图的方法

安装依赖库

使用 vue-wordcloud 或 d3-cloud 结合 Vue 实现。安装命令如下：

npm install vue-wordcloud
# 或
npm install d3 d3-cloud

基于 vue-wordcloud 的实现

<template>
  <div>
    <vue-wordcloud
      :words="words"
      :color="color"
      font-family="Arial"
    />
  </div>
</template>

<script>
import VueWordcloud from 'vue-wordcloud';

export default {
  components: { VueWordcloud },
  data() {
    return {
      words: [
        ['Vue', 32],
        ['JavaScript', 28],
        ['词云', 25],
        ['可视化', 18],
      ],
      color: () => `#${Math.floor(Math.random() * 0xFFFFFF).toString(16)}`
    };
  }
};
</script>

基于 d3-cloud 的自定义实现

1. 创建 Vue 组件文件 WordCloud.vue：

   
   <template>
   <div ref="wordcloud"></div>
   </template>

import * as d3 from 'd3'; import cloud from 'd3-cloud';

export default { mounted() { this.renderWordCloud(); }, methods: { renderWordCloud() { const words = [ { text: 'Vue', size: 32 }, { text: '词云', size: 25 }, { text: 'D3', size: 20 }, ];

  const layout = cloud()
    .size([500, 300])
    .words(words)
    .padding(5)
    .rotate(() => Math.floor(Math.random() * 2) * 90)
    .font('Arial')
    .fontSize(d => d.size)
    .on('end', this.draw);

  layout.start();
},
draw(words) {
  d3.select(this.$refs.wordcloud)
    .append('svg')
    .attr('width', 500)
    .attr('height', 300)
    .append('g')
    .attr('transform', 'translate(250,150)')
    .selectAll('text')
    .data(words)
    .enter()
    .append('text')
    .style('font-family', 'Arial')
    .style('fill', () => `hsl(${Math.random() * 360}, 70%, 50%)`)
    .attr('text-anchor', 'middle')
    .attr('transform', d => `translate(${[d.x, d.y]})rotate(${d.rotate})`)
    .text(d => d.text)
    .style('font-size', d => `${d.size}px`);
}

} };

```

自定义样式优化

• 通过调整 rotate 函数控制文字旋转角度
• 修改 color 函数实现动态颜色生成
• 响应式处理：监听窗口大小变化时调用 layout.size([newWidth, newHeight])

注意事项

• 使用 d3-cloud 时需要手动处理 SVG 渲染逻辑
• 词云数据建议按权重（如词频）排序
• 移动端需额外处理触摸事件和缩放适配

两种方式均可实现词云效果，vue-wordcloud 更简单，d3-cloud 灵活性更高。可根据项目复杂度选择合适方案。