Vue3+@antv/g2plot 生成词云图的效果

@antv/g2plot 是一个基于 AntV 的图表库属于antv库的一部分
用于快速创建各种类型的图表
支持折线图、柱状图、饼图、散点图等多种图表类型
@antv/g2plot 属于antv库的一部分 g2plot是在g2基础上封装的 

npm install @antv/g2plot --save

<template>
  <div ref="wordCloudContainer" :style="{ width: '100%', height: '400px' }"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import { WordCloud } from '@antv/g2plot';
export default {
  name: 'WordCloudComponent',
  setup() {
    const wordCloudContainer = ref(null);
    onMounted(() => {
      const data = [
{value: 67, name: '红腹角雉'},
{value: 98, name: '麝牛'},
{value: 97, name: '山舌鱼'},
{value: 100, name: '羚羊'},
{value: 37, name: '非洲王子'},
{value: 83, name: '麋鹿'},
{value: 60, name: '中华鲟'},
{value: 42, name: '鮪鱼'},
{value: 96, name: '射水鱼'},
{value: 54, name: '果子狸'},
{value: 33, name: '小春鱼'},
{value: 84, name: '水獭'},
{value: 86, name: '刺猬'}
      ];
   const getRandomColor = () => {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    };
      const wordCloud = new WordCloud(wordCloudContainer.value, {
        data,
        wordField: 'name',
        weightField: 'value',
        sizeRange: [12, 60],
        color: getRandomColor(),
        shape: 'circle',
        wordStyle: {
          fontFamily: 'Verdana',
          fontWeight: 'bold',
          // 可以添加其他文本样式
        },
        // 其他配置
      });
      wordCloud.render();
    });
    return {
      wordCloudContainer,
    };
  },
};
</script>
<style scoped>
/* 你可以在这里添加组件的样式 */
</style>

<template>
  <div id="app">
    <WordCloudComponent />
  </div>
</template>
<script>
import WordCloudComponent from '@/components/pop.vue';
export default {
  name: 'App',
  components: {
    WordCloudComponent,
  },
};
</script>
<style>
/* 你可以在这里添加应用的样式 */
</style>

<template>
  <div ref="wordCloudContainer" :style="{ width: '100%', height: '400px' }"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import { WordCloud } from '@antv/g2plot';
export default {
  name: 'WordCloudComponent',
  setup() {
    const wordCloudContainer = ref(null);
    // 随机生成颜色的函数
    const getRandomColor = () => {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    };
    onMounted(() => {
      if (!wordCloudContainer.value) {
        console.error('Word cloud container is not available');
        return;
      }
      // 数据准备，为每个单词分配随机颜色，并确保数据有效性
      const data = [
        { value: 67, name: '红腹角雉' },
        { value: 98, name: '麝牛' },
        { value: 97, name: '山舌鱼' },
        { value: 100, name: '羚羊' },
        { value: 37, name: '非洲王子' },
        { value: 83, name: '麋鹿' },
        { value: 60, name: '中华鲟' },
        { value: 42, name: '鮪鱼' },
        { value: 96, name: '射水鱼' },
        { value: 54, name: '果子狸' },
        { value: 33, name: '小春鱼' },
        { value: 84, name: '水獭' },
        { value: 86, name: '刺猬' }
      ].map(item => {
        if (!item || typeof item !== 'object' || !('name' in item) || !('value' in item)) {
          console.error('Invalid data item:', item);
          return null;
        }
        return { ...item, color: getRandomColor() };
      }).filter(Boolean); // 移除无效的数据项
      // 创建词云图
      const wordCloud = new WordCloud(wordCloudContainer.value, {
        data,
        wordField: 'name',
        weightField: 'value',
        sizeRange: [12, 60],
        // 直接使用数据中的 color 字段作为颜色配置
        colorField: 'color', // 指定颜色字段
        shape: 'circle',
        wordStyle: {
          fontFamily: 'Verdana',
          fontWeight: 'bold',
        },
        // 其他配置
      });
      wordCloud.render();
    });
    return {
      wordCloudContainer,
    };
  },
};
</script>
<style scoped>
/* 你可以在这里添加组件的样式 */
</style>

<template>
  <div id="app">
    <WordCloudComponent />
  </div>
</template>
<script>
import WordCloudComponent from '@/components/pop.vue';
export default {
  name: 'App',
  components: {
    WordCloudComponent,
  },
};
</script>
<style>
/* 你可以在这里添加应用的样式 */
</style>