当前位置：首页 > VUE

Vue实现词云图

2026-01-19 02:36:53VUE

Vue 中实现词云图的方法

使用第三方库 vue-wordcloud

vue-wordcloud 是一个专为 Vue 设计的轻量级词云组件，支持自定义颜色、大小和交互事件。

安装依赖：

npm install vue-wordcloud

示例代码：

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

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

export default {
  components: { VueWordcloud },
  data() {
    return {
      words: [
        ['Vue', 50],
        ['JavaScript', 40],
        ['Wordcloud', 30],
        ['Chart', 20],
        ['Data', 10]
      ],
      color: () => `#${Math.floor(Math.random()*16777215).toString(16)}`
    }
  }
}
</script>

结合 ECharts 实现

ECharts 提供了更强大的可视化能力，适合需要复杂交互的场景。

Vue实现词云图

安装依赖：

npm install echarts vue-echarts

示例代码：

Vue实现词云图

<template>
  <v-chart :option="option" style="height: 400px" />
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { WordCloudChart } from 'echarts/charts';
import VChart from 'vue-echarts';

use([CanvasRenderer, WordCloudChart]);

export default {
  components: { VChart },
  data() {
    return {
      option: {
        series: [{
          type: 'wordCloud',
          data: [
            { name: 'Vue', value: 100 },
            { name: 'ECharts', value: 80 },
            { name: 'WordCloud', value: 60 }
          ],
          shape: 'circle'
        }]
      }
    }
  }
}
</script>

使用 D3.js 实现

D3.js 提供了最灵活的解决方案，适合需要完全自定义的场景。

安装依赖：

npm install d3

示例代码：

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

<script>
import * as d3 from 'd3';
import cloud from 'd3-cloud';

export default {
  mounted() {
    this.drawWordCloud();
  },
  methods: {
    drawWordCloud() {
      const words = [
        {text: "Vue", size: 50},
        {text: "D3", size: 40},
        {text: "Wordcloud", size: 30}
      ];

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

      layout.start();
    },
    draw(words) {
      d3.select(this.$refs.wordcloud)
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .append("g")
        .attr("transform", "translate(250,250)")
        .selectAll("text")
        .data(words)
        .enter()
        .append("text")
        .style("font-size", d => `${d.size}px`)
        .style("fill", "#69b3a2")
        .attr("text-anchor", "middle")
        .attr("transform", d => `translate(${[d.x, d.y]})rotate(${d.rotate})`)
        .text(d => d.text);
    }
  }
}
</script>