快捷導(dǎo)航

Vue3+@antv/g2plot 生成詞云圖的效果

更新時(shí)間：2024年12月27日 10:56:19 作者：小陽(yáng)生煎

詞云圖是一種文本可視化技術(shù),用于展示文本數(shù)據(jù)中關(guān)鍵詞的頻次或重要性,文章介紹了如何在Vue3中使用@antv/g2plot生成詞云圖,并解釋了如何共享顏色和隨機(jī)生成顏色的組件,感興趣的朋友一起看看吧

@antv/g2plot 是一個(gè)基于 AntV 的圖表庫(kù)屬于antv庫(kù)的一部分
用于快速創(chuàng)建各種類(lèi)型的圖表
支持折線(xiàn)圖、柱狀圖、餅圖、散點(diǎn)圖等多種圖表類(lèi)型
@antv/g2plot 屬于antv庫(kù)的一部分 g2plot是在g2基礎(chǔ)上封裝的

npm install @antv/g2plot --save

效果

所有值共享一個(gè)顏色并且每次刷新顏色隨機(jī)生成

組件頁(yè)面

components-pop.vue

<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: '山舌魚(yú)'},
{value: 100, name: '羚羊'},
{value: 37, name: '非洲王子'},
{value: 83, name: '麋鹿'},
{value: 60, name: '中華鱘'},
{value: 42, name: '鮪魚(yú)'},
{value: 96, name: '射水魚(yú)'},
{value: 54, name: '果子貍'},
{value: 33, name: '小春魚(yú)'},
{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>

使用頁(yè)面

<template>
  <div id="app">
    <WordCloudComponent />
  </div>
</template>
<script>
import WordCloudComponent from '@/components/pop.vue';
export default {
  name: 'App',
  components: {
    WordCloudComponent,
  },
};
</script>
<style>
/* 你可以在這里添加應(yīng)用的樣式 */
</style>

不同值隨機(jī)生成不同顏色并且每次刷新值隨機(jī)生成

組件頁(yè)面

components-pop.vue

<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);
    // 隨機(jī)生成顏色的函數(shù)
    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;
      }
      // 數(shù)據(jù)準(zhǔn)備，為每個(gè)單詞分配隨機(jī)顏色，并確保數(shù)據(jù)有效性
      const data = [
        { value: 67, name: '紅腹角雉' },
        { value: 98, name: '麝牛' },
        { value: 97, name: '山舌魚(yú)' },
        { value: 100, name: '羚羊' },
        { value: 37, name: '非洲王子' },
        { value: 83, name: '麋鹿' },
        { value: 60, name: '中華鱘' },
        { value: 42, name: '鮪魚(yú)' },
        { value: 96, name: '射水魚(yú)' },
        { value: 54, name: '果子貍' },
        { value: 33, name: '小春魚(yú)' },
        { 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); // 移除無(wú)效的數(shù)據(jù)項(xiàng)
      // 創(chuàng)建詞云圖
      const wordCloud = new WordCloud(wordCloudContainer.value, {
        data,
        wordField: 'name',
        weightField: 'value',
        sizeRange: [12, 60],
        // 直接使用數(shù)據(jù)中的 color 字段作為顏色配置
        colorField: 'color', // 指定顏色字段
        shape: 'circle',
        wordStyle: {
          fontFamily: 'Verdana',
          fontWeight: 'bold',
        },
        // 其他配置
      });
      wordCloud.render();
    });
    return {
      wordCloudContainer,
    };
  },
};
</script>
<style scoped>
/* 你可以在這里添加組件的樣式 */
</style>

使用頁(yè)面

<template>
  <div id="app">
    <WordCloudComponent />
  </div>
</template>
<script>
import WordCloudComponent from '@/components/pop.vue';
export default {
  name: 'App',
  components: {
    WordCloudComponent,
  },
};
</script>
<style>
/* 你可以在這里添加應(yīng)用的樣式 */
</style>

到此這篇關(guān)于Vue3+@antv/g2plot 生成詞云圖的文章就介紹到這了,更多相關(guān)Vue3 @antv/g2plot 詞云圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: