fix: 位置处理提取

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div :style="wrapperStyle">
-    <v-chart theme="dark" :option="option" autoresize />
-  </div>
+  <v-chart theme="dark" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -10,7 +8,11 @@ import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components'
 import config from './config'
 
 const props = defineProps({
@@ -25,7 +27,7 @@ use([
   BarChart,
   GridComponent,
   TooltipComponent,
-  LegendComponent,
+  LegendComponent
 ])
 
 const option = computed(() => {
@@ -33,14 +35,7 @@ const option = computed(() => {
 })
 
 const attr = toRef(props.chartData, 'attr')
-const wrapperStyle = computed(() => {
-  return {
-    left: `${attr.value.x}px`,
-    top: `${attr.value.y}px`,
-    width: `${attr.value.w}px`,
-    height: `${attr.value.h}px`,
-  }
-})
+
 </script>
 
 <style lang="scss" scoped></style>

src/views/chart/ContentEdit/hooks/useStyle.hook.ts

@@ -0,0 +1,17 @@
+interface AttrType {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export const useComponentStyle = (attr: AttrType, index: number) => {
+  const componentStyle = {
+    zIndex: index,
+    left: `${attr.x}px`,
+    top: `${attr.y}px`,
+    width: `${attr.w}px`,
+    height: `${attr.h}px`
+  }
+  return componentStyle
+}

src/views/chart/ContentEdit/index.vue

@@ -10,15 +10,15 @@
     @dragover="handleDragOver"
   >
     <div id="go-chart-edit-content">
-      <!-- 中间区域 -->
+      <!-- 展示 -->
       <EditRange>
-        <!-- 组件名称会重复，必须使用 id -->
         <component
           class="edit-content-chart" 
-          v-for="item in chartEditStore.getComponentList"
+          v-for="(item, index) in chartEditStore.getComponentList"
           :key="item.id"
           :is="item.key"
           :chartData="item"
+          :style="useComponentStyle(item.attr, index)"
         />
       </EditRange>
     </div>
@@ -37,6 +37,7 @@ import { EditBottom } from './components/EditBottom'
 import { useLayout } from './hooks/useLayout.hook'
 import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
+import { useComponentStyle } from './hooks/useStyle.hook'
 
 const chartEditStore = getChartEditStore()