fix(multiasset/derivative): 收益率走势/利差、利差柱状图 Y 轴自适应范围

web-app/src/views/multiasset/derivative/charts.js

@@ -21,6 +21,22 @@ function axisStyle(opts = {}) {
 // 30Y vs 10Y 国债收益率折线
 export function spreadDualLineOption(series, latest) {
   const dates = series.map((s) => s[0])
+  const y10 = series.map((s) => s[1])
+  const y30 = series.map((s) => s[2])
+  const sp = series.map((s) => s[3])
+  const padRange = (arr) => {
+    const lo = Math.min(...arr)
+    const hi = Math.max(...arr)
+    const pad = (hi - lo) * 0.15 || 0.05
+    return { min: +(lo - pad).toFixed(3), max: +(hi + pad).toFixed(3) }
+  }
+  const yieldRange = (() => {
+    const lo = Math.min(...y10, ...y30)
+    const hi = Math.max(...y10, ...y30)
+    const pad = (hi - lo) * 0.15 || 0.05
+    return { min: +(lo - pad).toFixed(3), max: +(hi + pad).toFixed(3) }
+  })()
+  const spreadRange = padRange(sp)
   return {
     tooltip: {
       ...tipOpt,
@@ -32,8 +48,8 @@ export function spreadDualLineOption(series, latest) {
         sorted.forEach((p) => {
           html += `${p.marker}${p.seriesName}: <b>${p.value.toFixed(3)}%</b><br/>`
         })
-        const sp = series[params[0].dataIndex]
-        html += `<span style="color:#7C4DFF">▎</span> 利差: <b>${sp[3].toFixed(3)}%</b>`
+        const r = series[params[0].dataIndex]
+        html += `<span style="color:#7C4DFF">▎</span> 利差: <b>${r[3].toFixed(3)}%</b>`
         return html
       },
     },
@@ -54,6 +70,8 @@ export function spreadDualLineOption(series, latest) {
         type: 'value',
         name: '收益率(%)',
         nameTextStyle: { color: C.mut, fontSize: 11 },
+        min: yieldRange.min,
+        max: yieldRange.max,
         ...axisStyle({
           axisLabel: { color: C.mut, fontSize: 11, formatter: (v) => v.toFixed(2) + '%' },
         }),
@@ -63,6 +81,8 @@ export function spreadDualLineOption(series, latest) {
         name: '利差(%)',
         nameTextStyle: { color: C.mut, fontSize: 11 },
         position: 'right',
+        min: spreadRange.min,
+        max: spreadRange.max,
         ...axisStyle({
           axisLabel: { color: C.mut, fontSize: 11, formatter: (v) => v.toFixed(2) + '%' },
         }),
@@ -121,6 +141,10 @@ export function spreadDualLineOption(series, latest) {
 // 30Y-10Y 利差柱状图（每日）
 export function spreadBarOption(series) {
   const dates = series.map((s) => s[0])
+  const vals = series.map((s) => s[3])
+  const lo = Math.min(...vals)
+  const hi = Math.max(...vals)
+  const pad = (hi - lo) * 0.15 || 0.02
   return {
     tooltip: {
       ...tipOpt,
@@ -139,6 +163,8 @@ export function spreadBarOption(series) {
     },
     yAxis: {
       type: 'value',
+      min: +(lo - pad).toFixed(3),
+      max: +(hi + pad).toFixed(3),
       ...axisStyle({
         axisLabel: { color: C.mut, fontSize: 11, formatter: (v) => v.toFixed(2) + '%' },
       }),