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, Tooltip as ChakraTooltip,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import ReactECharts from 'echarts-for-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'; import { getApiBase } from '@utils/apiConfig';
// 板块状态配置 // 板块状态配置
@@ -141,18 +141,7 @@ const generateChartOption = (themes) => {
}, },
}, },
legend: { legend: {
show: true, show: false,
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 },
})),
}, },
grid: { grid: {
left: '10%', left: '10%',
@@ -223,6 +212,9 @@ const ThemeCometChart = ({ onThemeSelect }) => {
dataCache[latestDate] = { dataCache[latestDate] = {
themes: result.data.themes || [], themes: result.data.themes || [],
currentDate: result.data.currentDate || '', 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, date: dateInfo.date,
themes: data.data.themes || [], themes: data.data.themes || [],
currentDate: data.data.currentDate || '', currentDate: data.data.currentDate || '',
totalLimitUp: data.data.totalLimitUp || 0,
totalEvents: data.data.totalEvents || 0,
indexChange: data.data.indexChange || 0,
}; };
} }
} catch (e) { } catch (e) {
@@ -251,6 +246,9 @@ const ThemeCometChart = ({ onThemeSelect }) => {
dataCache[item.date] = { dataCache[item.date] = {
themes: item.themes, themes: item.themes,
currentDate: item.currentDate, 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 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 isCurrentDateLoaded = currentDateStr && allDatesData[currentDateStr];
const chartOption = useMemo(() => generateChartOption(currentData.themes), [currentData.themes]); const chartOption = useMemo(() => generateChartOption(currentData.themes), [currentData.themes]);
@@ -323,23 +327,51 @@ const ThemeCometChart = ({ onThemeSelect }) => {
h="100%" h="100%"
minH="350px" minH="350px"
> >
{/* 标题栏 */} {/* 标题栏 - 两行布局 */}
<HStack spacing={3} mb={2}> <VStack spacing={1} mb={2} align="stretch">
<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' }} /> <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>
</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> </Box>
<VStack align="start" spacing={0} flex={1}> <HStack spacing={4}>
<HStack> <HStack spacing={1}>
<Text fontSize="lg" fontWeight="bold" color="#FFD700"> <Text fontSize="sm" fontWeight="bold" color="#FFD700">
连板情绪监测 连板情绪监测
</Text> </Text>
{loading && <Spinner size="sm" color="yellow.400" />} {loading && <Spinner size="sm" color="yellow.400" />}
</HStack> </HStack>
<Text fontSize="sm" color="whiteAlpha.500"> <HStack spacing={1}>
{currentSliderDate || currentData.currentDate} <CaretUpFilled style={{ color: '#52C41A', fontSize: '12px' }} />
</Text> <Text fontSize="xs" color="whiteAlpha.600">热度</Text>
</VStack> <Text fontSize="xs" fontWeight="bold" color="#52C41A">{currentData.totalLimitUp}</Text>
</HStack> </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"> <Box h="calc(100% - 100px)" position="relative">