Vue实现词云图

使用vue-wordcloud插件实现词云图

安装vue-wordcloud插件

npm install vue-wordcloud

在Vue组件中引入并使用

<template>
  <div>
    <word-cloud
      :data="wordData"
      :color="myColors"
      nameKey="word"
      valueKey="count"
    />
  </div>
</template>

<script>
import WordCloud from 'vue-wordcloud'

export default {
  components: { WordCloud },
  data() {
    return {
      wordData: [
        { word: 'Vue', count: 100 },
        { word: 'React', count: 85 },
        { word: 'Angular', count: 70 }
      ],
      myColors: ['#1f77b4', '#ff7f0e', '#2ca02c']
    }
  }
}
</script>

使用echarts实现词云图

安装echarts和echarts-wordcloud

npm install echarts echarts-wordcloud

创建词云组件

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

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

export default {
  mounted() {
    this.initWordCloud()
  },
  methods: {
    initWordCloud() {
      const chart = echarts.init(this.$refs.wordcloud)
      const option = {
        series: [{
          type: 'wordCloud',
          data: [
            { name: 'Vue', value: 100 },
            { name: 'React', value: 85 },
            { name: 'Angular', value: 70 }
          ],
          shape: 'circle',
          sizeRange: [12, 60]
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

自定义实现简单词云

使用CSS和JavaScript创建基础词云效果

<template>
  <div class="word-cloud">
    <span 
      v-for="(word, index) in words" 
      :key="index"
      :style="{
        fontSize: `${word.size}px`,
        color: word.color,
        transform: `rotate(${word.rotate}deg)`
      }"
    >
      {{ word.text }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      words: [
        { text: 'Vue', size: 40, color: '#42b983', rotate: 0 },
        { text: 'React', size: 35, color: '#61dafb', rotate: -15 },
        { text: 'Angular', size: 30, color: '#dd0031', rotate: 10 }
      ]
    }
  }
}
</script>

<style>
.word-cloud {
  width: 500px;
  height: 300px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.word-cloud span {
  margin: 5px;
  padding: 5px;
  display: inline-block;
}
</style>

使用d3-cloud实现高级词云

安装d3-cloud

npm install d3-cloud

创建基于d3的词云组件

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

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

export default {
  props: {
    words: {
      type: Array,
      default: () => [
        { text: 'Vue', size: 60 },
        { text: 'React', size: 50 },
        { text: 'Angular', size: 40 }
      ]
    }
  },
  mounted() {
    this.drawWordCloud()
  },
  methods: {
    drawWordCloud() {
      const layout = cloud()
        .size([500, 300])
        .words(this.words)
        .padding(5)
        .rotate(() => Math.floor(Math.random() * 2) * 90)
        .font('Impact')
        .fontSize(d => d.size)
        .on('end', this.drawWords)

      layout.start()
    },
    drawWords(words) {
      d3.select(this.$refs.cloudContainer)
        .append('svg')
        .attr('width', 500)
        .attr('height', 300)
        .append('g')
        .attr('transform', 'translate(250,150)')
        .selectAll('text')
        .data(words)
        .enter()
        .append('text')
        .style('font-size', d => `${d.size}px`)
        .style('font-family', 'Impact')
        .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)
    }
  }
}
</script>

响应式词云实现

添加窗口大小变化监听

<script>
export default {
  // ...其他代码
  mounted() {
    this.initWordCloud()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.$nextTick(() => {
        this.initWordCloud()
      })
    }
    // ...其他方法
  }
}
</script>