feat: 使用定位实现布局+1补正

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

@@ -6,7 +6,7 @@
 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 {computed, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
 
 interface Props {
   options?: ECBasicOption;
@@ -35,28 +35,23 @@ const getHeight = computed(() => {
   }
 });
 const chartRef = ref(null);
-let ro: ResizeObserver | null = null
 let chartInstance = null as unknown as echarts.ECharts;
+const es = defineEmits(['node-inserted'])
 onMounted(() => {
   const el = chartRef.value;
+  const inst = getCurrentInstance()
+  console.log('inst', {inst})
   if (el) {
     nextTick(() => {
       chartInstance = echarts.init(el);
       setOptions(ps.options);
-      if (!ro) {
-        ro = new ResizeObserver(function () {
-          chartInstance?.resize();
-        });
-        ro.observe(el, {box: "border-box"});
-      }
+      es('node-inserted', {uid: inst!.uid, f: () => chartInstance})
       chartInstance?.resize();
     });
   }
 });
 onUnmounted(() => {
   chartInstance?.dispose();
-  ro?.disconnect();
-  ro = null
 });
 watch(
     () => ps.options,

src/lib/Table2Chart/ScreenChart.vue

 <script lang="ts" setup>
 import {ScreenChartProps} from "./types/ScreenChart.typing.ts";
-import {containerRef, getAllGridSize, gridItemStyle, mapContainerStyle} from "./funcs/mapStyle.ts";
+import {
+  allGraphRegister,
+  containerRef,
+  getAllGridSize,
+  gridItemStyle,
+  mapContainerStyle,
+  startNow
+} from "./funcs/mapStyle.ts";
 import GlobalEcharts from "./Components/global-echarts.vue";
 import {mapToEchartsOptions} from "./funcs/mapToEchartsOptions.ts";
 import {computed, nextTick, onMounted, onUnmounted, ref} from "vue";
-import {geoContainer,} from "./funcs/mapGEOStyle.ts";
+import {registerGraph} from "./funcs/mapStyle.ts";
 
 const props = withDefaults(defineProps<ScreenChartProps>(), {
   gap: 16, containerPadding: 12, gridItemPadding: 12
@@ -16,22 +23,12 @@ onUnmounted(function () {
     ro.disconnect()
     ro = null
   }
+  allGraphRegister.value = []
 })
 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 allStyle = window.getComputedStyle(containerRef.value)
-  // @ts-ignore
-  geoContainer.value.contentWidth = parseFloat(allStyle['width']) - parseFloat(allStyle['padding-left']) - parseFloat(allStyle['padding-right'])
-  // @ts-ignore
-  geoContainer.value.contentHeight = parseFloat(allStyle['height']) - parseFloat(allStyle['padding-top']) - parseFloat(allStyle['padding-bottom'])
-  // @ts-ignore
-  geoContainer.value.paddingAll = parseFloat(allStyle['paddingLeft'])
-}
+
 onMounted(function () {
   nextTick(function () {
     isAllMounted.value = true
@@ -51,7 +48,7 @@ onMounted(function () {
       <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)">
-        <global-echarts v-for="(z,x) in item.chartData" :key="x" :options="mapToEchartsOptions(z)"/>
+        <global-echarts @node-inserted="registerGraph" v-for="(z,x) in item.chartData" :key="x" :options="mapToEchartsOptions(z)"/>
       </div>
     </div>
   </div>

src/lib/Table2Chart/funcs/mapStyle.ts

 import {ScreenChartProps, SingleLayoutConf} from "../types/ScreenChart.typing.ts";
 import {geoContainer, mapHeight, mapWidth} from "./mapGEOStyle.ts";
-import {ref} from "vue";
+import {nextTick, ref} from "vue";
 
 export const containerRef = ref()
 export const gridItemStyle = function (item: SingleLayoutConf, props: ScreenChartProps, geoConf: { rows: number, cols: number}) {
@@ -11,7 +11,8 @@ export const gridItemStyle = function (item: SingleLayoutConf, props: ScreenChar
         // @ts-ignore
         padding: `${mapHeight(props.gridItemPadding)}px ${mapWidth(props.gridItemPadding)}px ${mapHeight(props.gridItemPadding)}px ${mapWidth(props.gridItemPadding)}px`,
         fontSize: `${mapWidth(14)}px`,
-        ...wholeGridGeo(item, geoConf, props.gap!)
+        ...wholeGridGeo(item, geoConf, props.gap!),
+        transition: 'left 0.3s ease, top 0.3 ease, width 0.3 ease, height 0.3 ease',
     }
 }
 
@@ -32,6 +33,33 @@ export const wholeGridGeo = function (item: SingleLayoutConf, geoConf: { rows: n
     };
 }
 
+export const allGraphRegister = ref<Array<{uid: string, f: Function}>>([])
+
+export function registerGraph(item: {uid: string, f: Function}) {
+    allGraphRegister.value.push(item)
+}
+
+export const startNow = function calcGEO() {
+    const rect = containerRef.value.getBoundingClientRect()
+    geoContainer.value.width = rect.width
+    geoContainer.value.height = rect.height
+    const allStyle = window.getComputedStyle(containerRef.value)
+    // @ts-ignore
+    geoContainer.value.contentWidth = parseFloat(allStyle['width']) - parseFloat(allStyle['padding-left']) - parseFloat(allStyle['padding-right'])
+    // @ts-ignore
+    geoContainer.value.contentHeight = parseFloat(allStyle['height']) - parseFloat(allStyle['padding-top']) - parseFloat(allStyle['padding-bottom'])
+    // @ts-ignore
+    geoContainer.value.paddingAll = parseFloat(allStyle['paddingLeft'])
+    nextTick(function () {
+
+    }).then(function () {
+        for (const item of allGraphRegister.value) {
+            const chart: any = item.f()
+            chart.resize();
+        }
+    })
+}
+
 export function getAllGridSize(items: Array<SingleLayoutConf>) {
     let maxCol = 0;
     let maxRow = 0;