diff --git a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx index 781236dd..2e27deeb 100644 --- a/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx +++ b/src/views/Company/components/MarketDataView/components/panels/TradeDataPanel/KLineModule.tsx @@ -86,19 +86,11 @@ const KLineModule: React.FC = ({ return ( {/* 卡片头部 */} - + = ({ {/* 卡片内容 */} - + {mode === 'daily' ? ( // 日K线图 tradeData.length > 0 ? ( diff --git a/src/views/Company/components/MarketDataView/utils/chartOptions.ts b/src/views/Company/components/MarketDataView/utils/chartOptions.ts index 204810e4..74af9334 100644 --- a/src/views/Company/components/MarketDataView/utils/chartOptions.ts +++ b/src/views/Company/components/MarketDataView/utils/chartOptions.ts @@ -131,15 +131,17 @@ export const getKLineOption = ( ], grid: [ { - left: '10%', - right: '10%', + left: '3%', + right: '3%', height: '50%', + containLabel: true, }, { - left: '10%', - right: '10%', + left: '3%', + right: '3%', top: '65%', height: '20%', + containLabel: true, }, ], series: [ @@ -312,16 +314,18 @@ export const getMinuteKLineOption = (theme: Theme, minuteData: MinuteData | null }, grid: [ { - left: '8%', - right: '8%', + left: '3%', + right: '3%', top: '20%', height: '60%', + containLabel: true, }, { - left: '8%', - right: '8%', + left: '3%', + right: '3%', top: '83%', height: '12%', + containLabel: true, }, ], xAxis: [ @@ -483,7 +487,8 @@ export const getKLineDarkGoldOption = ( animation: true, legend: { data: ['K线', 'MA5', 'MA10', 'MA20'], - top: 10, + top: 5, + left: 'center', textStyle: { color: textColor, }, @@ -550,15 +555,17 @@ export const getKLineDarkGoldOption = ( ], grid: [ { - left: '10%', - right: '10%', + left: '3%', + right: '3%', height: '50%', + containLabel: true, }, { - left: '10%', - right: '10%', + left: '3%', + right: '3%', top: '65%', height: '20%', + containLabel: true, }, ], series: [ @@ -683,15 +690,6 @@ export const getMinuteKLineDarkGoldOption = (minuteData: MinuteData | null): ECh return { backgroundColor: 'transparent', - title: { - text: `${minuteData.name} 分钟K线 (${minuteData.trade_date})`, - left: 'center', - textStyle: { - color: gold, - fontSize: 16, - fontWeight: 'bold', - }, - }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, @@ -728,7 +726,8 @@ export const getMinuteKLineDarkGoldOption = (minuteData: MinuteData | null): ECh }, legend: { data: ['分钟K线', '均价线', '成交量'], - top: 35, + top: 5, + left: 'center', textStyle: { color: textColor, fontSize: 12, @@ -738,16 +737,18 @@ export const getMinuteKLineDarkGoldOption = (minuteData: MinuteData | null): ECh }, grid: [ { - left: '8%', - right: '8%', - top: '20%', - height: '60%', + left: '3%', + right: '3%', + top: '10%', + height: '65%', + containLabel: true, }, { - left: '8%', - right: '8%', - top: '83%', - height: '12%', + left: '3%', + right: '3%', + top: '78%', + height: '15%', + containLabel: true, }, ], xAxis: [