From cde849b3a4e00f119d9f8cb10355b30bae8bdac9 Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Sat, 22 Nov 2025 18:58:14 +0800
Subject: [PATCH] update pay function

---
 package.json                                  |  3 +-
 .../components/DataVisualizationComponents.js | 64 ++++++++++++-------
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 27c97113..f080c322 100755
--- a/package.json
+++ b/package.json
@@ -63,8 +63,7 @@
     "react-scroll": "^1.8.4",
     "react-scroll-into-view": "^2.1.3",
     "react-table": "^7.7.0",
-    "react-to-print": "^2.13.0",
-    "react-wordcloud": "^1.2.7",
+    "react-to-print": "^3.0.3",
     "recharts": "^3.1.2",
     "sass": "^1.49.9",
     "socket.io-client": "^4.7.4",
diff --git a/src/views/LimitAnalyse/components/DataVisualizationComponents.js b/src/views/LimitAnalyse/components/DataVisualizationComponents.js
index 4c02148f..5411cb92 100644
--- a/src/views/LimitAnalyse/components/DataVisualizationComponents.js
+++ b/src/views/LimitAnalyse/components/DataVisualizationComponents.js
@@ -51,14 +51,15 @@ import {
     Treemap,
     Area, AreaChart,
 } from 'recharts';
-import ReactWordcloud from 'react-wordcloud';
+import ReactECharts from 'echarts-for-react';
+import 'echarts-wordcloud';
 // 颜色配置
 const CHART_COLORS = [
     '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD',
     '#D4A5A5', '#9B6B6B', '#E9967A', '#B19CD9', '#87CEEB'
 ];
 
-// 词云图组件
+// 词云图组件（使用 ECharts Wordcloud）
 const WordCloud = ({ data }) => {
     if (!data || data.length === 0) {
         return (
@@ -71,32 +72,51 @@ const WordCloud = ({ data }) => {
     }
 
     const words = data.slice(0, 100).map(item => ({
-        text: item.name || item.text,
+        name: item.name || item.text,
         value: item.value || item.count || 1
     }));
 
-    const options = {
-        rotations: 2,
-        rotationAngles: [-90, 0],
-        fontFamily: 'Microsoft YaHei, sans-serif',
-        fontSizes: [16, 80],
-        fontWeight: 'bold',
-        padding: 3,
-        scale: 'sqrt',
-    };
-
-    const callbacks = {
-        getWordColor: () => {
-            const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD'];
-            return colors[Math.floor(Math.random() * colors.length)];
-        }
+    const option = {
+        tooltip: {
+            show: true
+        },
+        series: [{
+            type: 'wordCloud',
+            shape: 'circle',
+            left: 'center',
+            top: 'center',
+            width: '100%',
+            height: '100%',
+            sizeRange: [16, 80],
+            rotationRange: [-90, 0],
+            rotationStep: 90,
+            gridSize: 8,
+            drawOutOfBound: false,
+            layoutAnimation: true,
+            textStyle: {
+                fontFamily: 'Microsoft YaHei, sans-serif',
+                fontWeight: 'bold',
+                color: function () {
+                    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD'];
+                    return colors[Math.floor(Math.random() * colors.length)];
+                }
+            },
+            emphasis: {
+                focus: 'self',
+                textStyle: {
+                    textShadowBlur: 10,
+                    textShadowColor: '#333'
+                }
+            },
+            data: words
+        }]
     };
 
     return (
-        <ReactWordcloud 
-            words={words} 
-            options={options} 
-            callbacks={callbacks}
+        <ReactECharts
+            option={option}
+            style={{ height: '400px', width: '100%' }}
+            opts={{ renderer: 'canvas' }}
         />
     );
 };