feat: 删除额外配置信息呢

src/App.vue

@@ -8,7 +8,7 @@ const layout = [
   {x: 4, y: 2, w: 3, h: 1,},
   {x: 7, y: 1, w: 5, h: 4,},
   {x: 0, y: 1, w: 7, h: 1,},
-  {x: 0, y: 3, w: 7, h: 1,}
+  {x: 0, y: 3, w: 7, h: 2,}
 ].map((a, q) => ({
   ...a, title: `示例图${q + 1}`, chartData: a.w >= 4 ? [
     {type: 'bar', category: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: [120, 200, 150, 80, 70, 110, 130]},
@@ -31,7 +31,7 @@ const layout = [
 </script>
 
 <template>
-  <screen-chart :grid="{cols: 12, rows: 4}" :layout="layout"/>
+  <screen-chart :layout="layout"/>
 </template>
 
 <style scoped>

src/lib/Table2Chart/Components/global-echarts.vue

@@ -7,7 +7,6 @@ import * as echarts from "echarts";
 import {ECBasicOption} from "echarts/types/dist/shared";
 import {isNumber} from "lodash";
 import {computed, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
-import {debounce} from "lodash";
 
 interface Props {
   options?: ECBasicOption;
@@ -38,9 +37,6 @@ const getHeight = computed(() => {
 const chartRef = ref(null);
 let ro: ResizeObserver | null = null
 let chartInstance = null as unknown as echarts.ECharts;
-let handleR = debounce(function () {
-  chartInstance?.resize();
-}, 500)
 onMounted(() => {
   const el = chartRef.value;
   if (el) {
@@ -48,7 +44,9 @@ onMounted(() => {
       chartInstance = echarts.init(el);
       setOptions(ps.options);
       if (!ro) {
-        ro = new ResizeObserver(handleR);
+        ro = new ResizeObserver(function () {
+          chartInstance?.resize();
+        });
         ro.observe(el, {box: "border-box"});
       }
       chartInstance?.resize();

src/lib/Table2Chart/ScreenChart.vue

 <script lang="ts" setup>
 import {ScreenChartProps} from "./types/ScreenChart.typing.ts";
-import {gridItemStyle, mapContainerStyle} from "./funcs/mapStyle.ts";
+import {gridItemStyle, mapContainerStyle, getAllGridSize} from "./funcs/mapStyle.ts";
 import GlobalEcharts from "./Components/global-echarts.vue";
 import {mapToEchartsOptions} from "./funcs/mapToEchartsOptions.ts";
-import {nextTick, onMounted, onUnmounted, ref} from "vue";
-import {geoContainer} from "./funcs/mapGEOStyle.ts";
-import {debounce} from "lodash";
+import {nextTick, onMounted, onUnmounted, ref, computed} from "vue";
+import {geoContainer, } from "./funcs/mapGEOStyle.ts";
 
 const props = withDefaults(defineProps<ScreenChartProps>(), {
   gap: 16, containerPadding: 12, gridItemPadding: 12
@@ -18,18 +17,20 @@ onUnmounted(function () {
     ro = null
   }
 })
+const gridConfig = computed(() => {
+  return getAllGridSize(props.layout)
+})
 const startNow = function calcGEO() {
   const rect = containerRef.value.getBoundingClientRect()
   geoContainer.value.width = rect.width
   geoContainer.value.height = rect.height
 }
-const calcGEO = debounce(startNow, 500)
 onMounted(function () {
   nextTick(function () {
     isAllMounted.value = true
   })
   if (!ro) {
-    ro = new ResizeObserver(calcGEO)
+    ro = new ResizeObserver(startNow)
     ro.observe(containerRef.value, {box: 'border-box'})
     startNow()
   }
@@ -38,11 +39,12 @@ const containerRef = ref()
 </script>
 
 <template>
-  <div :style="mapContainerStyle(props)" class="w-full h-full pr" ref="containerRef">
+  <div :style="mapContainerStyle(props, gridConfig)" class="w-full h-full pr" ref="containerRef">
     <div v-for="(item, w) in props.layout" :key="w" :style="gridItemStyle(item, props)" class="flex flex-col">
       <div v-if="!item.renderTitle" class="w-full">{{ item.title }}</div>
       <component :is="item.renderTitle(item, props.layout)" v-else/>
-      <div v-if="isAllMounted" class="mt-[12px] w-full flex items-stretch justify-between" style="height: calc(100% - 12px - 12px)">
+      <div v-if="isAllMounted" class="mt-[12px] w-full flex items-stretch justify-between"
+           style="height: calc(100% - 12px - 12px)">
         <global-echarts v-for="(z,x) in item.chartData" :key="x" :options="mapToEchartsOptions(z)"/>
       </div>
     </div>

src/lib/Table2Chart/funcs/mapStyle.ts

@@ -5,7 +5,7 @@ export const gridItemStyle = function (item: SingleLayoutConf, props: ScreenChar
     return {
         gridColumn: `${item.x + 1} / span ${item.w}`,
         gridRow: `${item.y + 1} / span ${item.h}`,
-        background: 'red',
+        background: '#f1f1f1',
         boxSizing: 'border-box',
         // @ts-ignore
         padding: `${mapHeight(props.gridItemPadding)}px ${mapWidth(props.gridItemPadding)}px ${mapHeight(props.gridItemPadding)}px ${mapWidth(props.gridItemPadding)}px`,
@@ -13,15 +13,36 @@ export const gridItemStyle = function (item: SingleLayoutConf, props: ScreenChar
     }
 }
 
-export const mapContainerStyle = function (props: ScreenChartProps) {
+export function getAllGridSize(items: Array<SingleLayoutConf>) {
+    let maxCol = 0;
+    let maxRow = 0;
+
+    for (const item of items) {
+        // 计算当前元素的右边界和下边界
+        const rightEdge = item.x + item.w;
+        const bottomEdge = item.y + item.h;
+
+        // 更新最大列数和行数
+        if (rightEdge > maxCol) {
+            maxCol = rightEdge;
+        }
+        if (bottomEdge > maxRow) {
+            maxRow = bottomEdge;
+        }
+    }
+
+    return { rows: maxRow, cols: maxCol };
+}
+
+export const mapContainerStyle = function (props: ScreenChartProps, gridConfig: { rows: number, cols: number}) {
     return {
         display: 'grid',
         // @ts-ignore
         gridRowGap: mapHeight(props.gap) + 'px',
         // @ts-ignore
         gridColumnGap: mapWidth(props.gap) + 'px',
-        gridTemplateColumns: `repeat(${props.grid.cols}, 1fr)`,
-        gridTemplateRows: `repeat(${props.grid.rows}, 1fr)`,
+        gridTemplateColumns: `repeat(${gridConfig.cols}, 1fr)`,
+        gridTemplateRows: `repeat(${gridConfig.rows}, 1fr)`,
         boxSizing: 'border-box',
         // @ts-ignore
         padding: `${mapHeight(props.containerPadding)}px ${mapWidth(props.containerPadding)}px ${mapHeight(props.containerPadding)}px ${mapWidth(props.containerPadding)}px`,

src/lib/Table2Chart/types/ScreenChart.typing.ts

@@ -20,7 +20,6 @@ export type LayoutConfig = Array<SingleLayoutConf>
 export type ScreenChartProps = {
     layout: LayoutConfig;
     gap?: number;
-    grid: { rows: number, cols: number };
     containerPadding?: number;
     gridItemPadding?: number;
 }
\ No newline at end of file