当前位置：首页 > VUE

vue实现词云

2026-02-20 07:14:22VUE

Vue 实现词云的方法

使用第三方库 `vue-wordcloud`

vue-wordcloud 是专为 Vue 设计的词云组件，基于 d3-cloud 实现。

安装依赖：

npm install vue-wordcloud d3-cloud

示例代码：

vue实现词云

<template>
  <div>
    <vue-wordcloud
      :words="words"
      :color="([, weight]) => weight > 10 ? 'red' : 'blue'"
      font-family="Roboto"
    />
  </div>
</template>

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

export default {
  components: { VueWordcloud },
  data() {
    return {
      words: [
        ['Vue', 32],
        ['React', 28],
        ['Angular', 18],
        ['JavaScript', 25]
      ]
    }
  }
}
</script>

使用 ECharts 实现词云

ECharts 提供了词云图类型，功能更丰富。

安装 ECharts：

vue实现词云

npm install echarts

示例代码：

<template>
  <div ref="wordcloud" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';

export default {
  mounted() {
    const chart = echarts.init(this.$refs.wordcloud);
    const option = {
      series: [{
        type: 'wordCloud',
        data: [
          { name: 'Vue', value: 32 },
          { name: 'React', value: 28 },
          { name: 'Angular', value: 18 }
        ],
        sizeRange: [12, 60]
      }]
    };
    chart.setOption(option);
  }
}
</script>

自定义 SVG 词云

对于简单需求，可以直接用 SVG 实现基础词云效果。

示例代码：

<template>
  <svg width="500" height="300">
    <text
      v-for="(word, index) in words"
      :key="index"
      :x="getRandom(50, 450)"
      :y="getRandom(50, 250)"
      :font-size="word.size"
      fill="#4a90e2"
    >
      {{ word.text }}
    </text>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      words: [
        { text: 'Vue', size: '32px' },
        { text: 'React', size: '28px' }
      ]
    }
  },
  methods: {
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min
    }
  }
}
</script>