From a71180b71b16a2c8d3724cd3d37d6460225624a0 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 26 Jan 2022 17:38:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BD=8D=E7=BD=AE=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E6=8F=90=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Bars/BarCommon/index.vue           | 21 +++++++------------
 .../chart/ContentEdit/hooks/useStyle.hook.ts  | 17 +++++++++++++++
 src/views/chart/ContentEdit/index.vue         |  7 ++++---
 3 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 src/views/chart/ContentEdit/hooks/useStyle.hook.ts

diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index 1b29609e..e3773fb9 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/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>
diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
new file mode 100644
index 00000000..a16c9630
--- /dev/null
+++ b/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
+}
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 0defbf56..66b110bf 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/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()