diff --git a/package.json b/package.json index 315f05be..a372be84 100755 --- a/package.json +++ b/package.json @@ -18,11 +18,6 @@ "@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", "axios": "^1.10.0", "classnames": "^2.5.1", diff --git a/src/components/VisxPieChart/VisxPieChart.js b/src/components/VisxPieChart/VisxPieChart.js deleted file mode 100755 index f658ba6c..00000000 --- a/src/components/VisxPieChart/VisxPieChart.js +++ /dev/null @@ -1,55 +0,0 @@ -import { useState } from "react"; -import { Pie } from "@visx/shape"; -import { Group } from "@visx/group"; -import { Text } from "@visx/text"; -import { useColorModeValue } from "@chakra-ui/react"; - -const VisxPieChart = ({ data, title, width }) => { - const [active, setActive] = useState(null); - const half = width / 2; - - const textColor = useColorModeValue("gray.700", "white"); - - return ( - - - data.percentage} - outerRadius={half} - innerRadius={({ data }) => { - const size = active && active.name == data.name ? 12 : 8; - return half - size; - }} - padAngle={0.01} - > - {(pie) => { - return pie.arcs.map((arc) => { - return ( - setActive(arc.data)} - onMouseLeave={() => setActive(null)} - > - - - ); - }); - }} - - - - <> - - - - {title} - - - - - - ); -}; - -export default VisxPieChart; diff --git a/src/views/LimitAnalyse/components/DataVisualizationComponents.js b/src/views/LimitAnalyse/components/DataVisualizationComponents.js index 362395a9..a52a25ba 100644 --- a/src/views/LimitAnalyse/components/DataVisualizationComponents.js +++ b/src/views/LimitAnalyse/components/DataVisualizationComponents.js @@ -1,4 +1,4 @@ -import React, { useMemo, useState, useEffect, useRef } from 'react'; +import React, { useMemo } from 'react'; import { Box, Card, @@ -50,10 +50,6 @@ import { Treemap, Area, AreaChart, } from 'recharts'; -// 词云库 - 支持两种实现 -import { Wordcloud } from '@visx/wordcloud'; -import { scaleLog } from '@visx/scale'; -import { Text as VisxText } from '@visx/text'; import ReactECharts from 'echarts-for-react'; import 'echarts-wordcloud'; // 颜色配置 @@ -65,97 +61,7 @@ const CHART_COLORS = [ // 词云颜色常量 const WORDCLOUD_COLORS = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD']; -// ==================== 词云组件实现 1: @visx/wordcloud ==================== -// 使用 SVG 渲染,React 18 原生支持,配置灵活 -const VisxWordCloud = ({ 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 ( -
- - 暂无词云数据 - -
- ); - } - - const words = data.slice(0, 100).map(item => ({ - name: item.name || item.text, - value: item.value || item.count || 1 - })); - - // 计算字体大小比例 - const fontScale = scaleLog({ - domain: [ - Math.min(...words.map(w => w.value)), - Math.max(...words.map(w => w.value)) - ], - range: [16, 80], - }); - - const fontSizeSetter = (datum) => fontScale(datum.value); - - return ( - - {dimensions.width > 0 && ( - - 0.5} - > - {(cloudWords) => - cloudWords.map((w, i) => ( - - {w.text} - - )) - } - - - )} - - ); -}; - -// ==================== 词云组件实现 2: ECharts Wordcloud ==================== -// 使用 Canvas 渲染,内置交互效果(tooltip、emphasis),配置简单 +// 词云组件 - 使用 ECharts 实现 const EChartsWordCloud = ({ data }) => { if (!data || data.length === 0) { return ( @@ -216,9 +122,8 @@ const EChartsWordCloud = ({ data }) => { ); }; -// ==================== 词云组件包装器 ==================== -// 统一接口,支持切换两种实现方式 -const WordCloud = ({ data, engine = 'echarts' }) => { +// 词云组件 +const WordCloud = ({ data }) => { if (!data || data.length === 0) { return (
@@ -229,8 +134,7 @@ const WordCloud = ({ data, engine = 'echarts' }) => { ); } - // 根据 engine 参数选择实现方式 - return engine === 'visx' ? : ; + return ; }; // 板块热力图组件