xinkeaboard/xinkeaboard-admin/src/components/WordCloud/index.js

import React, { Component } from "react";
import ReactWordCloud from "react-wordcloud";

class WordCloud extends Component {
  constructor(props) {
    super(props);
    this.state = {
      words: props.words ?? [
        { text: "Apparel", value: 1000 },
        { text: "Fashion", value: 800 },
        { text: "Style", value: 700 },
        { text: "Trend", value: 600 },
        { text: "Wear", value: 500 },
        { text: "Outfit", value: 400 },
        { text: "Clothing", value: 300 },
        { text: "Textile", value: 200 },
      ],
      options: props.options ?? {
        // deterministic: true,
        spiral: "archimedean",
        fontFamily: "sans-serif",
        fontSizes: [30, 80], // 字体范围
        // deterministic: true, // 尝试保持一致
        // enableOptimizations: true, // 优化性能，避免重新布局
        rotations: 0, // 不旋转
        // rotationAngles: [0, 90], // 旋转角度范围
        scale: "sqrt", // 字体缩放方式：linear、sqrt、log
        // spiral: "rectangular", // 词云排列方式：archimedean 或 rectangular
        padding: 20, // 单词之间的间距
        colors: ["#fff"],
        // colors: [
        //   "#f87171",
        //   "#fb923c",
        //   "#facc15",
        //   "#4ade80",
        //   "#38bdf8",
        //   "#a78bfa",
        //   "#f472b6",
        // ], // 多彩渐变
        enableTooltip: false, // 鼠标悬停提示
      },
    };
  }

  render() {
    const { words, options } = this.state;

    return (
      <div style={{ width: "100%", height: "100%" }}>
        <ReactWordCloud words={words} options={options} />
      </div>
    );
  }
}

export default WordCloud;