RayChart

Appearance

词云 ​

3D 词云通过三维空间中的文字大小和颜色展示数据权重，适用于关键词频率、标签分布、文本分析等场景。

快速开始 ​

最简单的词云只需提供关键词和权重值：

vue
<template>
  <RayWordCloud :option="chartOption" />
</template>

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

const chartOption = ref({
  series: [
    {
      type: 'wordCloud3D',
      data: [
        { name: 'JavaScript', value: 100 },
        { name: 'TypeScript', value: 90 },
        { name: 'Vue', value: 80 },
        { name: 'React', value: 75 },
        { name: 'Node.js', value: 70 },
      ],
    },
  ],
});
</script>

智能默认值

自动配置球形容器、字号范围、颜色渐变、自动旋转和光照效果。

核心配置 ​

数据配置 ​

属性类型默认值说明
series.dataArray<{name: string, value: number}>-词云数据（必填）

形状配置 ​

属性类型默认值说明
series.shape'sphere' | 'ellipsoid' | 'cylinder' | 'cube''sphere'词云形状
series.radiusnumber10容器半径

形状说明

  • sphere: 球形，经典的词云形状
  • ellipsoid: 椭球形，需配置 radiusY 和 radiusZ
  • cylinder: 圆柱形，垂直排列
  • cube: 立方体，规则排列

文字配置 ​

属性类型默认值说明
series.sizeRange[number, number][12, 48]字号范围
series.fontWeightstring'600'字体粗细
series.fontFamilystring'Arial, Microsoft YaHei, sans-serif'字体族
series.colorRangestring[]5 种渐变色颜色范围（按权重插值）
series.rotateWordsbooleantrue文字是否旋转
series.rotateRange[number, number][-π/6, π/6]旋转角度范围（弧度）
文字标签样式（可选）

通过标签背景和边框配置提升可读性：

javascript
series: [
  {
    backgroundColor: 'rgba(255,255,255,0.95)', // 标签背景色
    padding: 8,                                // 内边距
    borderRadius: 6,                           // 圆角半径
  }
]

交互配置 ​

属性类型默认值说明
series.autoRotatebooleantrue自动旋转
series.rotationSpeednumber0.001旋转速度（弧度/帧）
series.showContainerbooleantrue显示容器边框
动画配置（进阶）

series.animation 为布尔开关，控制首次渲染时的入场动画（缩放 + 淡入，逐词交错出现）：

javascript
animation: true,         // 启用入场动画（默认 true）
animationDelay: 30,      // 每个词的动画延迟（毫秒）
animationDuration: 600,  // 动画时长（毫秒）

旋转动画由 autoRotate + rotationSpeed 控制，常驻生效。

常见场景 ​

基础词云 ​

展示技术关键词的权重分布：

vue
<template>
  <RayWordCloud :option="chartOption" />
</template>

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

const chartOption = ref({
  series: [
    {
      type: 'wordCloud3D',
      data: [
        { name: 'JavaScript', value: 100 },
        { name: 'TypeScript', value: 90 },
        { name: 'Vue', value: 85 },
        { name: 'React', value: 80 },
        { name: 'Node.js', value: 75 },
        { name: 'Python', value: 95 },
        { name: 'Docker', value: 78 },
        { name: 'Kubernetes', value: 68 },
        { name: 'AWS', value: 82 },
      ],
      shape: 'sphere',
      radius: 10,
      sizeRange: [14, 42], // 最小字号 14px，最大字号 42px
      colorRange: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
      autoRotate: true,
      rotationSpeed: 0.002,
    },
  ],
});
</script>

椭球形词云 ​

使用椭球形状展示更有层次感的词云：

vue
<script setup>
const chartOption = ref({
  series: [
    {
      type: 'wordCloud3D',
      data: [
        { name: 'Machine Learning', value: 100 },
        { name: 'Deep Learning', value: 95 },
        { name: 'Neural Networks', value: 90 },
        { name: 'NLP', value: 85 },
        { name: 'Computer Vision', value: 88 },
        { name: 'Reinforcement Learning', value: 80 },
        { name: 'TensorFlow', value: 75 },
        { name: 'PyTorch', value: 78 },
      ],
      shape: 'ellipsoid', // 椭球形
      radius: 10,
      radiusY: 8, // Y 轴半径
      radiusZ: 15, // Z 轴半径
      colorRange: ['#667eea', '#764ba2', '#f093fb', '#4facfe'],
      autoRotate: true,
    },
  ],
});
</script>

立方体词云 ​

使用立方体形状实现规则排列：

vue
<script setup>
const chartOption = ref({
  series: [
    {
      type: 'wordCloud3D',
      data: [
        { name: 'Design', value: 100 },
        { name: 'UI/UX', value: 95 },
        { name: 'Prototype', value: 85 },
        { name: 'Wireframe', value: 80 },
        { name: 'Typography', value: 90 },
        { name: 'Color Theory', value: 75 },
        { name: 'Layout', value: 78 },
        { name: 'Interaction', value: 82 },
      ],
      shape: 'cube', // 立方体形状
      radius: 10,
      colorRange: ['#4ecdc4', '#45b7d1', '#5f9ea0', '#6a5acd'],
      rotateWords: false, // 不旋转单词
      showContainer: true, // 显示容器边框
    },
  ],
});
</script>

自定义动画效果 ​

控制入场动画的开关与节奏，以及常驻旋转速度：

vue
<script setup>
const chartOption = ref({
  series: [
    {
      type: 'wordCloud3D',
      data: [
        { name: 'Innovation', value: 100 },
        { name: 'Creativity', value: 95 },
        { name: 'Technology', value: 90 },
        { name: 'Future', value: 85 },
        { name: 'Vision', value: 88 },
      ],
      shape: 'sphere',
      radius: 10,
      sizeRange: [16, 48],
      autoRotate: true,
      rotationSpeed: 0.002,  // 加快旋转
      animation: false,      // 关闭入场动画
    },
  ],
});
</script>

组件属性 ​

属性类型默认值说明
optionRayChartOption-图表配置对象（必填）
widthstring | number'100%'图表宽度
heightstring | number'600px'图表高度

相关文档 ​

基础学习 ​

进阶主题 ​

API 参考 ​

其他图表类型 ​

在线示例 ​