perf(PledgePanel): 添加 useMemo 缓存图表配置
- 使用 useMemo 缓存 getPledgeDarkGoldOption 计算结果 - 避免每次渲染重新计算图表配置 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
// src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx
|
||||
// 股权质押面板 - 黑金主题
|
||||
|
||||
import React, { memo } from 'react';
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
@@ -28,6 +28,12 @@ export interface PledgePanelProps {
|
||||
}
|
||||
|
||||
const PledgePanel: React.FC<PledgePanelProps> = ({ pledgeData }) => {
|
||||
// 缓存图表配置
|
||||
const chartOption = useMemo(() => {
|
||||
if (pledgeData.length === 0) return {};
|
||||
return getPledgeDarkGoldOption(pledgeData);
|
||||
}, [pledgeData]);
|
||||
|
||||
return (
|
||||
<VStack spacing={6} align="stretch">
|
||||
{/* 图表卡片 */}
|
||||
@@ -35,7 +41,7 @@ const PledgePanel: React.FC<PledgePanelProps> = ({ pledgeData }) => {
|
||||
{pledgeData.length > 0 && (
|
||||
<Box h="400px">
|
||||
<ECharts
|
||||
option={getPledgeDarkGoldOption(pledgeData)}
|
||||
option={chartOption}
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
theme="dark"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user