词云图演示

词云图演示https://yundie.xyz/x-charts-demo/index.html?type=word

参考配置

基础词云图

<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'word',
  animation: true,
  series: [{
    name: '词频',
    data: [
      { value: 100, name: 'Vue', color: '#2979ff' },
      { value: 80, name: 'React', color: '#19be6b' },
      { value: 70, name: 'Angular', color: '#ff9800' },
      { value: 60, name: 'TypeScript', color: '#f44336' },
      { value: 50, name: 'JavaScript', color: '#9c27b0' },
      { value: 40, name: 'CSS', color: '#00bcd4' },
      { value: 30, name: 'HTML', color: '#ffeb3b' },
      { value: 20, name: 'Node.js', color: '#8bc34a' }
    ]
  }]
});
</script>

配置说明

type

图表类型，设置为 'word' 表示词云图。

series

数据系列配置：

• name: 系列名称
• data: 数据数组，每个元素包含：
  • value: 词频数值
  • name: 词语
  • color: 颜色

词云图用于展示文本数据中词汇的频率分布。