告警大屏css初稿，大屏小图echart测试页

src/components/Max/LeftTop.vue

@@ -0,0 +1,55 @@
+<template>
+    <div ref="chart" class="left-top-content" :style="style"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
+
+const props = defineProps(['style']);
+const chart = ref(null);
+const myChart = ref(null);
+
+const setupChart = () => {
+    myChart.value = echarts.init(chart.value);
+    
+    const option = {
+        title: {},
+        tooltip: {},
+        xAxis: {
+            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+        },
+        yAxis: {},
+        series: [{
+            name: '销量',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10, 20]
+        }]
+    };
+
+    myChart.value.setOption(option);
+};
+
+onMounted(() => {
+    setupChart();
+
+    const resizeObserver = new ResizeObserver(() => {
+        myChart.value.resize(); // 调整图表大小
+    });
+
+    resizeObserver.observe(chart.value.parentElement); // 观察父元素
+
+    onBeforeUnmount(() => {
+        resizeObserver.disconnect();
+        myChart.value.dispose(); // 清理 ECharts 实例
+    });
+});
+</script>
+
+<style scoped>
+.left-top-content {
+    width: 100%;  /* 与父容器宽度匹配 */
+    height: 100%; /* 与父容器高度匹配 */
+    position: relative; /* 允许子元素绝对定位 */
+}
+</style>