Initial commit
This commit is contained in:
832
src/views/EventDetail/components/LimitAnalyse.js
Normal file
832
src/views/EventDetail/components/LimitAnalyse.js
Normal file
@@ -0,0 +1,832 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Button,
|
||||
Select,
|
||||
Grid,
|
||||
GridItem,
|
||||
Spinner,
|
||||
Center,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
AlertTitle,
|
||||
AlertDescription,
|
||||
useToast,
|
||||
useColorModeValue,
|
||||
Badge,
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
StatHelpText,
|
||||
StatArrow,
|
||||
Divider,
|
||||
Flex,
|
||||
Icon,
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionButton,
|
||||
AccordionPanel,
|
||||
AccordionIcon,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
useDisclosure,
|
||||
Tag,
|
||||
Container,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
FiTrendingUp,
|
||||
FiBarChart2,
|
||||
FiPieChart,
|
||||
FiActivity,
|
||||
FiDownload,
|
||||
FiCalendar,
|
||||
FiTarget,
|
||||
FiZap,
|
||||
} from 'react-icons/fi';
|
||||
import 'echarts-wordcloud';
|
||||
|
||||
// 导入现有的卡片组件
|
||||
import Card from '../../../components/Card/Card';
|
||||
import CardBody from '../../../components/Card/CardBody';
|
||||
import CardHeader from '../../../components/Card/CardHeader';
|
||||
|
||||
// 导入图表组件
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
// 导入导航栏组件
|
||||
import HomeNavbar from '../../../components/Navbars/HomeNavbar';
|
||||
|
||||
// 板块关联TOP10数据计算
|
||||
function getSectorRelationTop10(sectorData) {
|
||||
// 股票代码 -> 所属板块集合
|
||||
const stockSectorMap = new Map();
|
||||
Object.entries(sectorData).forEach(([sector, sectorInfo]) => {
|
||||
(sectorInfo.stocks || []).forEach(stock => {
|
||||
const stockKey = stock.scode;
|
||||
if (!stockSectorMap.has(stockKey)) {
|
||||
stockSectorMap.set(stockKey, new Set());
|
||||
}
|
||||
(stock.core_sectors || []).forEach(s => stockSectorMap.get(stockKey).add(s));
|
||||
});
|
||||
});
|
||||
// 统计板块对
|
||||
const relations = new Map();
|
||||
stockSectorMap.forEach(sectors => {
|
||||
const arr = Array.from(sectors);
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
for (let j = i + 1; j < arr.length; j++) {
|
||||
const pair = [arr[i], arr[j]].sort().join(' - ');
|
||||
relations.set(pair, (relations.get(pair) || 0) + 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
// Top10
|
||||
const sorted = Array.from(relations.entries()).sort((a, b) => b[1] - a[1]).slice(0, 10);
|
||||
return {
|
||||
labels: sorted.map(([pair]) => pair),
|
||||
counts: sorted.map(([_, count]) => count)
|
||||
};
|
||||
}
|
||||
|
||||
// 板块关联关系图数据计算
|
||||
function getSectorRelationGraph(sectorData) {
|
||||
// 节点
|
||||
const nodes = [];
|
||||
const nodeMap = new Map();
|
||||
const links = [];
|
||||
const relationMap = new Map();
|
||||
const stockInSectorMap = new Map();
|
||||
let idx = 0;
|
||||
Object.entries(sectorData).forEach(([sector, data]) => {
|
||||
if (sector !== '其他' && sector !== '公告') {
|
||||
nodes.push({
|
||||
name: sector,
|
||||
value: data.count,
|
||||
symbolSize: Math.sqrt(data.count) * 8,
|
||||
category: idx % 10,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: `{b}\n(${data.count}只)`
|
||||
}
|
||||
});
|
||||
nodeMap.set(sector, nodes.length - 1);
|
||||
idx++;
|
||||
(data.stocks || []).forEach(stock => {
|
||||
const stockKey = stock.scode;
|
||||
if (!stockInSectorMap.has(stockKey)) {
|
||||
stockInSectorMap.set(stockKey, new Set());
|
||||
}
|
||||
stockInSectorMap.get(stockKey).add(sector);
|
||||
});
|
||||
}
|
||||
});
|
||||
// 统计边
|
||||
stockInSectorMap.forEach(sectors => {
|
||||
const arr = Array.from(sectors);
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
for (let j = i + 1; j < arr.length; j++) {
|
||||
const key = [arr[i], arr[j]].sort().join('-');
|
||||
relationMap.set(key, (relationMap.get(key) || 0) + 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
relationMap.forEach((value, key) => {
|
||||
const [source, target] = key.split('-');
|
||||
if (nodeMap.has(source) && nodeMap.has(target) && value >= 2) {
|
||||
links.push({
|
||||
source: nodeMap.get(source),
|
||||
target: nodeMap.get(target),
|
||||
value,
|
||||
lineStyle: {
|
||||
width: Math.log(value) * 2,
|
||||
opacity: 0.6,
|
||||
curveness: 0.3
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return { nodes, links };
|
||||
}
|
||||
|
||||
// 只取前10大板块，其余合并为“其他”
|
||||
function getTop10Sectors(chartData) {
|
||||
if (!chartData || !chartData.labels || !chartData.counts) return {labels: [], counts: []};
|
||||
const zipped = chartData.labels.map((label, i) => ({label, count: chartData.counts[i]}));
|
||||
const sorted = zipped.sort((a, b) => b.count - a.count);
|
||||
const top10 = sorted.slice(0, 10);
|
||||
const rest = sorted.slice(10);
|
||||
let otherCount = 0;
|
||||
rest.forEach(item => { otherCount += item.count; });
|
||||
const labels = top10.map(item => item.label);
|
||||
const counts = top10.map(item => item.count);
|
||||
if (otherCount > 0) {
|
||||
labels.push('其他');
|
||||
counts.push(otherCount);
|
||||
}
|
||||
return {labels, counts};
|
||||
}
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
const API_BASE = isProduction ? "" : process.env.REACT_APP_API_URL;
|
||||
// const API_BASE = 'http://49.232.185.254:5001'; // 改回5001端口，确保和后端一致
|
||||
|
||||
// 涨停分析服务
|
||||
const limitAnalyseService = {
|
||||
async getAvailableDates() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/limit-analyse/available-dates`);
|
||||
const text = await response.text();
|
||||
try {
|
||||
const data = JSON.parse(text);
|
||||
return data.data || [];
|
||||
} catch (e) {
|
||||
throw new Error('接口返回内容不是有效的 JSON，实际返回：' + text.slice(0, 100));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching available dates:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
async getAnalysisData(date) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/limit-analyse/data?date=${date}`);
|
||||
const data = await response.json();
|
||||
return data; // 修正：直接返回整个对象
|
||||
} catch (error) {
|
||||
console.error('Error fetching analysis data:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
async getSectorData(date) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/limit-analyse/sector-data?date=${date}`);
|
||||
const data = await response.json();
|
||||
return data.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error fetching sector data:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
async getWordCloudData(date) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/limit-analyse/word-cloud?date=${date}`);
|
||||
const data = await response.json();
|
||||
return data.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error fetching word cloud data:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
async exportData(date, exportType = 'excel') {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/limit-analyse/export-data`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ date, type: exportType }),
|
||||
});
|
||||
const data = await response.json();
|
||||
return data.data;
|
||||
} catch (error) {
|
||||
console.error('Error exporting data:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const LimitAnalyse = () => {
|
||||
const [selectedDate, setSelectedDate] = useState('');
|
||||
const [availableDates, setAvailableDates] = useState([]);
|
||||
const [analysisData, setAnalysisData] = useState(null);
|
||||
const [sectorData, setSectorData] = useState({}); // 改为对象
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const toast = useToast();
|
||||
|
||||
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
||||
const cardBg = useColorModeValue('white', 'gray.800');
|
||||
const borderColor = useColorModeValue('gray.200', 'gray.700');
|
||||
|
||||
// 加载可用日期
|
||||
useEffect(() => {
|
||||
const loadAvailableDates = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const dates = await limitAnalyseService.getAvailableDates();
|
||||
setAvailableDates(dates);
|
||||
if (dates.length > 0 && !selectedDate) {
|
||||
setSelectedDate(dates[0]);
|
||||
}
|
||||
} catch (error) {
|
||||
setError('加载日期列表失败');
|
||||
toast({
|
||||
title: '错误',
|
||||
description: '加载日期列表失败',
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadAvailableDates();
|
||||
}, []);
|
||||
|
||||
// 加载分析数据
|
||||
useEffect(() => {
|
||||
const loadAnalysisData = async () => {
|
||||
if (!selectedDate) return;
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const analysis = await limitAnalyseService.getAnalysisData(selectedDate);
|
||||
setAnalysisData(analysis);
|
||||
setSectorData(analysis.sector_data || {}); // sector_data为对象
|
||||
// 不再用 wordCloudData
|
||||
} catch (error) {
|
||||
setError('加载分析数据失败');
|
||||
toast({
|
||||
title: '错误',
|
||||
description: '加载分析数据失败',
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadAnalysisData();
|
||||
}, [selectedDate]);
|
||||
|
||||
// 由 sectorData 生成词云数据
|
||||
const wordCloudData = analysisData?.word_freq_data || [];
|
||||
|
||||
// 统计卡片数据
|
||||
const totalStocks = Object.values(sectorData || {}).reduce((sum, data) => sum + data.count, 0);
|
||||
const sectorCount = Object.keys(sectorData || {}).length;
|
||||
// 平均涨幅、最大涨幅
|
||||
const avgChange = analysisData?.avg_change || 0;
|
||||
const maxChange = analysisData?.max_change || 0;
|
||||
|
||||
// 饼图数据
|
||||
const chartOption = {
|
||||
title: {
|
||||
text: '涨停股票分布',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
top: 'middle',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '板块分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['60%', '50%'],
|
||||
data: Object.entries(sectorData || {}).map(([name, data]) => ({
|
||||
name,
|
||||
value: data.count,
|
||||
})),
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const wordCloudOption = {
|
||||
title: {
|
||||
text: '热点词汇',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'wordCloud',
|
||||
shape: 'circle',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
width: '70%',
|
||||
height: '80%',
|
||||
right: null,
|
||||
bottom: null,
|
||||
sizeRange: [12, 60],
|
||||
rotationRange: [-90, 90],
|
||||
rotationStep: 45,
|
||||
gridSize: 8,
|
||||
drawOutOfBound: false,
|
||||
textStyle: {
|
||||
fontFamily: 'sans-serif',
|
||||
fontWeight: 'bold',
|
||||
color: function () {
|
||||
return 'rgb(' + [
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(',') + ')';
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'self',
|
||||
textStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333',
|
||||
},
|
||||
},
|
||||
data: wordCloudData.map((word) => ({
|
||||
name: word.name,
|
||||
value: Number(word.value) || 0,
|
||||
})),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 统计卡片组件
|
||||
const StatCard = ({ icon, label, value, color, change }) => {
|
||||
const iconColor = useColorModeValue(`${color}.500`, `${color}.300`);
|
||||
const bgColor = useColorModeValue(`${color}.50`, `${color}.900`);
|
||||
|
||||
return (
|
||||
<Box
|
||||
p={4}
|
||||
borderRadius="lg"
|
||||
bg={bgColor}
|
||||
border="1px solid"
|
||||
borderColor={borderColor}
|
||||
_hover={{
|
||||
transform: 'translateY(-2px)',
|
||||
shadow: 'md',
|
||||
}}
|
||||
transition="all 0.3s ease"
|
||||
>
|
||||
<VStack align="start" spacing={2}>
|
||||
<HStack spacing={2}>
|
||||
<Icon as={icon} color={iconColor} boxSize={5} />
|
||||
<Text fontSize="sm" fontWeight="medium" color="gray.600">
|
||||
{label}
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text fontSize="2xl" fontWeight="bold" color={iconColor}>
|
||||
{value}
|
||||
</Text>
|
||||
{change && (
|
||||
<HStack spacing={1}>
|
||||
<StatArrow type={change > 0 ? 'increase' : 'decrease'} />
|
||||
<Text fontSize="sm" color={change > 0 ? 'green.500' : 'red.500'}>
|
||||
{Math.abs(change)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert status="error" borderRadius="lg">
|
||||
<AlertIcon />
|
||||
<AlertTitle>错误</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* 添加导航栏 */}
|
||||
<HomeNavbar />
|
||||
|
||||
{/* 添加容器和边距 */}
|
||||
<Container maxW="container.xl" px={6} py={8}>
|
||||
<VStack spacing={6} align="stretch">
|
||||
{/* 标题和日期选择 */}
|
||||
<Card bg={cardBg} shadow="xl" borderRadius="2xl">
|
||||
<CardHeader>
|
||||
<HStack justify="space-between" align="center">
|
||||
<VStack align="start" spacing={2}>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiTrendingUp} color="blue.500" boxSize={6} />
|
||||
<Text fontSize="xl" fontWeight="bold">
|
||||
涨停分析
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text color="gray.600">
|
||||
分析每日涨停股票的数据分布和热点词汇
|
||||
</Text>
|
||||
</VStack>
|
||||
<HStack spacing={3}>
|
||||
<Select
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
placeholder="选择日期"
|
||||
maxW="200px"
|
||||
size="md"
|
||||
>
|
||||
{availableDates.map((date) => (
|
||||
<option key={date} value={date}>
|
||||
{date}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<Button
|
||||
leftIcon={<FiDownload />}
|
||||
colorScheme="blue"
|
||||
variant="outline"
|
||||
onClick={() => handleExport('excel')}
|
||||
size="md"
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
{isLoading ? (
|
||||
<Center py={10}>
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" />
|
||||
<Text color="gray.600">加载数据中...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
) : (
|
||||
<>
|
||||
<Grid templateColumns="repeat(3, 1fr)" gap={6}>
|
||||
{/* 板块分布图表 */}
|
||||
<GridItem>
|
||||
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
|
||||
<CardHeader>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiPieChart} color="blue.500" boxSize={5} />
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
板块分布
|
||||
</Text>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ReactECharts option={{
|
||||
title: { text: '涨停股票分布', left: 'center', textStyle: { fontSize: 16, fontWeight: 'bold' } },
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
legend: { orient: 'vertical', left: 'left', top: 'middle' },
|
||||
series: [{
|
||||
name: '板块分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['60%', '50%'],
|
||||
data: getTop10Sectors(analysisData?.chart_data).labels.map((name, i) => ({ name, value: getTop10Sectors(analysisData?.chart_data).counts[i] })),
|
||||
emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
|
||||
}],
|
||||
}} style={{ height: '300px' }} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
{/* 板块股票数量柱状图 */}
|
||||
<GridItem>
|
||||
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
|
||||
<CardHeader>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiBarChart2} color="green.500" boxSize={5} />
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
板块股票数量
|
||||
</Text>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ReactECharts
|
||||
option={{
|
||||
title: { text: '板块股票数量分布', left: 'center', textStyle: { fontSize: 14 } },
|
||||
xAxis: { type: 'category', data: getTop10Sectors(analysisData?.chart_data).labels, axisLabel: { rotate: 45 } },
|
||||
yAxis: { type: 'value', name: '股票数量' },
|
||||
series: [{
|
||||
data: getTop10Sectors(analysisData?.chart_data).counts,
|
||||
type: 'bar',
|
||||
itemStyle: { color: '#5e72e4' }
|
||||
}]
|
||||
}}
|
||||
style={{ height: '300px' }}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
{/* 板块关联TOP10横向条形图 */}
|
||||
<GridItem>
|
||||
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
|
||||
<CardHeader>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiPieChart} color="purple.500" boxSize={5} />
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
板块关联TOP10
|
||||
</Text>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ReactECharts
|
||||
option={{
|
||||
title: { text: '板块关联度 Top 10', left: 'center', textStyle: { fontSize: 14 } },
|
||||
xAxis: { type: 'value', name: '共同持有股票数量' },
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: getSectorRelationTop10(sectorData).labels,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
width: 120,
|
||||
overflow: 'break',
|
||||
formatter: function(value) {
|
||||
// 自动换行
|
||||
if (value.length > 10) return value.replace(/(.{10})/g, '$1\n');
|
||||
return value;
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: getSectorRelationTop10(sectorData).counts,
|
||||
type: 'bar',
|
||||
itemStyle: { color: '#45b7d1' },
|
||||
label: { show: true, position: 'right' }
|
||||
}],
|
||||
grid: { left: 120, right: 20, top: 40, bottom: 40 }
|
||||
}}
|
||||
style={{ height: '300px' }}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
{/* 板块关联关系图+词云 */}
|
||||
<Grid templateColumns="repeat(2, 1fr)" gap={6} mt={8}>
|
||||
<GridItem>
|
||||
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
|
||||
<CardHeader>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiPieChart} color="purple.500" boxSize={5} />
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
板块关联关系图
|
||||
</Text>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ReactECharts
|
||||
option={{
|
||||
title: { text: '板块关联关系图', left: 'center', textStyle: { fontSize: 14 } },
|
||||
tooltip: {},
|
||||
series: [{
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
data: getSectorRelationGraph(sectorData).nodes,
|
||||
links: getSectorRelationGraph(sectorData).links,
|
||||
roam: true,
|
||||
label: { show: true },
|
||||
force: { repulsion: 300, gravity: 0.1, edgeLength: 120 },
|
||||
lineStyle: { width: 2, color: '#aaa', curveness: 0.2 },
|
||||
edgeSymbol: ['none', 'arrow'],
|
||||
edgeSymbolSize: 8
|
||||
}]
|
||||
}}
|
||||
style={{ height: '400px' }}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
<GridItem>
|
||||
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
|
||||
<CardHeader>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiActivity} color="orange.500" boxSize={5} />
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
热点词云
|
||||
</Text>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<ReactECharts
|
||||
option={wordCloudOption}
|
||||
style={{ height: '400px' }}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
{/* 数据统计 */}
|
||||
<Grid templateColumns="repeat(auto-fit, minmax(200px, 1fr))" gap={4} mt={8}>
|
||||
<GridItem colSpan={2}>
|
||||
<Card bg={cardBg} shadow="xl" borderRadius="2xl">
|
||||
<CardHeader>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiActivity} color="purple.500" boxSize={5} />
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
数据统计
|
||||
</Text>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Grid templateColumns="repeat(auto-fit, minmax(200px, 1fr))" gap={4}>
|
||||
<StatCard
|
||||
icon={FiTarget}
|
||||
label="涨停股票总数"
|
||||
value={totalStocks}
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
icon={FiBarChart2}
|
||||
label="涉及板块数"
|
||||
value={sectorCount}
|
||||
color="green"
|
||||
/>
|
||||
<StatCard
|
||||
icon={FiTrendingUp}
|
||||
label="平均涨幅"
|
||||
value={`${avgChange}%`}
|
||||
color="orange"
|
||||
/>
|
||||
<StatCard
|
||||
icon={FiZap}
|
||||
label="最大涨幅"
|
||||
value={`${maxChange}%`}
|
||||
color="red"
|
||||
/>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
{/* 板块手风琴 */}
|
||||
<Grid templateColumns="1fr" gap={6} mt={8}>
|
||||
{Object.keys(sectorData).length > 0 && (
|
||||
<GridItem>
|
||||
<Card bg={cardBg} shadow="xl" borderRadius="2xl">
|
||||
<CardHeader>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FiBarChart2} color="teal.500" boxSize={5} />
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
板块详细数据
|
||||
</Text>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Accordion allowMultiple>
|
||||
{Object.entries(sectorData).map(([sector, data], idx) => (
|
||||
<AccordionItem key={sector} border="none">
|
||||
<h2>
|
||||
<AccordionButton _expanded={{ bg: 'gray.100' }}>
|
||||
<Box flex="1" textAlign="left" fontWeight="bold">
|
||||
{sector} <Tag ml={2} colorScheme="blue">{data.count}</Tag>
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
<AccordionPanel pb={4}>
|
||||
<VStack align="stretch" spacing={4}>
|
||||
{(data.stocks || []).map((stock, sidx) => (
|
||||
<StockCard key={stock.scode} stock={stock} idx={sidx} />
|
||||
))}
|
||||
</VStack>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
)}
|
||||
</Grid>
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// 新增股票卡片组件和弹窗
|
||||
const StockCard = ({ stock, idx }) => {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
return (
|
||||
<Box p={4} borderRadius="lg" bg={useColorModeValue('gray.50', 'gray.700')} border="1px solid" borderColor={useColorModeValue('gray.200', 'gray.600')}>
|
||||
<HStack justify="space-between" align="start">
|
||||
<VStack align="start" spacing={1} flex={1}>
|
||||
<HStack>
|
||||
<Text fontWeight="bold" fontSize="md">{stock.sname} ({stock.scode})</Text>
|
||||
{stock.continuous_days && (
|
||||
<Tag colorScheme={stock.continuous_days.includes('首板') ? 'yellow' : 'red'} size="sm">
|
||||
{stock.continuous_days}
|
||||
</Tag>
|
||||
)}
|
||||
</HStack>
|
||||
<Text color="gray.500" fontSize="sm">涨停时间：{stock.formatted_time}</Text>
|
||||
<Box mt={2} mb={2}>
|
||||
<Text fontSize="sm" color="gray.700">{stock.brief}</Text>
|
||||
{stock.summary && (
|
||||
<Button onClick={onOpen} size="xs" colorScheme="yellow" variant="outline" ml={2} mt={2}>
|
||||
查看详情
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
<HStack spacing={2} mt={2} flexWrap="wrap">
|
||||
{(stock.core_sectors || []).map((sector) => (
|
||||
<Tag key={sector} colorScheme="blackAlpha" bg="#1b1b1b" color="#eacd76" fontWeight="500" borderRadius="md">
|
||||
{sector}
|
||||
</Tag>
|
||||
))}
|
||||
</HStack>
|
||||
</VStack>
|
||||
</HStack>
|
||||
{/* 详细摘要弹窗美化 */}
|
||||
{stock.summary && (
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent borderRadius="lg" p={0}>
|
||||
<ModalHeader p={4} bg="#1b1b1b" color="#eacd76" fontWeight="bold" fontSize="lg" borderTopRadius="lg">
|
||||
{stock.sname} ({stock.scode}) - 详细分析
|
||||
</ModalHeader>
|
||||
<ModalCloseButton color="#eacd76" top={3} right={3} />
|
||||
<ModalBody p={6} bg={useColorModeValue('white', 'gray.800')}>
|
||||
<Box fontSize="md" color="#222" lineHeight={1.9} whiteSpace="pre-line" dangerouslySetInnerHTML={{ __html: (stock.summary || '').replace(/<br\s*\/?>(\s*)/g, '\n').replace(/\n{2,}/g, '\n').replace(/\n/g, '<br/>') }} />
|
||||
</ModalBody>
|
||||
<ModalFooter bg={useColorModeValue('white', 'gray.800')} justifyContent="center">
|
||||
<Button onClick={onClose} colorScheme="yellow" borderRadius="md" px={8} fontWeight="bold">关闭</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default LimitAnalyse;
|
||||
Reference in New Issue
Block a user