适配移动端展示

web/frontend/src/components/KLineChart.vue

@@ -3,9 +3,11 @@ import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import * as echarts from 'echarts'
 import type { Candle } from '@/api/candles'
 import { useThemeStore } from '@/stores/theme'
+import { useMobile } from '@/composables/useMobile'
 
 const props = defineProps<{ data: Candle[] }>()
 const theme = useThemeStore()
+const { isMobile } = useMobile()
 
 const containerRef = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
@@ -32,8 +34,8 @@ function render() {
       tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
       legend: { data: ['K 线', '持仓量'], top: 0 },
       grid: [
-        { left: 60, right: 40, top: 40, height: '60%' },
-        { left: 60, right: 40, top: '78%', height: '18%' },
+        { left: isMobile.value ? 48 : 60, right: isMobile.value ? 12 : 40, top: 40, height: '60%' },
+        { left: isMobile.value ? 48 : 60, right: isMobile.value ? 12 : 40, top: '78%', height: '18%' },
       ],
       xAxis: [
         { type: 'category', data: dates, scale: true, boundaryGap: false },
@@ -100,6 +102,10 @@ watch(
     render()
   },
 )
+watch(isMobile, () => {
+  ensureChart()
+  render()
+})
 </script>
 
 <template>
@@ -111,4 +117,9 @@ watch(
   width: 100%;
   height: 560px;
 }
+@media (max-width: 768px) {
+  .chart {
+    height: 420px;
+  }
+}
 </style>