feat(community): 连板情绪图表标题改为两行布局

- 第一行:日期 + 图例
  - 第二行:标题 + 热度数 + 事件数
  - 热度图标改为 CaretUpFilled(涨停含义)
This commit is contained in:
zdl
2026-01-13 14:56:37 +08:00
parent 59da1718ae
commit de9dfeccca

View File

@@ -34,7 +34,7 @@ import {
Tooltip as ChakraTooltip,
} from '@chakra-ui/react';
import ReactECharts from 'echarts-for-react';
import { ThunderboltOutlined } from '@ant-design/icons';
import { ThunderboltOutlined, CalendarOutlined, StockOutlined, CaretUpFilled } from '@ant-design/icons';
import { getApiBase } from '@utils/apiConfig';
// 板块状态配置
@@ -141,18 +141,7 @@ const generateChartOption = (themes) => {
},
},
legend: {
show: true,
top: 5,
right: 10,
orient: 'horizontal',
textStyle: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 13 },
itemWidth: 14,
itemHeight: 14,
data: Object.values(STATUS_CONFIG).map((s) => ({
name: s.name,
icon: 'circle',
itemStyle: { color: s.color },
})),
show: false,
},
grid: {
left: '10%',
@@ -223,6 +212,9 @@ const ThemeCometChart = ({ onThemeSelect }) => {
dataCache[latestDate] = {
themes: result.data.themes || [],
currentDate: result.data.currentDate || '',
totalLimitUp: result.data.totalLimitUp || 0,
totalEvents: result.data.totalEvents || 0,
indexChange: result.data.indexChange || 0,
};
}
@@ -237,6 +229,9 @@ const ThemeCometChart = ({ onThemeSelect }) => {
date: dateInfo.date,
themes: data.data.themes || [],
currentDate: data.data.currentDate || '',
totalLimitUp: data.data.totalLimitUp || 0,
totalEvents: data.data.totalEvents || 0,
indexChange: data.data.indexChange || 0,
};
}
} catch (e) {
@@ -251,6 +246,9 @@ const ThemeCometChart = ({ onThemeSelect }) => {
dataCache[item.date] = {
themes: item.themes,
currentDate: item.currentDate,
totalLimitUp: item.totalLimitUp,
totalEvents: item.totalEvents,
indexChange: item.indexChange,
};
}
});
@@ -280,7 +278,13 @@ const ThemeCometChart = ({ onThemeSelect }) => {
// 获取当前显示的数据
const currentDateStr = availableDates[sliderIndex]?.date;
const currentData = allDatesData[currentDateStr] || { themes: [], currentDate: '' };
const currentData = allDatesData[currentDateStr] || {
themes: [],
currentDate: '',
totalLimitUp: 0,
totalEvents: 0,
indexChange: 0
};
const isCurrentDateLoaded = currentDateStr && allDatesData[currentDateStr];
const chartOption = useMemo(() => generateChartOption(currentData.themes), [currentData.themes]);
@@ -323,23 +327,51 @@ const ThemeCometChart = ({ onThemeSelect }) => {
h="100%"
minH="350px"
>
{/* 标题栏 */}
<HStack spacing={3} mb={2}>
<Box p={2} bg="rgba(255,215,0,0.15)" borderRadius="lg" border="1px solid rgba(255,215,0,0.3)">
<ThunderboltOutlined style={{ color: '#FFD700', fontSize: '20px' }} />
</Box>
<VStack align="start" spacing={0} flex={1}>
<HStack>
<Text fontSize="lg" fontWeight="bold" color="#FFD700">
连板情绪监测
{/* 标题栏 - 两行布局 */}
<VStack spacing={1} mb={2} align="stretch">
{/* 第一行:日期 + 图例 */}
<HStack justify="space-between">
<HStack spacing={1}>
<CalendarOutlined style={{ color: 'rgba(255,255,255,0.5)', fontSize: '12px' }} />
<Text fontSize="xs" color="whiteAlpha.600">
{currentSliderDate || currentData.currentDate}
</Text>
{loading && <Spinner size="sm" color="yellow.400" />}
</HStack>
<Text fontSize="sm" color="whiteAlpha.500">
{currentSliderDate || currentData.currentDate}
</Text>
</VStack>
</HStack>
{/* 图例 */}
<HStack spacing={3}>
{Object.values(STATUS_CONFIG).map((status) => (
<HStack key={status.name} spacing={1}>
<Box w="8px" h="8px" borderRadius="full" bg={status.color} />
<Text fontSize="xs" color="whiteAlpha.700">{status.name}</Text>
</HStack>
))}
</HStack>
</HStack>
{/* 第二行:标题 + 热度 + 事件 */}
<HStack spacing={2}>
<Box p={1.5} bg="rgba(255,215,0,0.15)" borderRadius="md" border="1px solid rgba(255,215,0,0.3)">
<ThunderboltOutlined style={{ color: '#FFD700', fontSize: '14px' }} />
</Box>
<HStack spacing={4}>
<HStack spacing={1}>
<Text fontSize="sm" fontWeight="bold" color="#FFD700">
连板情绪监测
</Text>
{loading && <Spinner size="sm" color="yellow.400" />}
</HStack>
<HStack spacing={1}>
<CaretUpFilled style={{ color: '#52C41A', fontSize: '12px' }} />
<Text fontSize="xs" color="whiteAlpha.600">热度</Text>
<Text fontSize="xs" fontWeight="bold" color="#52C41A">{currentData.totalLimitUp}</Text>
</HStack>
<HStack spacing={1}>
<ThunderboltOutlined style={{ color: '#FFD700', fontSize: '12px' }} />
<Text fontSize="xs" color="whiteAlpha.600">事件</Text>
<Text fontSize="xs" fontWeight="bold" color="#FFD700">{currentData.totalEvents}</Text>
</HStack>
</HStack>
</HStack>
</VStack>
{/* 图表区域 */}
<Box h="calc(100% - 100px)" position="relative">