pref: FundingPanel 黑金主题改造 融资融券面板

src/views/Company/components/MarketDataView/utils/chartOptions.ts

@@ -575,6 +575,154 @@ export const getFundingOption = (theme: Theme, fundingData: FundingDayData[]): E
   };
 };
 
+/**
+ * 生成融资融券图表配置 - 黑金主题
+ */
+export const getFundingDarkGoldOption = (fundingData: FundingDayData[]): EChartsOption => {
+  if (!fundingData || fundingData.length === 0) return {};
+
+  const dates = fundingData.map((item) => item.date.substring(5, 10));
+  const financing = fundingData.map((item) => item.financing.balance / 100000000);
+  const securities = fundingData.map((item) => item.securities.balance_amount / 100000000);
+
+  // 黑金主题色
+  const gold = '#D4AF37';
+  const goldLight = '#F4D03F';
+  const textColor = 'rgba(255, 255, 255, 0.85)';
+  const textMuted = 'rgba(255, 255, 255, 0.5)';
+  const borderColor = 'rgba(212, 175, 55, 0.2)';
+
+  return {
+    backgroundColor: 'transparent',
+    title: {
+      text: '融资融券余额走势',
+      left: 'center',
+      textStyle: {
+        color: gold,
+        fontSize: 16,
+        fontWeight: 'bold',
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(26, 26, 46, 0.95)',
+      borderColor: gold,
+      borderWidth: 1,
+      textStyle: {
+        color: textColor,
+      },
+      formatter: (params: unknown) => {
+        const paramsArr = params as { name: string; marker: string; seriesName: string; value: number }[];
+        let result = `<span style="color: ${gold}">${paramsArr[0].name}</span><br/>`;
+        paramsArr.forEach((param) => {
+          result += `${param.marker} ${param.seriesName}: <span style="color: ${goldLight}; font-weight: bold">${param.value.toFixed(2)}亿</span><br/>`;
+        });
+        return result;
+      },
+    },
+    legend: {
+      data: ['融资余额', '融券余额'],
+      bottom: 10,
+      textStyle: {
+        color: textColor,
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '15%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: dates,
+      axisLine: { lineStyle: { color: borderColor } },
+      axisLabel: { color: textMuted },
+      splitLine: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      name: '金额(亿)',
+      nameTextStyle: { color: textMuted },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+          type: 'dashed',
+        },
+      },
+      axisLine: { lineStyle: { color: borderColor } },
+      axisLabel: { color: textMuted },
+    },
+    series: [
+      {
+        name: '融资余额',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(212, 175, 55, 0.4)' },
+              { offset: 1, color: 'rgba(212, 175, 55, 0.05)' },
+            ],
+          },
+        },
+        lineStyle: {
+          color: gold,
+          width: 2,
+          shadowBlur: 10,
+          shadowColor: 'rgba(212, 175, 55, 0.5)',
+        },
+        itemStyle: {
+          color: gold,
+          borderColor: goldLight,
+          borderWidth: 2,
+        },
+        data: financing,
+      },
+      {
+        name: '融券余额',
+        type: 'line',
+        smooth: true,
+        symbol: 'diamond',
+        symbolSize: 8,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(255, 149, 0, 0.4)' },
+              { offset: 1, color: 'rgba(255, 149, 0, 0.05)' },
+            ],
+          },
+        },
+        lineStyle: {
+          color: '#FF9500',
+          width: 2,
+          shadowBlur: 10,
+          shadowColor: 'rgba(255, 149, 0, 0.5)',
+        },
+        itemStyle: {
+          color: '#FF9500',
+          borderColor: '#FFB347',
+          borderWidth: 2,
+        },
+        data: securities,
+      },
+    ],
+  };
+};
+
 /**
  * 生成股权质押图表配置
  */
@@ -694,5 +842,6 @@ export default {
   getKLineOption,
   getMinuteKLineOption,
   getFundingOption,
+  getFundingDarkGoldOption,
   getPledgeOption,
 };