update pay ui
This commit is contained in:
@@ -1,20 +1,15 @@
|
||||
/**
|
||||
* ForceGraphView - 概念层级关系图（使用 reagraph）
|
||||
* SunburstView - 概念层级旭日图
|
||||
*
|
||||
* 特性：
|
||||
* 1. 清晰的层级布局（Radial/Hierarchical）
|
||||
* 2. 节点大小根据股票数量动态调整
|
||||
* 3. 涨红跌绿颜色映射
|
||||
* 4. 悬停显示涨跌幅详情
|
||||
* 5. 点击节点可聚焦或跳转
|
||||
* 1. 同心圆环展示层级关系，从内到外：根 → 一级 → 二级 → 三级 → 概念
|
||||
* 2. 涨红跌绿颜色映射
|
||||
* 3. 点击扇区可钻取到子层级
|
||||
* 4. 悬停显示详细信息
|
||||
* 5. 支持返回上级
|
||||
*/
|
||||
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import {
|
||||
GraphCanvas,
|
||||
useSelection,
|
||||
lightTheme,
|
||||
darkTheme,
|
||||
} from 'reagraph';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
@@ -29,29 +24,22 @@ import {
|
||||
Tooltip,
|
||||
Badge,
|
||||
useBreakpointValue,
|
||||
Select,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Collapse,
|
||||
useDisclosure,
|
||||
Divider,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
FaLayerGroup,
|
||||
FaSync,
|
||||
FaExpand,
|
||||
FaCompress,
|
||||
FaCog,
|
||||
FaHome,
|
||||
FaChevronUp,
|
||||
FaArrowUp,
|
||||
FaArrowDown,
|
||||
FaProjectDiagram,
|
||||
FaCircle,
|
||||
FaChartPie,
|
||||
FaUndo,
|
||||
} from 'react-icons/fa';
|
||||
import { logger } from '../../../utils/logger';
|
||||
|
||||
// 一级分类颜色映射
|
||||
// 一级分类颜色映射（基础色）
|
||||
const LV1_COLORS = {
|
||||
'人工智能': '#8B5CF6',
|
||||
'半导体': '#3B82F6',
|
||||
@@ -74,33 +62,23 @@ const LV1_COLORS = {
|
||||
const getChangeColor = (value, baseColor = '#64748B') => {
|
||||
if (value === null || value === undefined) return baseColor;
|
||||
|
||||
// 涨 - 红色系（更鲜艳）
|
||||
// 涨 - 红色系
|
||||
if (value > 7) return '#DC2626';
|
||||
if (value > 5) return '#EF4444';
|
||||
if (value > 3) return '#F87171';
|
||||
if (value > 1) return '#FCA5A5';
|
||||
if (value > 0) return '#FECACA';
|
||||
if (value > 0) return '#FED7D7';
|
||||
|
||||
// 跌 - 绿色系
|
||||
if (value < -7) return '#15803D';
|
||||
if (value < -5) return '#16A34A';
|
||||
if (value < -3) return '#22C55E';
|
||||
if (value < -1) return '#4ADE80';
|
||||
if (value < 0) return '#86EFAC';
|
||||
if (value < 0) return '#BBF7D0';
|
||||
|
||||
return baseColor; // 平盘
|
||||
};
|
||||
|
||||
// 根据涨跌幅获取发光颜色
|
||||
const getGlowColor = (value) => {
|
||||
if (value === null || value === undefined) return 'rgba(100, 116, 139, 0.5)';
|
||||
if (value > 3) return 'rgba(239, 68, 68, 0.6)';
|
||||
if (value > 0) return 'rgba(252, 165, 165, 0.5)';
|
||||
if (value < -3) return 'rgba(34, 197, 94, 0.6)';
|
||||
if (value < 0) return 'rgba(134, 239, 172, 0.5)';
|
||||
return 'rgba(100, 116, 139, 0.5)';
|
||||
};
|
||||
|
||||
// 从 API 返回的名称中提取纯名称
|
||||
const extractPureName = (apiName) => {
|
||||
if (!apiName) return '';
|
||||
@@ -114,50 +92,6 @@ const formatChangePercent = (value) => {
|
||||
return value > 0 ? `+${formatted}%` : value < 0 ? `-${formatted}%` : '0.00%';
|
||||
};
|
||||
|
||||
/**
|
||||
* 自定义深色主题
|
||||
*/
|
||||
const customDarkTheme = {
|
||||
...darkTheme,
|
||||
canvas: {
|
||||
background: 'transparent',
|
||||
},
|
||||
node: {
|
||||
...darkTheme.node,
|
||||
fill: '#8B5CF6',
|
||||
activeFill: '#A78BFA',
|
||||
label: {
|
||||
color: '#E2E8F0',
|
||||
stroke: '#0F172A',
|
||||
activeColor: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
edge: {
|
||||
...darkTheme.edge,
|
||||
fill: '#475569',
|
||||
activeFill: '#8B5CF6',
|
||||
},
|
||||
ring: {
|
||||
...darkTheme.ring,
|
||||
fill: '#8B5CF6',
|
||||
activeFill: '#A78BFA',
|
||||
},
|
||||
arrow: {
|
||||
...darkTheme.arrow,
|
||||
fill: '#475569',
|
||||
activeFill: '#8B5CF6',
|
||||
},
|
||||
cluster: {
|
||||
...darkTheme.cluster,
|
||||
stroke: '#475569',
|
||||
fill: 'rgba(139, 92, 246, 0.1)',
|
||||
label: {
|
||||
...darkTheme.cluster?.label,
|
||||
color: '#94A3B8',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 主组件
|
||||
*/
|
||||
@@ -172,13 +106,11 @@ const ForceGraphView = ({
|
||||
const [priceData, setPriceData] = useState({ lv1Map: {}, lv2Map: {}, lv3Map: {}, leafMap: {} });
|
||||
const [priceLoading, setPriceLoading] = useState(false);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [layoutType, setLayoutType] = useState('radialOut2d'); // 'radialOut2d', 'treeTd2d', 'treeLr2d', 'forceDirected2d'
|
||||
const [displayLevel, setDisplayLevel] = useState('lv2'); // 'lv1', 'lv2', 'lv3', 'all'
|
||||
const [selectedNode, setSelectedNode] = useState(null);
|
||||
const [hoveredItem, setHoveredItem] = useState(null);
|
||||
const [drillPath, setDrillPath] = useState([]); // 钻取路径
|
||||
|
||||
const graphRef = useRef();
|
||||
const chartRef = useRef();
|
||||
const containerRef = useRef();
|
||||
const { isOpen: isSettingsOpen, onToggle: onSettingsToggle } = useDisclosure({ defaultIsOpen: false });
|
||||
|
||||
const isMobile = useBreakpointValue({ base: true, md: false });
|
||||
|
||||
@@ -194,12 +126,12 @@ const ForceGraphView = ({
|
||||
const data = await response.json();
|
||||
setHierarchy(data.hierarchy || []);
|
||||
|
||||
logger.info('ForceGraphView', '层级结构加载完成', {
|
||||
logger.info('SunburstView', '层级结构加载完成', {
|
||||
totalLv1: data.hierarchy?.length,
|
||||
totalConcepts: data.total_concepts
|
||||
});
|
||||
} catch (err) {
|
||||
logger.error('ForceGraphView', 'fetchHierarchy', err);
|
||||
logger.error('SunburstView', 'fetchHierarchy', err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@@ -219,7 +151,7 @@ const ForceGraphView = ({
|
||||
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
logger.warn('ForceGraphView', '获取层级涨跌幅失败', { status: response.status });
|
||||
logger.warn('SunburstView', '获取层级涨跌幅失败', { status: response.status });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -248,12 +180,12 @@ const ForceGraphView = ({
|
||||
|
||||
setPriceData({ lv1Map, lv2Map, lv3Map, leafMap });
|
||||
|
||||
logger.info('ForceGraphView', '层级涨跌幅加载完成', {
|
||||
logger.info('SunburstView', '层级涨跌幅加载完成', {
|
||||
lv1Count: Object.keys(lv1Map).length,
|
||||
lv2Count: Object.keys(lv2Map).length,
|
||||
});
|
||||
} catch (err) {
|
||||
logger.warn('ForceGraphView', '获取层级涨跌幅失败', { error: err.message });
|
||||
logger.warn('SunburstView', '获取层级涨跌幅失败', { error: err.message });
|
||||
} finally {
|
||||
setPriceLoading(false);
|
||||
}
|
||||
@@ -269,31 +201,20 @@ const ForceGraphView = ({
|
||||
}
|
||||
}, [hierarchy, fetchHierarchyPrice]);
|
||||
|
||||
// 构建图数据
|
||||
const graphData = useMemo(() => {
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
// 构建旭日图数据
|
||||
const sunburstData = useMemo(() => {
|
||||
const { lv1Map, lv2Map, lv3Map, leafMap } = priceData;
|
||||
|
||||
// 根节点
|
||||
nodes.push({
|
||||
id: 'root',
|
||||
label: '概念中心',
|
||||
data: { level: 'root', changePct: null },
|
||||
fill: '#8B5CF6',
|
||||
size: 60,
|
||||
});
|
||||
|
||||
hierarchy.forEach((lv1) => {
|
||||
const lv1Id = `lv1_${lv1.name}`;
|
||||
const lv1Price = lv1Map[lv1.name] || {};
|
||||
const buildChildren = (lv1) => {
|
||||
const lv1BaseColor = LV1_COLORS[lv1.name] || '#8B5CF6';
|
||||
const lv1Color = getChangeColor(lv1Price.avg_change_pct, lv1BaseColor);
|
||||
const lv1Price = lv1Map[lv1.name] || {};
|
||||
|
||||
// 一级节点
|
||||
nodes.push({
|
||||
id: lv1Id,
|
||||
label: lv1.name,
|
||||
const lv1Node = {
|
||||
name: lv1.name,
|
||||
value: lv1Price.stock_count || lv1.concept_count * 10 || 100,
|
||||
itemStyle: {
|
||||
color: getChangeColor(lv1Price.avg_change_pct, lv1BaseColor),
|
||||
},
|
||||
data: {
|
||||
level: 'lv1',
|
||||
changePct: lv1Price.avg_change_pct,
|
||||
@@ -301,27 +222,20 @@ const ForceGraphView = ({
|
||||
conceptCount: lv1.concept_count,
|
||||
baseColor: lv1BaseColor,
|
||||
},
|
||||
fill: lv1Color,
|
||||
size: Math.max(35, Math.min(55, 35 + (lv1Price.stock_count || 0) / 50)),
|
||||
});
|
||||
children: [],
|
||||
};
|
||||
|
||||
edges.push({
|
||||
id: `root-${lv1Id}`,
|
||||
source: 'root',
|
||||
target: lv1Id,
|
||||
size: 2,
|
||||
});
|
||||
|
||||
// 二级节点
|
||||
if (lv1.children && (displayLevel === 'lv2' || displayLevel === 'lv3' || displayLevel === 'all')) {
|
||||
// 二级
|
||||
if (lv1.children) {
|
||||
lv1.children.forEach((lv2) => {
|
||||
const lv2Id = `lv2_${lv1.name}_${lv2.name}`;
|
||||
const lv2Price = lv2Map[lv2.name] || {};
|
||||
const lv2Color = getChangeColor(lv2Price.avg_change_pct, lv1BaseColor);
|
||||
|
||||
nodes.push({
|
||||
id: lv2Id,
|
||||
label: lv2.name,
|
||||
const lv2Node = {
|
||||
name: lv2.name,
|
||||
value: lv2Price.stock_count || lv2.concept_count * 5 || 50,
|
||||
itemStyle: {
|
||||
color: getChangeColor(lv2Price.avg_change_pct, lv1BaseColor),
|
||||
},
|
||||
data: {
|
||||
level: 'lv2',
|
||||
parentLv1: lv1.name,
|
||||
@@ -330,27 +244,20 @@ const ForceGraphView = ({
|
||||
conceptCount: lv2.concept_count,
|
||||
baseColor: lv1BaseColor,
|
||||
},
|
||||
fill: lv2Color,
|
||||
size: Math.max(25, Math.min(40, 25 + (lv2Price.stock_count || 0) / 80)),
|
||||
});
|
||||
children: [],
|
||||
};
|
||||
|
||||
edges.push({
|
||||
id: `${lv1Id}-${lv2Id}`,
|
||||
source: lv1Id,
|
||||
target: lv2Id,
|
||||
size: 1.5,
|
||||
});
|
||||
|
||||
// 三级节点
|
||||
if (lv2.children && (displayLevel === 'lv3' || displayLevel === 'all')) {
|
||||
// 三级
|
||||
if (lv2.children) {
|
||||
lv2.children.forEach((lv3) => {
|
||||
const lv3Id = `lv3_${lv1.name}_${lv2.name}_${lv3.name}`;
|
||||
const lv3Price = lv3Map[lv3.name] || {};
|
||||
const lv3Color = getChangeColor(lv3Price.avg_change_pct, lv1BaseColor);
|
||||
|
||||
nodes.push({
|
||||
id: lv3Id,
|
||||
label: lv3.name,
|
||||
const lv3Node = {
|
||||
name: lv3.name,
|
||||
value: lv3Price.stock_count || 30,
|
||||
itemStyle: {
|
||||
color: getChangeColor(lv3Price.avg_change_pct, lv1BaseColor),
|
||||
},
|
||||
data: {
|
||||
level: 'lv3',
|
||||
parentLv1: lv1.name,
|
||||
@@ -359,29 +266,19 @@ const ForceGraphView = ({
|
||||
stockCount: lv3Price.stock_count,
|
||||
baseColor: lv1BaseColor,
|
||||
},
|
||||
fill: lv3Color,
|
||||
size: Math.max(18, Math.min(30, 18 + (lv3Price.stock_count || 0) / 100)),
|
||||
});
|
||||
|
||||
edges.push({
|
||||
id: `${lv2Id}-${lv3Id}`,
|
||||
source: lv2Id,
|
||||
target: lv3Id,
|
||||
size: 1,
|
||||
});
|
||||
children: [],
|
||||
};
|
||||
|
||||
// 叶子概念
|
||||
if (displayLevel === 'all' && lv3.concepts) {
|
||||
lv3.concepts.slice(0, 5).forEach((conceptName) => { // 限制每个lv3只显示5个概念
|
||||
const conceptId = `concept_${conceptName}`;
|
||||
if (lv3.concepts) {
|
||||
lv3.concepts.forEach((conceptName) => {
|
||||
const conceptPrice = leafMap[conceptName] || {};
|
||||
const conceptColor = getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor);
|
||||
|
||||
// 避免重复添加节点
|
||||
if (!nodes.find(n => n.id === conceptId)) {
|
||||
nodes.push({
|
||||
id: conceptId,
|
||||
label: conceptName,
|
||||
lv3Node.children.push({
|
||||
name: conceptName,
|
||||
value: conceptPrice.stock_count || 10,
|
||||
itemStyle: {
|
||||
color: getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor),
|
||||
},
|
||||
data: {
|
||||
level: 'concept',
|
||||
parentLv1: lv1.name,
|
||||
@@ -391,33 +288,24 @@ const ForceGraphView = ({
|
||||
stockCount: conceptPrice.stock_count,
|
||||
baseColor: lv1BaseColor,
|
||||
},
|
||||
fill: conceptColor,
|
||||
size: 12,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
edges.push({
|
||||
id: `${lv3Id}-${conceptId}`,
|
||||
source: lv3Id,
|
||||
target: conceptId,
|
||||
size: 0.5,
|
||||
});
|
||||
});
|
||||
}
|
||||
lv2Node.children.push(lv3Node);
|
||||
});
|
||||
}
|
||||
|
||||
// lv2 直接包含的概念
|
||||
if (displayLevel === 'all' && lv2.concepts) {
|
||||
lv2.concepts.slice(0, 5).forEach((conceptName) => {
|
||||
const conceptId = `concept_${conceptName}`;
|
||||
if (lv2.concepts) {
|
||||
lv2.concepts.forEach((conceptName) => {
|
||||
const conceptPrice = leafMap[conceptName] || {};
|
||||
const conceptColor = getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor);
|
||||
|
||||
if (!nodes.find(n => n.id === conceptId)) {
|
||||
nodes.push({
|
||||
id: conceptId,
|
||||
label: conceptName,
|
||||
lv2Node.children.push({
|
||||
name: conceptName,
|
||||
value: conceptPrice.stock_count || 10,
|
||||
itemStyle: {
|
||||
color: getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor),
|
||||
},
|
||||
data: {
|
||||
level: 'concept',
|
||||
parentLv1: lv1.name,
|
||||
@@ -426,37 +314,216 @@ const ForceGraphView = ({
|
||||
stockCount: conceptPrice.stock_count,
|
||||
baseColor: lv1BaseColor,
|
||||
},
|
||||
fill: conceptColor,
|
||||
size: 12,
|
||||
});
|
||||
}
|
||||
|
||||
edges.push({
|
||||
id: `${lv2Id}-${conceptId}`,
|
||||
source: lv2Id,
|
||||
target: conceptId,
|
||||
size: 0.5,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
lv1Node.children.push(lv2Node);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return { nodes, edges };
|
||||
}, [hierarchy, priceData, displayLevel]);
|
||||
return lv1Node;
|
||||
};
|
||||
|
||||
// 节点点击处理
|
||||
const handleNodeClick = useCallback((node) => {
|
||||
setSelectedNode(node);
|
||||
return hierarchy.map(buildChildren);
|
||||
}, [hierarchy, priceData]);
|
||||
|
||||
if (node.data?.level === 'concept') {
|
||||
const htmlPath = `https://valuefrontier.cn/htmls/${encodeURIComponent(node.label)}.html`;
|
||||
// ECharts 配置
|
||||
const chartOption = useMemo(() => {
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(15, 23, 42, 0.95)',
|
||||
borderColor: 'rgba(139, 92, 246, 0.5)',
|
||||
borderWidth: 1,
|
||||
borderRadius: 12,
|
||||
padding: [12, 16],
|
||||
textStyle: {
|
||||
color: '#E2E8F0',
|
||||
fontSize: 13,
|
||||
},
|
||||
formatter: (params) => {
|
||||
const data = params.data?.data || {};
|
||||
const levelMap = {
|
||||
'lv1': '一级分类',
|
||||
'lv2': '二级分类',
|
||||
'lv3': '三级分类',
|
||||
'concept': '概念',
|
||||
};
|
||||
|
||||
const changePct = data.changePct;
|
||||
const changeColor = changePct > 0 ? '#F87171' : changePct < 0 ? '#4ADE80' : '#94A3B8';
|
||||
const changeIcon = changePct > 0 ? '▲' : changePct < 0 ? '▼' : '●';
|
||||
|
||||
return `
|
||||
<div style="min-width: 160px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
||||
<span style="
|
||||
background: ${data.baseColor || '#8B5CF6'};
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
">${levelMap[data.level] || '分类'}</span>
|
||||
</div>
|
||||
<div style="font-size: 16px; font-weight: bold; margin-bottom: 8px; color: #FFFFFF;">
|
||||
${params.name}
|
||||
</div>
|
||||
${changePct !== undefined && changePct !== null ? `
|
||||
<div style="
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: ${changePct > 0 ? 'rgba(248, 113, 113, 0.2)' : changePct < 0 ? 'rgba(74, 222, 128, 0.2)' : 'rgba(148, 163, 184, 0.2)'};
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
">
|
||||
<span style="color: ${changeColor}; font-size: 12px;">${changeIcon}</span>
|
||||
<span style="color: ${changeColor}; font-weight: bold; font-size: 15px; font-family: monospace;">
|
||||
${formatChangePercent(changePct)}
|
||||
</span>
|
||||
</div>
|
||||
` : ''}
|
||||
<div style="color: #94A3B8; font-size: 12px;">
|
||||
${data.stockCount ? `${data.stockCount} 只股票` : ''}
|
||||
${data.conceptCount ? ` · ${data.conceptCount} 个概念` : ''}
|
||||
</div>
|
||||
${data.level === 'concept' ? `
|
||||
<div style="color: #A78BFA; font-size: 11px; margin-top: 6px;">
|
||||
点击查看详情 →
|
||||
</div>
|
||||
` : `
|
||||
<div style="color: #64748B; font-size: 11px; margin-top: 6px;">
|
||||
点击钻取到下级
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sunburst',
|
||||
data: sunburstData,
|
||||
radius: ['12%', '95%'],
|
||||
center: ['50%', '50%'],
|
||||
sort: 'desc',
|
||||
emphasis: {
|
||||
focus: 'ancestor',
|
||||
itemStyle: {
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(139, 92, 246, 0.5)',
|
||||
},
|
||||
},
|
||||
levels: [
|
||||
{},
|
||||
// 一级 - 最内圈
|
||||
{
|
||||
r0: '12%',
|
||||
r: '35%',
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
borderColor: '#0F172A',
|
||||
borderRadius: 4,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
rotate: 'tangential',
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
color: '#FFFFFF',
|
||||
textShadowColor: '#000',
|
||||
textShadowBlur: 4,
|
||||
},
|
||||
},
|
||||
// 二级
|
||||
{
|
||||
r0: '35%',
|
||||
r: '58%',
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#0F172A',
|
||||
borderRadius: 3,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
rotate: 'tangential',
|
||||
fontSize: 10,
|
||||
color: '#F1F5F9',
|
||||
textShadowColor: '#000',
|
||||
textShadowBlur: 3,
|
||||
},
|
||||
},
|
||||
// 三级
|
||||
{
|
||||
r0: '58%',
|
||||
r: '78%',
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#0F172A',
|
||||
borderRadius: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
rotate: 'radial',
|
||||
fontSize: 9,
|
||||
color: '#E2E8F0',
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
// 概念 - 最外圈
|
||||
{
|
||||
r0: '78%',
|
||||
r: '95%',
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#1E293B',
|
||||
borderRadius: 1,
|
||||
},
|
||||
label: {
|
||||
show: false, // 概念层太多，隐藏标签
|
||||
position: 'outside',
|
||||
fontSize: 8,
|
||||
color: '#94A3B8',
|
||||
},
|
||||
},
|
||||
],
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
},
|
||||
animation: true,
|
||||
animationDuration: 800,
|
||||
animationEasing: 'cubicOut',
|
||||
},
|
||||
],
|
||||
};
|
||||
}, [sunburstData]);
|
||||
|
||||
// 图表事件
|
||||
const onChartEvents = useMemo(() => ({
|
||||
click: (params) => {
|
||||
const data = params.data?.data || {};
|
||||
|
||||
if (data.level === 'concept') {
|
||||
// 跳转到概念详情页
|
||||
const htmlPath = `https://valuefrontier.cn/htmls/${encodeURIComponent(params.name)}.html`;
|
||||
window.open(htmlPath, '_blank');
|
||||
}
|
||||
|
||||
logger.info('ForceGraphView', '节点点击', { level: node.data?.level, name: node.label });
|
||||
}, []);
|
||||
logger.info('SunburstView', '点击', { level: data.level, name: params.name });
|
||||
},
|
||||
mouseover: (params) => {
|
||||
setHoveredItem({
|
||||
name: params.name,
|
||||
data: params.data?.data,
|
||||
});
|
||||
},
|
||||
mouseout: () => {
|
||||
setHoveredItem(null);
|
||||
},
|
||||
}), []);
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = useCallback(() => {
|
||||
@@ -479,7 +546,7 @@ const ForceGraphView = ({
|
||||
<Center h="500px" bg="rgba(15, 23, 42, 0.8)" borderRadius="2xl">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="purple.400" thickness="4px" />
|
||||
<Text color="gray.400">正在构建概念关系图...</Text>
|
||||
<Text color="gray.400">正在构建旭日图...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
);
|
||||
@@ -522,9 +589,8 @@ const ForceGraphView = ({
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
opacity={0.1}
|
||||
bgImage="radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.3) 0%, transparent 50%)"
|
||||
opacity={0.15}
|
||||
bgImage="radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 60%)"
|
||||
pointerEvents="none"
|
||||
/>
|
||||
|
||||
@@ -539,7 +605,7 @@ const ForceGraphView = ({
|
||||
zIndex={10}
|
||||
pointerEvents="none"
|
||||
>
|
||||
{/* 左侧标题和信息 */}
|
||||
{/* 左侧标题 */}
|
||||
<VStack align="start" spacing={3} pointerEvents="auto">
|
||||
<HStack
|
||||
bg="rgba(0, 0, 0, 0.7)"
|
||||
@@ -551,9 +617,9 @@ const ForceGraphView = ({
|
||||
borderColor="whiteAlpha.200"
|
||||
boxShadow="0 4px 20px rgba(0, 0, 0, 0.3)"
|
||||
>
|
||||
<Icon as={FaProjectDiagram} color="purple.300" />
|
||||
<Icon as={FaChartPie} color="purple.300" />
|
||||
<Text color="white" fontWeight="bold" fontSize="sm">
|
||||
概念关系图
|
||||
概念旭日图
|
||||
</Text>
|
||||
<Badge
|
||||
bg="purple.500"
|
||||
@@ -562,12 +628,12 @@ const ForceGraphView = ({
|
||||
px={2}
|
||||
fontSize="xs"
|
||||
>
|
||||
{graphData.nodes.length} 节点
|
||||
{hierarchy.length} 板块
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
{/* 选中节点信息卡片 */}
|
||||
{selectedNode && selectedNode.data?.level !== 'root' && (
|
||||
{/* 悬停信息 */}
|
||||
{hoveredItem && hoveredItem.data?.level !== 'root' && (
|
||||
<Box
|
||||
bg="rgba(0, 0, 0, 0.85)"
|
||||
backdropFilter="blur(12px)"
|
||||
@@ -575,77 +641,69 @@ const ForceGraphView = ({
|
||||
py={3}
|
||||
borderRadius="xl"
|
||||
border="1px solid"
|
||||
borderColor={selectedNode.fill || 'purple.500'}
|
||||
boxShadow={`0 4px 20px ${getGlowColor(selectedNode.data?.changePct)}`}
|
||||
borderColor={hoveredItem.data?.baseColor || 'purple.500'}
|
||||
boxShadow="0 4px 20px rgba(0, 0, 0, 0.4)"
|
||||
maxW="280px"
|
||||
>
|
||||
<VStack align="start" spacing={2}>
|
||||
<HStack spacing={2}>
|
||||
<Badge
|
||||
bg={selectedNode.data?.baseColor || 'purple.500'}
|
||||
bg={hoveredItem.data?.baseColor || 'purple.500'}
|
||||
color="white"
|
||||
borderRadius="full"
|
||||
px={2}
|
||||
fontSize="xs"
|
||||
>
|
||||
{selectedNode.data?.level === 'lv1' ? '一级分类' :
|
||||
selectedNode.data?.level === 'lv2' ? '二级分类' :
|
||||
selectedNode.data?.level === 'lv3' ? '三级分类' : '概念'}
|
||||
{hoveredItem.data?.level === 'lv1' ? '一级分类' :
|
||||
hoveredItem.data?.level === 'lv2' ? '二级分类' :
|
||||
hoveredItem.data?.level === 'lv3' ? '三级分类' : '概念'}
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
<Text color="white" fontWeight="bold" fontSize="md">
|
||||
{selectedNode.label}
|
||||
{hoveredItem.name}
|
||||
</Text>
|
||||
|
||||
{/* 涨跌幅显示 */}
|
||||
{selectedNode.data?.changePct !== undefined && selectedNode.data?.changePct !== null && (
|
||||
{hoveredItem.data?.changePct !== undefined && hoveredItem.data?.changePct !== null && (
|
||||
<HStack
|
||||
bg={selectedNode.data.changePct > 0 ? 'rgba(239, 68, 68, 0.2)' : selectedNode.data.changePct < 0 ? 'rgba(34, 197, 94, 0.2)' : 'rgba(100, 116, 139, 0.2)'}
|
||||
bg={hoveredItem.data.changePct > 0 ? 'rgba(248, 113, 113, 0.2)' : hoveredItem.data.changePct < 0 ? 'rgba(74, 222, 128, 0.2)' : 'rgba(148, 163, 184, 0.2)'}
|
||||
px={3}
|
||||
py={1}
|
||||
borderRadius="full"
|
||||
border="1px solid"
|
||||
borderColor={selectedNode.data.changePct > 0 ? 'red.400' : selectedNode.data.changePct < 0 ? 'green.400' : 'gray.500'}
|
||||
borderColor={hoveredItem.data.changePct > 0 ? 'red.400' : hoveredItem.data.changePct < 0 ? 'green.400' : 'gray.500'}
|
||||
>
|
||||
<Icon
|
||||
as={selectedNode.data.changePct > 0 ? FaArrowUp : selectedNode.data.changePct < 0 ? FaArrowDown : FaCircle}
|
||||
color={selectedNode.data.changePct > 0 ? 'red.400' : selectedNode.data.changePct < 0 ? 'green.400' : 'gray.400'}
|
||||
as={hoveredItem.data.changePct > 0 ? FaArrowUp : hoveredItem.data.changePct < 0 ? FaArrowDown : FaCircle}
|
||||
color={hoveredItem.data.changePct > 0 ? 'red.400' : hoveredItem.data.changePct < 0 ? 'green.400' : 'gray.400'}
|
||||
boxSize={3}
|
||||
/>
|
||||
<Text
|
||||
color={selectedNode.data.changePct > 0 ? 'red.300' : selectedNode.data.changePct < 0 ? 'green.300' : 'gray.300'}
|
||||
color={hoveredItem.data.changePct > 0 ? 'red.300' : hoveredItem.data.changePct < 0 ? 'green.300' : 'gray.300'}
|
||||
fontWeight="bold"
|
||||
fontSize="lg"
|
||||
fontFamily="mono"
|
||||
>
|
||||
{formatChangePercent(selectedNode.data.changePct)}
|
||||
{formatChangePercent(hoveredItem.data.changePct)}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
<HStack spacing={4} color="whiteAlpha.700" fontSize="xs">
|
||||
{selectedNode.data?.stockCount && (
|
||||
<Text>{selectedNode.data.stockCount} 只股票</Text>
|
||||
{hoveredItem.data?.stockCount && (
|
||||
<Text>{hoveredItem.data.stockCount} 只股票</Text>
|
||||
)}
|
||||
{selectedNode.data?.conceptCount && (
|
||||
<Text>{selectedNode.data.conceptCount} 个概念</Text>
|
||||
{hoveredItem.data?.conceptCount && (
|
||||
<Text>{hoveredItem.data.conceptCount} 个概念</Text>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{selectedNode.data?.level === 'concept' && (
|
||||
<Text color="purple.300" fontSize="xs">
|
||||
点击查看详情 →
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
{/* 右侧控制按钮 */}
|
||||
<VStack spacing={2} pointerEvents="auto">
|
||||
<HStack spacing={2}>
|
||||
<HStack spacing={2} pointerEvents="auto">
|
||||
{priceLoading && <Spinner size="sm" color="purple.300" />}
|
||||
|
||||
<Tooltip label="刷新数据" placement="left">
|
||||
@@ -663,20 +721,6 @@ const ForceGraphView = ({
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="设置" placement="left">
|
||||
<IconButton
|
||||
size="sm"
|
||||
icon={isSettingsOpen ? <FaChevronUp /> : <FaCog />}
|
||||
onClick={onSettingsToggle}
|
||||
bg={isSettingsOpen ? 'purple.500' : 'rgba(0, 0, 0, 0.7)'}
|
||||
color="white"
|
||||
border="1px solid"
|
||||
borderColor={isSettingsOpen ? 'purple.400' : 'whiteAlpha.200'}
|
||||
_hover={{ bg: isSettingsOpen ? 'purple.400' : 'whiteAlpha.200' }}
|
||||
aria-label="设置"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label={isFullscreen ? '退出全屏' : '全屏'} placement="left">
|
||||
<IconButton
|
||||
size="sm"
|
||||
@@ -691,65 +735,6 @@ const ForceGraphView = ({
|
||||
/>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
|
||||
{/* 设置面板 */}
|
||||
<Collapse in={isSettingsOpen}>
|
||||
<Box
|
||||
bg="rgba(0, 0, 0, 0.85)"
|
||||
backdropFilter="blur(12px)"
|
||||
p={4}
|
||||
borderRadius="xl"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
w="220px"
|
||||
boxShadow="0 4px 20px rgba(0, 0, 0, 0.4)"
|
||||
>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<FormControl>
|
||||
<FormLabel color="whiteAlpha.800" fontSize="xs" mb={1}>
|
||||
布局方式
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={layoutType}
|
||||
onChange={(e) => setLayoutType(e.target.value)}
|
||||
size="sm"
|
||||
bg="whiteAlpha.100"
|
||||
color="white"
|
||||
borderColor="whiteAlpha.300"
|
||||
_hover={{ borderColor: 'purple.400' }}
|
||||
sx={{ option: { bg: '#1a1a2e', color: 'white' } }}
|
||||
>
|
||||
<option value="radialOut2d">放射状</option>
|
||||
<option value="treeTd2d">树形(上下)</option>
|
||||
<option value="treeLr2d">树形(左右)</option>
|
||||
<option value="forceDirected2d">力导向</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel color="whiteAlpha.800" fontSize="xs" mb={1}>
|
||||
显示层级
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={displayLevel}
|
||||
onChange={(e) => setDisplayLevel(e.target.value)}
|
||||
size="sm"
|
||||
bg="whiteAlpha.100"
|
||||
color="white"
|
||||
borderColor="whiteAlpha.300"
|
||||
_hover={{ borderColor: 'purple.400' }}
|
||||
sx={{ option: { bg: '#1a1a2e', color: 'white' } }}
|
||||
>
|
||||
<option value="lv1">一级分类</option>
|
||||
<option value="lv2">到二级</option>
|
||||
<option value="lv3">到三级</option>
|
||||
<option value="all">全部(含概念)</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</VStack>
|
||||
</Flex>
|
||||
|
||||
{/* 底部图例 */}
|
||||
@@ -821,25 +806,59 @@ const ForceGraphView = ({
|
||||
borderColor="whiteAlpha.200"
|
||||
>
|
||||
<Text color="whiteAlpha.600" fontSize="xs">
|
||||
滚轮缩放 · 拖拽平移 · 点击节点查看详情
|
||||
悬停查看详情 · 点击概念跳转
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* 图表 */}
|
||||
<GraphCanvas
|
||||
ref={graphRef}
|
||||
nodes={graphData.nodes}
|
||||
edges={graphData.edges}
|
||||
theme={customDarkTheme}
|
||||
layoutType={layoutType}
|
||||
labelType="all"
|
||||
edgeArrowPosition="none"
|
||||
draggable
|
||||
onNodeClick={handleNodeClick}
|
||||
contextMenu={null}
|
||||
cameraMode="pan"
|
||||
sizingType="centrality"
|
||||
{/* 层级说明 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom={4}
|
||||
left="50%"
|
||||
transform="translateX(-50%)"
|
||||
zIndex={10}
|
||||
pointerEvents="none"
|
||||
>
|
||||
<HStack
|
||||
bg="rgba(0, 0, 0, 0.7)"
|
||||
backdropFilter="blur(10px)"
|
||||
px={4}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
spacing={3}
|
||||
>
|
||||
<HStack spacing={1}>
|
||||
<Box w={2} h={2} borderRadius="full" bg="purple.400" />
|
||||
<Text color="whiteAlpha.700" fontSize="xs">一级</Text>
|
||||
</HStack>
|
||||
<Text color="whiteAlpha.400">→</Text>
|
||||
<HStack spacing={1}>
|
||||
<Box w={2} h={2} borderRadius="full" bg="blue.400" />
|
||||
<Text color="whiteAlpha.700" fontSize="xs">二级</Text>
|
||||
</HStack>
|
||||
<Text color="whiteAlpha.400">→</Text>
|
||||
<HStack spacing={1}>
|
||||
<Box w={2} h={2} borderRadius="full" bg="cyan.400" />
|
||||
<Text color="whiteAlpha.700" fontSize="xs">三级</Text>
|
||||
</HStack>
|
||||
<Text color="whiteAlpha.400">→</Text>
|
||||
<HStack spacing={1}>
|
||||
<Box w={2} h={2} borderRadius="full" bg="gray.400" />
|
||||
<Text color="whiteAlpha.700" fontSize="xs">概念</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* ECharts 图表 */}
|
||||
<ReactECharts
|
||||
ref={chartRef}
|
||||
option={chartOption}
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
onEvents={onChartEvents}
|
||||
opts={{ renderer: 'canvas' }}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user