diff --git a/package.json b/package.json index f339a183..f6d45165 100755 --- a/package.json +++ b/package.json @@ -22,7 +22,11 @@ "@splidejs/react-splide": "^0.7.12", "@tanstack/react-virtual": "^3.13.12", "@tippyjs/react": "^4.2.6", + "@visx/responsive": "^3.12.0", + "@visx/scale": "^3.12.0", + "@visx/text": "^3.12.0", "@visx/visx": "^3.12.0", + "@visx/wordcloud": "^3.12.0", "antd": "^5.27.4", "apexcharts": "^3.27.3", "axios": "^1.10.0", @@ -70,7 +74,6 @@ "react-tagsinput": "3.19.0", "react-to-print": "^2.13.0", "react-tsparticles": "^2.12.2", - "react-wordcloud": "^1.2.7", "recharts": "^3.1.2", "sass": "^1.49.9", "scroll-lock": "^2.1.5", diff --git a/src/views/LimitAnalyse/components/DataVisualizationComponents.js b/src/views/LimitAnalyse/components/DataVisualizationComponents.js index 4c02148f..63163f5d 100644 --- a/src/views/LimitAnalyse/components/DataVisualizationComponents.js +++ b/src/views/LimitAnalyse/components/DataVisualizationComponents.js @@ -1,4 +1,4 @@ -import React, { useMemo, useState, useEffect } from 'react'; +import React, { useMemo, useState, useEffect, useRef } from 'react'; import { Box, Card, @@ -39,7 +39,6 @@ import { import { getFormattedTextProps } from '../../../utils/textUtils'; import { ExternalLinkIcon } from '@chakra-ui/icons'; import RiskDisclaimer from '../../../components/RiskDisclaimer'; -import './WordCloud.css'; import { BarChart, Bar, PieChart, Pie, Cell, @@ -51,15 +50,44 @@ import { Treemap, Area, AreaChart, } from 'recharts'; -import ReactWordcloud from 'react-wordcloud'; +import { Wordcloud } from '@visx/wordcloud'; +import { scaleLog } from '@visx/scale'; +import { Text as VisxText } from '@visx/text'; + // 颜色配置 const CHART_COLORS = [ '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD', '#D4A5A5', '#9B6B6B', '#E9967A', '#B19CD9', '#87CEEB' ]; -// 词云图组件 +// 词云颜色 +const WORDCLOUD_COLORS = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD']; + +// 词云图组件(使用 @visx/wordcloud,兼容 React 18) const WordCloud = ({ data }) => { + const [dimensions, setDimensions] = useState({ width: 0, height: 400 }); + const containerRef = useRef(null); + + // 监听容器尺寸变化 + useEffect(() => { + if (!containerRef.current) return; + + const updateDimensions = () => { + if (containerRef.current) { + setDimensions({ + width: containerRef.current.offsetWidth, + height: 400 + }); + } + }; + + updateDimensions(); + const resizeObserver = new ResizeObserver(updateDimensions); + resizeObserver.observe(containerRef.current); + + return () => resizeObserver.disconnect(); + }, []); + if (!data || data.length === 0) { return (