feat(community): 连板情绪图表标题改为两行布局
- 第一行:日期 + 图例 - 第二行:标题 + 热度数 + 事件数 - 热度图标改为 CaretUpFilled(涨停含义)
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user