1378 lines
53 KiB
JavaScript
1378 lines
53 KiB
JavaScript
/**
|
||
* TreemapView - 概念层级矩形树图（玻璃态深空风格）
|
||
*
|
||
* 设计理念：
|
||
* - 半透明玻璃态数据终端，漂浮在深空中
|
||
* - 极光背景 + 毛玻璃卡片
|
||
* - 光影深度、弥散背景光、极致圆角
|
||
*
|
||
* 特性：
|
||
* 1. 默认显示3层（一级 → 二级 → 三级），面积按概念数量
|
||
* 2. 智能文字颜色：浅色背景用深色字，深色背景用浅色字
|
||
* 3. 点击矩形钻取进入，支持返回
|
||
* 4. 涨红跌绿颜色映射
|
||
*/
|
||
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||
import ReactECharts from 'echarts-for-react';
|
||
import {
|
||
Box,
|
||
VStack,
|
||
HStack,
|
||
Text,
|
||
Spinner,
|
||
Center,
|
||
Icon,
|
||
Flex,
|
||
Button,
|
||
IconButton,
|
||
Tooltip,
|
||
Badge,
|
||
useBreakpointValue,
|
||
} from '@chakra-ui/react';
|
||
import { keyframes } from '@emotion/react';
|
||
import {
|
||
FaLayerGroup,
|
||
FaSync,
|
||
FaExpand,
|
||
FaCompress,
|
||
FaHome,
|
||
FaArrowUp,
|
||
FaArrowDown,
|
||
FaCircle,
|
||
FaTh,
|
||
FaChevronRight,
|
||
FaArrowLeft,
|
||
} from 'react-icons/fa';
|
||
import { logger } from '../../../utils/logger';
|
||
|
||
// 极光动画 - 黑金色主题
|
||
const auroraAnimation = keyframes`
|
||
0%, 100% {
|
||
background-position: 0% 50%;
|
||
filter: hue-rotate(0deg);
|
||
}
|
||
25% {
|
||
background-position: 50% 100%;
|
||
filter: hue-rotate(10deg);
|
||
}
|
||
50% {
|
||
background-position: 100% 50%;
|
||
filter: hue-rotate(0deg);
|
||
}
|
||
75% {
|
||
background-position: 50% 0%;
|
||
filter: hue-rotate(-10deg);
|
||
}
|
||
`;
|
||
|
||
// 光晕脉冲动画
|
||
const glowPulse = keyframes`
|
||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||
50% { opacity: 0.6; transform: scale(1.05); }
|
||
`;
|
||
|
||
// 一级分类颜色映射（基础色 - 半透明玻璃态）
|
||
const LV1_COLORS = {
|
||
'人工智能': '#8B5CF6',
|
||
'半导体': '#3B82F6',
|
||
'机器人': '#10B981',
|
||
'消费电子': '#F59E0B',
|
||
'智能驾驶与汽车': '#EF4444',
|
||
'新能源与电力': '#06B6D4',
|
||
'空天经济': '#6366F1',
|
||
'国防军工': '#EC4899',
|
||
'政策与主题': '#14B8A6',
|
||
'周期与材料': '#F97316',
|
||
'大消费': '#A855F7',
|
||
'数字经济与金融科技': '#22D3EE',
|
||
'全球宏观与贸易': '#84CC16',
|
||
'医药健康': '#E879F9',
|
||
'前沿科技': '#38BDF8',
|
||
};
|
||
|
||
// 根据涨跌幅获取颜色（涨红跌绿 - 玻璃态半透明）
|
||
const getChangeColor = (value, baseColor = '#64748B') => {
|
||
if (value === null || value === undefined) return baseColor;
|
||
|
||
// 涨 - 红色系（调整透明度使其更柔和）
|
||
if (value > 7) return 'rgba(220, 38, 38, 0.85)'; // 深红
|
||
if (value > 5) return 'rgba(239, 68, 68, 0.8)';
|
||
if (value > 3) return 'rgba(248, 113, 113, 0.75)';
|
||
if (value > 1) return 'rgba(252, 165, 165, 0.7)';
|
||
if (value > 0) return 'rgba(254, 202, 202, 0.65)';
|
||
|
||
// 跌 - 绿色系
|
||
if (value < -7) return 'rgba(21, 128, 61, 0.85)'; // 深绿
|
||
if (value < -5) return 'rgba(22, 163, 74, 0.8)';
|
||
if (value < -3) return 'rgba(34, 197, 94, 0.75)';
|
||
if (value < -1) return 'rgba(74, 222, 128, 0.7)';
|
||
if (value < 0) return 'rgba(134, 239, 172, 0.65)';
|
||
|
||
return baseColor;
|
||
};
|
||
|
||
// 判断颜色是否为浅色（用于决定文字颜色）
|
||
const isLightColor = (color) => {
|
||
if (!color) return false;
|
||
|
||
// 处理 rgba 格式
|
||
const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
||
if (rgbaMatch) {
|
||
const [, r, g, b] = rgbaMatch.map(Number);
|
||
// 使用相对亮度公式
|
||
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
||
return luminance > 0.55;
|
||
}
|
||
|
||
// 处理 hex 格式
|
||
const hex = color.replace('#', '');
|
||
if (hex.length === 6) {
|
||
const r = parseInt(hex.substr(0, 2), 16);
|
||
const g = parseInt(hex.substr(2, 2), 16);
|
||
const b = parseInt(hex.substr(4, 2), 16);
|
||
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
||
return luminance > 0.55;
|
||
}
|
||
|
||
return false;
|
||
};
|
||
|
||
// 获取文字颜色（根据背景色自动适配）
|
||
const getTextColor = (bgColor, isTitle = false) => {
|
||
if (isLightColor(bgColor)) {
|
||
return isTitle ? '#1E293B' : '#334155';
|
||
}
|
||
return isTitle ? '#FFFFFF' : '#E2E8F0';
|
||
};
|
||
|
||
// 获取文字阴影（根据背景色自动适配）
|
||
const getTextShadow = (bgColor) => {
|
||
if (isLightColor(bgColor)) {
|
||
return 'rgba(255,255,255,0.8)';
|
||
}
|
||
return 'rgba(0,0,0,0.8)';
|
||
};
|
||
|
||
// 从 API 返回的名称中提取纯名称
|
||
const extractPureName = (apiName) => {
|
||
if (!apiName) return '';
|
||
return apiName.replace(/^\[(一级|二级|三级)\]\s*/, '');
|
||
};
|
||
|
||
// 格式化涨跌幅
|
||
const formatChangePercent = (value) => {
|
||
if (value === null || value === undefined) return '--';
|
||
const formatted = Math.abs(value).toFixed(2);
|
||
return value > 0 ? `+${formatted}%` : value < 0 ? `-${formatted}%` : '0.00%';
|
||
};
|
||
|
||
/**
|
||
* 主组件
|
||
*/
|
||
const ForceGraphView = ({
|
||
apiBaseUrl,
|
||
onSelectCategory,
|
||
selectedDate,
|
||
}) => {
|
||
const [hierarchy, setHierarchy] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
const [priceData, setPriceData] = useState({ lv1Map: {}, lv2Map: {}, lv3Map: {}, leafMap: {} });
|
||
const [priceLoading, setPriceLoading] = useState(false);
|
||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||
|
||
// 钻取状态：记录当前查看的路径
|
||
const [drillPath, setDrillPath] = useState(null);
|
||
|
||
const chartRef = useRef();
|
||
const containerRef = useRef();
|
||
|
||
const isMobile = useBreakpointValue({ base: true, md: false });
|
||
|
||
// 获取层级结构数据
|
||
const fetchHierarchy = useCallback(async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
try {
|
||
const response = await fetch(`${apiBaseUrl}/hierarchy`);
|
||
if (!response.ok) throw new Error('获取层级结构失败');
|
||
|
||
const data = await response.json();
|
||
setHierarchy(data.hierarchy || []);
|
||
|
||
logger.info('TreemapView', '层级结构加载完成', {
|
||
totalLv1: data.hierarchy?.length,
|
||
totalConcepts: data.total_concepts
|
||
});
|
||
} catch (err) {
|
||
logger.error('TreemapView', 'fetchHierarchy', err);
|
||
setError(err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [apiBaseUrl]);
|
||
|
||
// 获取层级涨跌幅数据
|
||
const fetchHierarchyPrice = useCallback(async () => {
|
||
setPriceLoading(true);
|
||
|
||
try {
|
||
let url = `${apiBaseUrl}/hierarchy/price`;
|
||
if (selectedDate) {
|
||
const dateStr = selectedDate.toISOString().split('T')[0];
|
||
url += `?trade_date=${dateStr}`;
|
||
}
|
||
|
||
const response = await fetch(url);
|
||
if (!response.ok) {
|
||
logger.warn('TreemapView', '获取层级涨跌幅失败', { status: response.status });
|
||
return;
|
||
}
|
||
|
||
const data = await response.json();
|
||
|
||
const lv1Map = {};
|
||
const lv2Map = {};
|
||
const lv3Map = {};
|
||
const leafMap = {};
|
||
|
||
(data.lv1_concepts || []).forEach(item => {
|
||
const pureName = extractPureName(item.concept_name);
|
||
lv1Map[pureName] = item;
|
||
});
|
||
(data.lv2_concepts || []).forEach(item => {
|
||
const pureName = extractPureName(item.concept_name);
|
||
lv2Map[pureName] = item;
|
||
});
|
||
(data.lv3_concepts || []).forEach(item => {
|
||
const pureName = extractPureName(item.concept_name);
|
||
lv3Map[pureName] = item;
|
||
});
|
||
(data.leaf_concepts || []).forEach(item => {
|
||
leafMap[item.concept_name] = item;
|
||
});
|
||
|
||
setPriceData({ lv1Map, lv2Map, lv3Map, leafMap });
|
||
} catch (err) {
|
||
logger.warn('TreemapView', '获取层级涨跌幅失败', { error: err.message });
|
||
} finally {
|
||
setPriceLoading(false);
|
||
}
|
||
}, [apiBaseUrl, selectedDate]);
|
||
|
||
useEffect(() => {
|
||
fetchHierarchy();
|
||
}, [fetchHierarchy]);
|
||
|
||
useEffect(() => {
|
||
if (hierarchy.length > 0) {
|
||
fetchHierarchyPrice();
|
||
}
|
||
}, [hierarchy, fetchHierarchyPrice]);
|
||
|
||
// 递归计算概念数量
|
||
const getConceptCount = useCallback((node) => {
|
||
if (!node) return 1;
|
||
|
||
// 如果是叶子节点（概念），返回1
|
||
if (node.concepts && !node.children) {
|
||
return node.concepts.length || 1;
|
||
}
|
||
|
||
// 如果有直接概念
|
||
let count = node.concepts?.length || 0;
|
||
|
||
// 递归计算子节点
|
||
if (node.children) {
|
||
node.children.forEach(child => {
|
||
count += getConceptCount(child);
|
||
});
|
||
}
|
||
|
||
return count || 1;
|
||
}, []);
|
||
|
||
// 根据钻取路径构建 Treemap 数据（使用概念数量作为面积）
|
||
const treemapData = useMemo(() => {
|
||
const { lv1Map, lv2Map, lv3Map, leafMap } = priceData;
|
||
|
||
// 根视图：显示所有一级，每个一级下显示二级和三级（不显示概念）
|
||
if (!drillPath) {
|
||
return hierarchy.map((lv1) => {
|
||
const lv1BaseColor = LV1_COLORS[lv1.name] || '#8B5CF6';
|
||
const lv1Price = lv1Map[lv1.name] || {};
|
||
const bgColor = getChangeColor(lv1Price.avg_change_pct, lv1BaseColor);
|
||
|
||
const lv1Node = {
|
||
name: lv1.name,
|
||
value: lv1.concept_count || getConceptCount(lv1),
|
||
itemStyle: {
|
||
color: bgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
borderWidth: 2,
|
||
borderRadius: 12,
|
||
},
|
||
data: {
|
||
level: 'lv1',
|
||
changePct: lv1Price.avg_change_pct,
|
||
stockCount: lv1Price.stock_count,
|
||
conceptCount: lv1.concept_count,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: bgColor,
|
||
},
|
||
children: [],
|
||
};
|
||
|
||
// 二级
|
||
if (lv1.children) {
|
||
lv1.children.forEach((lv2) => {
|
||
const lv2Price = lv2Map[lv2.name] || {};
|
||
const lv2BgColor = getChangeColor(lv2Price.avg_change_pct, lv1BaseColor);
|
||
const lv2ConceptCount = lv2.concept_count || getConceptCount(lv2);
|
||
|
||
const lv2Node = {
|
||
name: lv2.name,
|
||
value: lv2ConceptCount,
|
||
itemStyle: {
|
||
color: lv2BgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.08)',
|
||
borderWidth: 1,
|
||
borderRadius: 8,
|
||
},
|
||
data: {
|
||
level: 'lv2',
|
||
parentLv1: lv1.name,
|
||
changePct: lv2Price.avg_change_pct,
|
||
stockCount: lv2Price.stock_count,
|
||
conceptCount: lv2ConceptCount,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: lv2BgColor,
|
||
},
|
||
children: [],
|
||
};
|
||
|
||
// 三级（不显示概念）
|
||
if (lv2.children) {
|
||
lv2.children.forEach((lv3) => {
|
||
const lv3Price = lv3Map[lv3.name] || {};
|
||
const lv3BgColor = getChangeColor(lv3Price.avg_change_pct, lv1BaseColor);
|
||
const lv3ConceptCount = lv3.concepts?.length || 1;
|
||
|
||
lv2Node.children.push({
|
||
name: lv3.name,
|
||
value: lv3ConceptCount,
|
||
itemStyle: {
|
||
color: lv3BgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.05)',
|
||
borderWidth: 1,
|
||
borderRadius: 6,
|
||
},
|
||
data: {
|
||
level: 'lv3',
|
||
parentLv1: lv1.name,
|
||
parentLv2: lv2.name,
|
||
changePct: lv3Price.avg_change_pct,
|
||
stockCount: lv3Price.stock_count,
|
||
conceptCount: lv3ConceptCount,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: lv3BgColor,
|
||
hasChildren: lv3.concepts && lv3.concepts.length > 0,
|
||
},
|
||
});
|
||
});
|
||
}
|
||
|
||
lv1Node.children.push(lv2Node);
|
||
});
|
||
}
|
||
|
||
return lv1Node;
|
||
});
|
||
}
|
||
|
||
// 钻取到某个一级分类
|
||
if (drillPath.lv1 && !drillPath.lv2) {
|
||
const lv1 = hierarchy.find(h => h.name === drillPath.lv1);
|
||
if (!lv1) return [];
|
||
|
||
const lv1BaseColor = LV1_COLORS[lv1.name] || '#8B5CF6';
|
||
|
||
return (lv1.children || []).map((lv2) => {
|
||
const lv2Price = lv2Map[lv2.name] || {};
|
||
const lv2BgColor = getChangeColor(lv2Price.avg_change_pct, lv1BaseColor);
|
||
const lv2ConceptCount = lv2.concept_count || getConceptCount(lv2);
|
||
|
||
const lv2Node = {
|
||
name: lv2.name,
|
||
value: lv2ConceptCount,
|
||
itemStyle: {
|
||
color: lv2BgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
borderWidth: 2,
|
||
borderRadius: 12,
|
||
},
|
||
data: {
|
||
level: 'lv2',
|
||
parentLv1: lv1.name,
|
||
changePct: lv2Price.avg_change_pct,
|
||
stockCount: lv2Price.stock_count,
|
||
conceptCount: lv2ConceptCount,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: lv2BgColor,
|
||
},
|
||
children: [],
|
||
};
|
||
|
||
// 三级
|
||
if (lv2.children) {
|
||
lv2.children.forEach((lv3) => {
|
||
const lv3Price = lv3Map[lv3.name] || {};
|
||
const lv3BgColor = getChangeColor(lv3Price.avg_change_pct, lv1BaseColor);
|
||
const lv3ConceptCount = lv3.concepts?.length || 1;
|
||
|
||
const lv3Node = {
|
||
name: lv3.name,
|
||
value: lv3ConceptCount,
|
||
itemStyle: {
|
||
color: lv3BgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.08)',
|
||
borderWidth: 1,
|
||
borderRadius: 8,
|
||
},
|
||
data: {
|
||
level: 'lv3',
|
||
parentLv1: lv1.name,
|
||
parentLv2: lv2.name,
|
||
changePct: lv3Price.avg_change_pct,
|
||
stockCount: lv3Price.stock_count,
|
||
conceptCount: lv3ConceptCount,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: lv3BgColor,
|
||
},
|
||
children: [],
|
||
};
|
||
|
||
// 概念
|
||
if (lv3.concepts) {
|
||
lv3.concepts.forEach((conceptName) => {
|
||
const conceptPrice = leafMap[conceptName] || {};
|
||
const conceptBgColor = getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor);
|
||
lv3Node.children.push({
|
||
name: conceptName,
|
||
value: 1,
|
||
itemStyle: {
|
||
color: conceptBgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.05)',
|
||
borderWidth: 1,
|
||
borderRadius: 6,
|
||
},
|
||
data: {
|
||
level: 'concept',
|
||
parentLv1: lv1.name,
|
||
parentLv2: lv2.name,
|
||
parentLv3: lv3.name,
|
||
changePct: conceptPrice.avg_change_pct,
|
||
stockCount: conceptPrice.stock_count,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: conceptBgColor,
|
||
},
|
||
});
|
||
});
|
||
}
|
||
|
||
lv2Node.children.push(lv3Node);
|
||
});
|
||
}
|
||
|
||
// lv2 直接包含的概念
|
||
if (lv2.concepts) {
|
||
lv2.concepts.forEach((conceptName) => {
|
||
const conceptPrice = leafMap[conceptName] || {};
|
||
const conceptBgColor = getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor);
|
||
lv2Node.children.push({
|
||
name: conceptName,
|
||
value: 1,
|
||
itemStyle: {
|
||
color: conceptBgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.05)',
|
||
borderWidth: 1,
|
||
borderRadius: 6,
|
||
},
|
||
data: {
|
||
level: 'concept',
|
||
parentLv1: lv1.name,
|
||
parentLv2: lv2.name,
|
||
changePct: conceptPrice.avg_change_pct,
|
||
stockCount: conceptPrice.stock_count,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: conceptBgColor,
|
||
},
|
||
});
|
||
});
|
||
}
|
||
|
||
return lv2Node;
|
||
});
|
||
}
|
||
|
||
// 钻取到某个二级分类
|
||
if (drillPath.lv1 && drillPath.lv2 && !drillPath.lv3) {
|
||
const lv1 = hierarchy.find(h => h.name === drillPath.lv1);
|
||
if (!lv1) return [];
|
||
|
||
const lv2 = lv1.children?.find(c => c.name === drillPath.lv2);
|
||
if (!lv2) return [];
|
||
|
||
const lv1BaseColor = LV1_COLORS[lv1.name] || '#8B5CF6';
|
||
|
||
const result = [];
|
||
|
||
// 三级
|
||
if (lv2.children) {
|
||
lv2.children.forEach((lv3) => {
|
||
const lv3Price = lv3Map[lv3.name] || {};
|
||
const lv3BgColor = getChangeColor(lv3Price.avg_change_pct, lv1BaseColor);
|
||
const lv3ConceptCount = lv3.concepts?.length || 1;
|
||
|
||
const lv3Node = {
|
||
name: lv3.name,
|
||
value: lv3ConceptCount,
|
||
itemStyle: {
|
||
color: lv3BgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
borderWidth: 2,
|
||
borderRadius: 12,
|
||
},
|
||
data: {
|
||
level: 'lv3',
|
||
parentLv1: lv1.name,
|
||
parentLv2: lv2.name,
|
||
changePct: lv3Price.avg_change_pct,
|
||
stockCount: lv3Price.stock_count,
|
||
conceptCount: lv3ConceptCount,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: lv3BgColor,
|
||
},
|
||
children: [],
|
||
};
|
||
|
||
// 概念
|
||
if (lv3.concepts) {
|
||
lv3.concepts.forEach((conceptName) => {
|
||
const conceptPrice = leafMap[conceptName] || {};
|
||
const conceptBgColor = getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor);
|
||
lv3Node.children.push({
|
||
name: conceptName,
|
||
value: 1,
|
||
itemStyle: {
|
||
color: conceptBgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.05)',
|
||
borderWidth: 1,
|
||
borderRadius: 8,
|
||
},
|
||
data: {
|
||
level: 'concept',
|
||
parentLv1: lv1.name,
|
||
parentLv2: lv2.name,
|
||
parentLv3: lv3.name,
|
||
changePct: conceptPrice.avg_change_pct,
|
||
stockCount: conceptPrice.stock_count,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: conceptBgColor,
|
||
},
|
||
});
|
||
});
|
||
}
|
||
|
||
result.push(lv3Node);
|
||
});
|
||
}
|
||
|
||
// lv2 直接包含的概念
|
||
if (lv2.concepts) {
|
||
lv2.concepts.forEach((conceptName) => {
|
||
const conceptPrice = leafMap[conceptName] || {};
|
||
const conceptBgColor = getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor);
|
||
result.push({
|
||
name: conceptName,
|
||
value: 1,
|
||
itemStyle: {
|
||
color: conceptBgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
borderWidth: 2,
|
||
borderRadius: 12,
|
||
},
|
||
data: {
|
||
level: 'concept',
|
||
parentLv1: lv1.name,
|
||
parentLv2: lv2.name,
|
||
changePct: conceptPrice.avg_change_pct,
|
||
stockCount: conceptPrice.stock_count,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: conceptBgColor,
|
||
},
|
||
});
|
||
});
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
// 钻取到某个三级分类
|
||
if (drillPath.lv1 && drillPath.lv2 && drillPath.lv3) {
|
||
const lv1 = hierarchy.find(h => h.name === drillPath.lv1);
|
||
if (!lv1) return [];
|
||
|
||
const lv2 = lv1.children?.find(c => c.name === drillPath.lv2);
|
||
if (!lv2) return [];
|
||
|
||
const lv3 = lv2.children?.find(c => c.name === drillPath.lv3);
|
||
if (!lv3) return [];
|
||
|
||
const lv1BaseColor = LV1_COLORS[lv1.name] || '#8B5CF6';
|
||
|
||
return (lv3.concepts || []).map((conceptName) => {
|
||
const conceptPrice = leafMap[conceptName] || {};
|
||
const conceptBgColor = getChangeColor(conceptPrice.avg_change_pct, lv1BaseColor);
|
||
return {
|
||
name: conceptName,
|
||
value: 1,
|
||
itemStyle: {
|
||
color: conceptBgColor,
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
borderWidth: 2,
|
||
borderRadius: 12,
|
||
},
|
||
data: {
|
||
level: 'concept',
|
||
parentLv1: lv1.name,
|
||
parentLv2: lv2.name,
|
||
parentLv3: lv3.name,
|
||
changePct: conceptPrice.avg_change_pct,
|
||
stockCount: conceptPrice.stock_count,
|
||
baseColor: lv1BaseColor,
|
||
bgColor: conceptBgColor,
|
||
},
|
||
};
|
||
});
|
||
}
|
||
|
||
return [];
|
||
}, [hierarchy, priceData, drillPath, getConceptCount]);
|
||
|
||
// ECharts 配置 - 玻璃态深空风格
|
||
const chartOption = useMemo(() => {
|
||
// 玻璃态层级配置
|
||
const levels = [
|
||
{
|
||
// 根节点配置
|
||
itemStyle: {
|
||
borderColor: 'transparent',
|
||
borderWidth: 0,
|
||
gapWidth: 4,
|
||
},
|
||
},
|
||
{
|
||
// 第一层 - 主要分类
|
||
itemStyle: {
|
||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||
borderWidth: 3,
|
||
gapWidth: 4,
|
||
borderRadius: 16,
|
||
shadowBlur: 20,
|
||
shadowColor: 'rgba(139, 92, 246, 0.3)',
|
||
},
|
||
upperLabel: {
|
||
show: true,
|
||
height: 32,
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
padding: [0, 8],
|
||
formatter: (params) => {
|
||
const data = params.data?.data || {};
|
||
const changePct = data.changePct;
|
||
const changeStr = changePct !== undefined && changePct !== null
|
||
? ` ${formatChangePercent(changePct)}`
|
||
: '';
|
||
return `${params.name}${changeStr}`;
|
||
},
|
||
rich: {
|
||
name: {
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
}
|
||
}
|
||
},
|
||
color: (params) => {
|
||
const bgColor = params.data?.data?.bgColor;
|
||
return getTextColor(bgColor, true);
|
||
},
|
||
},
|
||
{
|
||
// 第二层
|
||
itemStyle: {
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
borderWidth: 2,
|
||
gapWidth: 3,
|
||
borderRadius: 12,
|
||
shadowBlur: 10,
|
||
shadowColor: 'rgba(139, 92, 246, 0.2)',
|
||
},
|
||
upperLabel: {
|
||
show: true,
|
||
height: 26,
|
||
fontSize: 12,
|
||
fontWeight: 'bold',
|
||
padding: [0, 6],
|
||
formatter: (params) => {
|
||
const data = params.data?.data || {};
|
||
const changePct = data.changePct;
|
||
const changeStr = changePct !== undefined && changePct !== null
|
||
? ` ${formatChangePercent(changePct)}`
|
||
: '';
|
||
return `${params.name}${changeStr}`;
|
||
},
|
||
},
|
||
},
|
||
{
|
||
// 第三层
|
||
itemStyle: {
|
||
borderColor: 'rgba(255, 255, 255, 0.08)',
|
||
borderWidth: 1,
|
||
gapWidth: 2,
|
||
borderRadius: 8,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTopLeft',
|
||
fontSize: 11,
|
||
padding: [4, 6],
|
||
formatter: (params) => {
|
||
const data = params.data?.data || {};
|
||
const bgColor = data.bgColor;
|
||
const changePct = data.changePct;
|
||
if (changePct !== undefined && changePct !== null) {
|
||
return `{name|${params.name}}\n{change|${formatChangePercent(changePct)}}`;
|
||
}
|
||
return params.name;
|
||
},
|
||
rich: {
|
||
name: {
|
||
fontSize: 11,
|
||
fontWeight: 'bold',
|
||
lineHeight: 16,
|
||
},
|
||
change: {
|
||
fontSize: 10,
|
||
lineHeight: 14,
|
||
}
|
||
}
|
||
},
|
||
},
|
||
{
|
||
// 第四层（概念层）
|
||
itemStyle: {
|
||
borderColor: 'rgba(255, 255, 255, 0.05)',
|
||
borderWidth: 1,
|
||
gapWidth: 2,
|
||
borderRadius: 6,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTopLeft',
|
||
fontSize: 10,
|
||
padding: [3, 5],
|
||
formatter: (params) => {
|
||
const data = params.data?.data || {};
|
||
const changePct = data.changePct;
|
||
if (changePct !== undefined && changePct !== null) {
|
||
return `{name|${params.name}}\n{change|${formatChangePercent(changePct)}}`;
|
||
}
|
||
return params.name;
|
||
},
|
||
rich: {
|
||
name: {
|
||
fontSize: 10,
|
||
fontWeight: 'bold',
|
||
lineHeight: 14,
|
||
},
|
||
change: {
|
||
fontSize: 9,
|
||
lineHeight: 12,
|
||
}
|
||
}
|
||
},
|
||
},
|
||
];
|
||
|
||
return {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(15, 23, 42, 0.9)',
|
||
borderColor: 'rgba(139, 92, 246, 0.4)',
|
||
borderWidth: 1,
|
||
borderRadius: 16,
|
||
padding: [14, 18],
|
||
extraCssText: 'backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);',
|
||
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: 200px;">
|
||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
|
||
<span style="
|
||
background: linear-gradient(135deg, ${data.baseColor || '#8B5CF6'}, ${data.baseColor || '#8B5CF6'}88);
|
||
color: white;
|
||
padding: 3px 12px;
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
box-shadow: 0 2px 8px ${data.baseColor || '#8B5CF6'}44;
|
||
">${levelMap[data.level] || '分类'}</span>
|
||
</div>
|
||
<div style="font-size: 17px; font-weight: bold; margin-bottom: 12px; color: #FFFFFF; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
|
||
${params.name}
|
||
</div>
|
||
${changePct !== undefined && changePct !== null ? `
|
||
<div style="
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: ${changePct > 0 ? 'rgba(248, 113, 113, 0.15)' : changePct < 0 ? 'rgba(74, 222, 128, 0.15)' : 'rgba(148, 163, 184, 0.15)'};
|
||
padding: 8px 14px;
|
||
border-radius: 12px;
|
||
margin-bottom: 12px;
|
||
border: 1px solid ${changePct > 0 ? 'rgba(248, 113, 113, 0.3)' : changePct < 0 ? 'rgba(74, 222, 128, 0.3)' : 'rgba(148, 163, 184, 0.3)'};
|
||
">
|
||
<span style="color: ${changeColor}; font-size: 14px;">${changeIcon}</span>
|
||
<span style="color: ${changeColor}; font-weight: bold; font-size: 20px; font-family: 'SF Mono', monospace;">
|
||
${formatChangePercent(changePct)}
|
||
</span>
|
||
</div>
|
||
` : ''}
|
||
<div style="color: #94A3B8; font-size: 12px; display: flex; gap: 12px;">
|
||
${data.stockCount ? `<span>📊 ${data.stockCount} 只股票</span>` : ''}
|
||
${data.conceptCount ? `<span>📁 ${data.conceptCount} 个概念</span>` : ''}
|
||
</div>
|
||
${data.level === 'concept' ? `
|
||
<div style="color: #A78BFA; font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);">
|
||
🔗 点击查看概念详情
|
||
</div>
|
||
` : data.level !== 'concept' ? `
|
||
<div style="color: #64748B; font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);">
|
||
📂 点击进入查看子分类
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
`;
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: 'treemap',
|
||
data: treemapData,
|
||
left: 8,
|
||
top: 60,
|
||
right: 8,
|
||
bottom: 50,
|
||
roam: false,
|
||
nodeClick: false,
|
||
breadcrumb: {
|
||
show: false,
|
||
},
|
||
levels: levels,
|
||
label: {
|
||
show: true,
|
||
formatter: '{b}',
|
||
},
|
||
// 动态设置文字颜色
|
||
labelLayout: (params) => {
|
||
return {};
|
||
},
|
||
itemStyle: {
|
||
borderRadius: 8,
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 30,
|
||
shadowColor: 'rgba(139, 92, 246, 0.5)',
|
||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||
},
|
||
},
|
||
animation: true,
|
||
animationDuration: 600,
|
||
animationEasing: 'cubicOut',
|
||
},
|
||
],
|
||
// 使用 visualMap 来控制文字颜色
|
||
visualMap: {
|
||
show: false,
|
||
type: 'continuous',
|
||
min: -10,
|
||
max: 10,
|
||
dimension: 'value',
|
||
inRange: {
|
||
// 这里可以添加颜色映射
|
||
},
|
||
},
|
||
};
|
||
}, [treemapData]);
|
||
|
||
// 图表事件
|
||
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');
|
||
return;
|
||
}
|
||
|
||
// 钻取进入
|
||
if (data.level === 'lv1') {
|
||
setDrillPath({ lv1: params.name });
|
||
} else if (data.level === 'lv2') {
|
||
setDrillPath({ lv1: data.parentLv1, lv2: params.name });
|
||
} else if (data.level === 'lv3') {
|
||
setDrillPath({ lv1: data.parentLv1, lv2: data.parentLv2, lv3: params.name });
|
||
}
|
||
|
||
logger.info('TreemapView', '钻取', { level: data.level, name: params.name });
|
||
},
|
||
}), []);
|
||
|
||
// 返回上一层
|
||
const handleGoBack = useCallback(() => {
|
||
if (!drillPath) return;
|
||
|
||
if (drillPath.lv3) {
|
||
setDrillPath({ lv1: drillPath.lv1, lv2: drillPath.lv2 });
|
||
} else if (drillPath.lv2) {
|
||
setDrillPath({ lv1: drillPath.lv1 });
|
||
} else if (drillPath.lv1) {
|
||
setDrillPath(null);
|
||
}
|
||
}, [drillPath]);
|
||
|
||
// 返回根视图
|
||
const handleGoHome = useCallback(() => {
|
||
setDrillPath(null);
|
||
}, []);
|
||
|
||
// 刷新数据
|
||
const handleRefresh = useCallback(() => {
|
||
fetchHierarchyPrice();
|
||
}, [fetchHierarchyPrice]);
|
||
|
||
// 全屏切换
|
||
const toggleFullscreen = useCallback(() => {
|
||
setIsFullscreen(prev => !prev);
|
||
}, []);
|
||
|
||
// 获取面包屑
|
||
const breadcrumbItems = useMemo(() => {
|
||
const items = [{ label: '全部分类', path: null }];
|
||
|
||
if (drillPath?.lv1) {
|
||
items.push({ label: drillPath.lv1, path: { lv1: drillPath.lv1 } });
|
||
}
|
||
if (drillPath?.lv2) {
|
||
items.push({ label: drillPath.lv2, path: { lv1: drillPath.lv1, lv2: drillPath.lv2 } });
|
||
}
|
||
if (drillPath?.lv3) {
|
||
items.push({ label: drillPath.lv3, path: { lv1: drillPath.lv1, lv2: drillPath.lv2, lv3: drillPath.lv3 } });
|
||
}
|
||
|
||
return items;
|
||
}, [drillPath]);
|
||
|
||
// 获取容器高度
|
||
const containerHeight = useMemo(() => {
|
||
if (isFullscreen) return '100vh';
|
||
return isMobile ? '500px' : '700px';
|
||
}, [isFullscreen, isMobile]);
|
||
|
||
if (loading) {
|
||
return (
|
||
<Center
|
||
h="500px"
|
||
bg="rgba(15, 23, 42, 0.6)"
|
||
borderRadius="3xl"
|
||
backdropFilter="blur(20px)"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.100"
|
||
>
|
||
<VStack spacing={4}>
|
||
<Box
|
||
position="relative"
|
||
>
|
||
<Box
|
||
position="absolute"
|
||
inset={-4}
|
||
bg="purple.500"
|
||
borderRadius="full"
|
||
filter="blur(20px)"
|
||
opacity={0.4}
|
||
animation={`${glowPulse} 2s ease-in-out infinite`}
|
||
/>
|
||
<Spinner size="xl" color="purple.400" thickness="4px" />
|
||
</Box>
|
||
<Text color="gray.400" fontSize="sm">正在构建矩形树图...</Text>
|
||
</VStack>
|
||
</Center>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Center
|
||
h="500px"
|
||
bg="rgba(15, 23, 42, 0.6)"
|
||
borderRadius="3xl"
|
||
backdropFilter="blur(20px)"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.100"
|
||
>
|
||
<VStack spacing={4}>
|
||
<Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
|
||
<Text color="gray.400">加载失败：{error}</Text>
|
||
<Button
|
||
colorScheme="purple"
|
||
size="sm"
|
||
onClick={fetchHierarchy}
|
||
borderRadius="full"
|
||
px={6}
|
||
>
|
||
重试
|
||
</Button>
|
||
</VStack>
|
||
</Center>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Box
|
||
ref={containerRef}
|
||
position={isFullscreen ? 'fixed' : 'relative'}
|
||
top={isFullscreen ? 0 : 'auto'}
|
||
left={isFullscreen ? 0 : 'auto'}
|
||
right={isFullscreen ? 0 : 'auto'}
|
||
bottom={isFullscreen ? 0 : 'auto'}
|
||
zIndex={isFullscreen ? 1000 : 'auto'}
|
||
borderRadius={isFullscreen ? '0' : '3xl'}
|
||
overflow="hidden"
|
||
border={isFullscreen ? 'none' : '1px solid'}
|
||
borderColor="whiteAlpha.100"
|
||
h={containerHeight}
|
||
bg="transparent"
|
||
>
|
||
{/* 极光背景层 */}
|
||
<Box
|
||
position="absolute"
|
||
top={0}
|
||
left={0}
|
||
right={0}
|
||
bottom={0}
|
||
bg="linear-gradient(135deg, #0F172A 0%, #1E1B4B 25%, #312E81 50%, #1E1B4B 75%, #0F172A 100%)"
|
||
backgroundSize="400% 400%"
|
||
animation={`${auroraAnimation} 15s ease infinite`}
|
||
/>
|
||
|
||
{/* 弥散光晕层 */}
|
||
<Box
|
||
position="absolute"
|
||
top="20%"
|
||
left="10%"
|
||
w="300px"
|
||
h="300px"
|
||
bg="radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%)"
|
||
filter="blur(60px)"
|
||
pointerEvents="none"
|
||
animation={`${glowPulse} 4s ease-in-out infinite`}
|
||
/>
|
||
<Box
|
||
position="absolute"
|
||
bottom="20%"
|
||
right="15%"
|
||
w="250px"
|
||
h="250px"
|
||
bg="radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%)"
|
||
filter="blur(50px)"
|
||
pointerEvents="none"
|
||
animation={`${glowPulse} 5s ease-in-out infinite 1s`}
|
||
/>
|
||
<Box
|
||
position="absolute"
|
||
top="50%"
|
||
right="30%"
|
||
w="200px"
|
||
h="200px"
|
||
bg="radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%)"
|
||
filter="blur(40px)"
|
||
pointerEvents="none"
|
||
animation={`${glowPulse} 6s ease-in-out infinite 2s`}
|
||
/>
|
||
|
||
{/* 顶部工具栏 - 毛玻璃风格 */}
|
||
<Flex
|
||
position="absolute"
|
||
top={isFullscreen ? '70px' : 4}
|
||
left={4}
|
||
right={4}
|
||
justify="space-between"
|
||
align="flex-start"
|
||
zIndex={10}
|
||
pointerEvents="none"
|
||
>
|
||
{/* 左侧标题和面包屑 */}
|
||
<VStack align="start" spacing={2} pointerEvents="auto">
|
||
<HStack spacing={3}>
|
||
{/* 返回按钮 */}
|
||
{drillPath && (
|
||
<Tooltip label="返回上一层" placement="bottom">
|
||
<IconButton
|
||
size="sm"
|
||
icon={<FaArrowLeft />}
|
||
onClick={handleGoBack}
|
||
bg="rgba(255, 255, 255, 0.1)"
|
||
backdropFilter="blur(20px)"
|
||
color="white"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.200"
|
||
borderRadius="full"
|
||
_hover={{
|
||
bg: 'rgba(139, 92, 246, 0.4)',
|
||
borderColor: 'purple.400',
|
||
transform: 'scale(1.05)',
|
||
}}
|
||
transition="all 0.2s"
|
||
aria-label="返回"
|
||
/>
|
||
</Tooltip>
|
||
)}
|
||
|
||
<HStack
|
||
bg="rgba(255, 255, 255, 0.08)"
|
||
backdropFilter="blur(20px)"
|
||
px={5}
|
||
py={2.5}
|
||
borderRadius="full"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.150"
|
||
boxShadow="0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
||
>
|
||
<Icon as={FaTh} color="purple.300" />
|
||
<Text color="white" fontWeight="bold" fontSize="sm">
|
||
概念矩形树图
|
||
</Text>
|
||
</HStack>
|
||
|
||
{/* 面包屑导航 */}
|
||
<HStack
|
||
bg="rgba(255, 255, 255, 0.06)"
|
||
backdropFilter="blur(20px)"
|
||
px={4}
|
||
py={2}
|
||
borderRadius="full"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.100"
|
||
spacing={2}
|
||
>
|
||
{breadcrumbItems.map((item, index) => (
|
||
<HStack key={index} spacing={2}>
|
||
{index > 0 && (
|
||
<Icon as={FaChevronRight} color="whiteAlpha.400" boxSize={3} />
|
||
)}
|
||
<Text
|
||
color={index === breadcrumbItems.length - 1 ? 'purple.300' : 'whiteAlpha.700'}
|
||
fontSize="sm"
|
||
fontWeight={index === breadcrumbItems.length - 1 ? 'bold' : 'normal'}
|
||
cursor={index < breadcrumbItems.length - 1 ? 'pointer' : 'default'}
|
||
_hover={index < breadcrumbItems.length - 1 ? { color: 'white' } : {}}
|
||
transition="color 0.2s"
|
||
onClick={() => {
|
||
if (index < breadcrumbItems.length - 1) {
|
||
setDrillPath(item.path);
|
||
}
|
||
}}
|
||
>
|
||
{item.label}
|
||
</Text>
|
||
</HStack>
|
||
))}
|
||
</HStack>
|
||
</HStack>
|
||
</VStack>
|
||
|
||
{/* 右侧控制按钮 */}
|
||
<HStack spacing={2} pointerEvents="auto">
|
||
{priceLoading && <Spinner size="sm" color="purple.300" />}
|
||
|
||
{drillPath && (
|
||
<Tooltip label="返回全部" placement="left">
|
||
<IconButton
|
||
size="sm"
|
||
icon={<FaHome />}
|
||
onClick={handleGoHome}
|
||
bg="rgba(255, 255, 255, 0.1)"
|
||
backdropFilter="blur(20px)"
|
||
color="white"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.200"
|
||
borderRadius="full"
|
||
_hover={{
|
||
bg: 'rgba(139, 92, 246, 0.4)',
|
||
borderColor: 'purple.400',
|
||
transform: 'scale(1.05)',
|
||
}}
|
||
transition="all 0.2s"
|
||
aria-label="返回全部"
|
||
/>
|
||
</Tooltip>
|
||
)}
|
||
|
||
<Tooltip label="刷新数据" placement="left">
|
||
<IconButton
|
||
size="sm"
|
||
icon={<FaSync />}
|
||
onClick={handleRefresh}
|
||
isLoading={priceLoading}
|
||
bg="rgba(255, 255, 255, 0.1)"
|
||
backdropFilter="blur(20px)"
|
||
color="white"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.200"
|
||
borderRadius="full"
|
||
_hover={{
|
||
bg: 'rgba(255, 255, 255, 0.2)',
|
||
borderColor: 'whiteAlpha.300',
|
||
transform: 'scale(1.05)',
|
||
}}
|
||
transition="all 0.2s"
|
||
aria-label="刷新"
|
||
/>
|
||
</Tooltip>
|
||
|
||
<Tooltip label={isFullscreen ? '退出全屏' : '全屏'} placement="left">
|
||
<IconButton
|
||
size="sm"
|
||
icon={isFullscreen ? <FaCompress /> : <FaExpand />}
|
||
onClick={toggleFullscreen}
|
||
bg="rgba(255, 255, 255, 0.1)"
|
||
backdropFilter="blur(20px)"
|
||
color="white"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.200"
|
||
borderRadius="full"
|
||
_hover={{
|
||
bg: 'rgba(255, 255, 255, 0.2)',
|
||
borderColor: 'whiteAlpha.300',
|
||
transform: 'scale(1.05)',
|
||
}}
|
||
transition="all 0.2s"
|
||
aria-label={isFullscreen ? '退出全屏' : '全屏'}
|
||
/>
|
||
</Tooltip>
|
||
</HStack>
|
||
</Flex>
|
||
|
||
{/* 底部图例 - 毛玻璃风格 */}
|
||
<Flex
|
||
position="absolute"
|
||
bottom={4}
|
||
left={4}
|
||
zIndex={10}
|
||
gap={2}
|
||
flexWrap="wrap"
|
||
pointerEvents="none"
|
||
>
|
||
<HStack
|
||
bg="rgba(255, 255, 255, 0.08)"
|
||
backdropFilter="blur(20px)"
|
||
px={4}
|
||
py={2}
|
||
borderRadius="full"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.100"
|
||
spacing={3}
|
||
boxShadow="0 4px 16px rgba(0, 0, 0, 0.2)"
|
||
>
|
||
<HStack spacing={2}>
|
||
<Box
|
||
w={3}
|
||
h={3}
|
||
borderRadius="full"
|
||
bg="linear-gradient(135deg, #EF4444, #DC2626)"
|
||
boxShadow="0 0 8px rgba(239, 68, 68, 0.5)"
|
||
/>
|
||
<Text color="whiteAlpha.800" fontSize="xs">涨</Text>
|
||
</HStack>
|
||
<Box w="1px" h={4} bg="whiteAlpha.200" />
|
||
<HStack spacing={2}>
|
||
<Box
|
||
w={3}
|
||
h={3}
|
||
borderRadius="full"
|
||
bg="linear-gradient(135deg, #22C55E, #16A34A)"
|
||
boxShadow="0 0 8px rgba(34, 197, 94, 0.5)"
|
||
/>
|
||
<Text color="whiteAlpha.800" fontSize="xs">跌</Text>
|
||
</HStack>
|
||
</HStack>
|
||
</Flex>
|
||
|
||
{/* 操作提示 */}
|
||
<Box
|
||
position="absolute"
|
||
bottom={4}
|
||
right={4}
|
||
zIndex={10}
|
||
pointerEvents="none"
|
||
>
|
||
<HStack
|
||
bg="rgba(255, 255, 255, 0.06)"
|
||
backdropFilter="blur(20px)"
|
||
px={4}
|
||
py={2}
|
||
borderRadius="full"
|
||
border="1px solid"
|
||
borderColor="whiteAlpha.100"
|
||
>
|
||
<Text color="whiteAlpha.500" fontSize="xs">
|
||
点击分类进入 · 点击概念查看详情
|
||
</Text>
|
||
</HStack>
|
||
</Box>
|
||
|
||
{/* ECharts 图表 */}
|
||
<ReactECharts
|
||
ref={chartRef}
|
||
option={chartOption}
|
||
style={{ height: '100%', width: '100%' }}
|
||
onEvents={onChartEvents}
|
||
opts={{ renderer: 'canvas' }}
|
||
/>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default ForceGraphView;
|