From 79fd79be1719dc7e08d4f39a4db598792c82eb9a Mon Sep 17 00:00:00 2001
From: herenshan112 <hreenshan112@163.com>
Date: Fri, 12 Sep 2025 16:11:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bi=E5=9B=BE=E6=A0=87=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E7=82=B9=E5=87=BB=E5=92=8C=E8=89=B2=E5=BD=A9=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../appPageForm/echatesUnit/chart/bar.vue     | 303 +++++++++++-------
 .../appPageForm/echatesUnit/chart/barRace.vue |  33 +-
 .../appPageForm/echatesUnit/chart/line.vue    |  40 ++-
 .../appPageForm/echatesUnit/chart/pie.vue     |  43 ++-
 .../appPageForm/echatesUnit/chart/radar.vue   |  67 +++-
 5 files changed, 334 insertions(+), 152 deletions(-)

diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
index 34b0ce6..fa5b870 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
@@ -3,6 +3,110 @@
 @ 时间: 2025-06-26 15:20:37
 @ 备注: 柱状图
 -->
+
+<template>
+  <div>
+    <el-space wrap class="spaceBox">
+      <svg-icon icon-class="zydq" :size="20" />
+      <el-text>{{ props.data.title }}</el-text>
+    </el-space>
+    <el-form
+      v-if="props.data.search"
+      :inline="true"
+      label-width="auto"
+      class="demo-form-inline"
+    >
+      <el-form-item v-for="item in props.data.search.factor" :label="item.lable">
+        <el-date-picker
+          v-if="item.type == 3 && item.timeType == 'ymdhms'"
+          v-model="item.value"
+          type="daterange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'year'"
+          v-model="item.value"
+          type="yearrange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'month'"
+          v-model="item.value"
+          type="monthrange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'day'"
+          v-model="item.value"
+          type="daterange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'hour'"
+          v-model="item.value"
+          type="datetimerange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'minute'"
+          v-model="item.value"
+          type="datetimerange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-date-picker
+          v-else-if="item.type == 3 && item.timeType == 'second'"
+          v-model="item.value"
+          type="datetimerange"
+          range-separator="To"
+          start-placeholder="起始时间"
+          end-placeholder="结束时间"
+          value-format="x"
+        />
+        <el-select
+          v-else-if="item.options != null"
+          v-model="item.value"
+          clearable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in item.options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input v-else v-model="item.value" />
+      </el-form-item>
+      <el-form-item v-if="props.data.search.state">
+        <el-button v-if="searBut('search')" type="primary" @click="onSubmit"
+          >查询</el-button
+        >
+        <el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div ref="propsUuid" class="barBox" :id="props.uuid"></div>
+  </div>
+</template>
 <script lang="ts" setup>
 import { analyzeChartData } from "@/api/chart/index";
 import { echatsViews } from "@/api/DesignForm/types";
@@ -29,7 +133,8 @@ const props = withDefaults(
     },
   }
 );
-var myChart = ref<any>();
+const myChart = ref<any>();
+const propsUuid = ref(null)
 const seriesAnlay = (listVal: any[]) => {
   if (listVal && Array.isArray(listVal)) {
     listVal.forEach((item: any) => {
@@ -47,8 +152,9 @@ const seriesAnlay = (listVal: any[]) => {
 @ 功能: 画图
 */
 const drawPictures = () => {
+
   if (props.uuid && props.uuid != "") {
-    myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement);
+    
     analyzeChartData({
       tableKey: props.tableKey,
       chartId: props.uuid,
@@ -156,28 +262,58 @@ const drawPictures = () => {
     // });
     console.log("画图完毕---->", props);
     // myChart.value.resize();
-  }
+  }else {
+        myChart.value.setOption({
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "15%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
+          },
+          yAxis: {},
+          legend: {
+            data: ["销量", "销量科技"],
+          },
+          series: [
+            {
+              name: "销量",
+              type: "bar",
+              data: [5, 20, 36, 10, 10, 20],
+            },
+            {
+              name: "销量科技",
+              type: "bar",
+              data: [15, 21, 26, 70, 18, 29],
+            },
+          ],
+        });
+        // myChart.value.resize();
+      }
 };
 //获取当前激活的项目
 const controlData = computed(() => {
   return store.controlAttr;
 });
-watch(
-  () => props.kuandu,
-  (val: any) => {
-    console.log("画图完毕--改变-->", val);
-    drawPictures();
-  },
-  { deep: true }
-);
-watch(
-  () => props.data,
-  (val: any) => {
-    console.log("画图完毕--改变-->", val);
-    drawPictures();
-  },
-  { deep: true }
-);
+// watch(
+//   () => props.kuandu,
+//   (val: any) => {
+//     console.log("画图完毕--改变-->", val);
+//     drawPictures();
+//   },
+//   { deep: true }
+// );
+// watch(
+//   () => props.data,
+//   (val: any) => {
+//     console.log("画图完毕--改变-->", val);
+//     drawPictures();
+//   },
+//   { deep: true }
+// );
 /**
 @ 作者: 秦东
 @ 时间: 2025-06-26 09:47:45
@@ -196,114 +332,33 @@ const onSubmit = () => {
   drawPictures();
 };
 onMounted(() => {
-  nextTick(() => {
+  if(propsUuid.value){
+    myChart.value = echarts.init(propsUuid.value);
+    myChart.value.setOption({
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "15%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            data: [],
+          },
+          yAxis: {},
+          series: [
+          ],
+        });
     drawPictures();
-  });
+  }
+  
 });
+onUnmounted(() => {
+  if (myChart.value !== null && myChart.value !== undefined) {
+    myChart.value.dispose(); // 销毁实例，释放资源
+  }
+})
 </script>
-<template>
-  <div>
-    <el-space wrap class="spaceBox">
-      <svg-icon icon-class="zydq" :size="20" />
-      <el-text>{{ props.data.title }}</el-text>
-    </el-space>
-    <el-form
-      v-if="props.data.search"
-      :inline="true"
-      label-width="auto"
-      class="demo-form-inline"
-    >
-      <el-form-item v-for="item in props.data.search.factor" :label="item.lable">
-        <el-date-picker
-          v-if="item.type == 3 && item.timeType == 'ymdhms'"
-          v-model="item.value"
-          type="daterange"
-          range-separator="To"
-          start-placeholder="起始时间"
-          end-placeholder="结束时间"
-          value-format="x"
-        />
-        <el-date-picker
-          v-else-if="item.type == 3 && item.timeType == 'year'"
-          v-model="item.value"
-          type="yearrange"
-          range-separator="To"
-          start-placeholder="起始时间"
-          end-placeholder="结束时间"
-          value-format="x"
-        />
-        <el-date-picker
-          v-else-if="item.type == 3 && item.timeType == 'month'"
-          v-model="item.value"
-          type="monthrange"
-          range-separator="To"
-          start-placeholder="起始时间"
-          end-placeholder="结束时间"
-          value-format="x"
-        />
-        <el-date-picker
-          v-else-if="item.type == 3 && item.timeType == 'day'"
-          v-model="item.value"
-          type="daterange"
-          range-separator="To"
-          start-placeholder="起始时间"
-          end-placeholder="结束时间"
-          value-format="x"
-        />
-        <el-date-picker
-          v-else-if="item.type == 3 && item.timeType == 'hour'"
-          v-model="item.value"
-          type="datetimerange"
-          range-separator="To"
-          start-placeholder="起始时间"
-          end-placeholder="结束时间"
-          value-format="x"
-        />
-        <el-date-picker
-          v-else-if="item.type == 3 && item.timeType == 'minute'"
-          v-model="item.value"
-          type="datetimerange"
-          range-separator="To"
-          start-placeholder="起始时间"
-          end-placeholder="结束时间"
-          value-format="x"
-        />
-        <el-date-picker
-          v-else-if="item.type == 3 && item.timeType == 'second'"
-          v-model="item.value"
-          type="datetimerange"
-          range-separator="To"
-          start-placeholder="起始时间"
-          end-placeholder="结束时间"
-          value-format="x"
-        />
-        <el-select
-          v-else-if="item.options != null"
-          v-model="item.value"
-          clearable
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in item.options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-input v-else v-model="item.value" />
-      </el-form-item>
-      <el-form-item v-if="props.data.search.state">
-        <el-button v-if="searBut('search')" type="primary" @click="onSubmit"
-          >查询</el-button
-        >
-        <el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)"
-          >重置</el-button
-        >
-      </el-form-item>
-    </el-form>
-    <div class="barBox" :id="props.uuid"></div>
-  </div>
-</template>
 <style lang="scss" scoped>
 .barBox {
   height: 250px;
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue
index cc38a4b..688e4b6 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue
@@ -28,7 +28,8 @@ const props = withDefaults(
     },
   }
 );
-var myChart = ref<any>();
+const myChart = ref<any>();
+const barRaceChar = ref(null)
 /**
 @ 作者: 秦东
 @ 时间: 2025-06-26 11:34:21
@@ -36,7 +37,7 @@ var myChart = ref<any>();
 */
 const drawBarracetures = () => {
   if (props.uuid && props.uuid != "") {
-    myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement);
+    // myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement);
     analyzeChartData({
       tableKey: props.tableKey,
       chartId: props.uuid,
@@ -150,10 +151,34 @@ watch(
   { deep: true }
 );
 onMounted(() => {
-  nextTick(() => {
+  if(barRaceChar.value){
+    myChart.value = echarts.init(barRaceChar.value);
+    myChart.value.setOption({
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "15%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            data: [],
+          },
+          yAxis: {},
+          series: [
+          ],
+    });
+   nextTick(() => {
     drawBarracetures();
   });
+  }
+  
 });
+onUnmounted(() => {
+  if (myChart.value !== null && myChart.value !== undefined) {
+    myChart.value.dispose(); // 销毁实例，释放资源
+  }
+})
 </script>
 <template>
   <div>
@@ -250,7 +275,7 @@ onMounted(() => {
         >
       </el-form-item>
     </el-form>
-    <div class="barBox" :id="props.uuid"></div>
+    <div ref="barRaceChar" class="barBox" :id="props.uuid"></div>
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue
index 786dca3..fd113c8 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue
@@ -27,7 +27,8 @@ const props = withDefaults(
     },
   }
 );
-var myChartPie = ref<any>();
+const myChartPie = ref<any>();
+const lineChar = ref(null)
 const pinhuaOrzejiao = ref(false);
 
 /**
@@ -60,9 +61,9 @@ watch(
 */
 const drawLine = () => {
   if (props.uuid && props.uuid != "") {
-    myChartPie.value = echarts.init(
-      document.getElementById(props.uuid) as HTMLDivElement
-    );
+    // myChartPie.value = echarts.init(
+    //   document.getElementById(props.uuid) as HTMLDivElement
+    // );
     analyzeChartData({
       tableKey: props.tableKey,
       chartId: props.uuid,
@@ -175,10 +176,33 @@ watch(
   { deep: true }
 );
 onMounted(() => {
-  nextTick(() => {
-    drawLine();
-  });
+  if(lineChar.value){
+    myChartPie.value = echarts.init(lineChar.value);
+    myChartPie.value.setOption({
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "15%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            data: [],
+          },
+          yAxis: {},
+          series: [
+          ],
+    });
+    nextTick(() => {
+      drawLine();
+    });
+  }
 });
+onUnmounted(() => {
+  if (myChartPie.value !== null && myChartPie.value !== undefined) {
+    myChartPie.value.dispose(); // 销毁实例，释放资源
+  }
+})
 </script>
 <template>
   <div>
@@ -283,7 +307,7 @@ onMounted(() => {
         >
       </el-form-item>
     </el-form>
-    <div class="barBox" :id="props.uuid"></div>
+    <div ref="lineChar" class="barBox" :id="props.uuid"></div>
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue
index 5e210b1..3448941 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue
@@ -27,7 +27,8 @@ const props = withDefaults(
     },
   }
 );
-var myChartPie = ref<any>();
+const myChartPie = ref<any>();
+const pieChar = ref(null)
 /**
 @ 作者: 秦东
 @ 时间: 2025-06-26 11:34:21
@@ -35,9 +36,7 @@ var myChartPie = ref<any>();
 */
 const drawPie = () => {
   if (props.uuid && props.uuid != "") {
-    myChartPie.value = echarts.init(
-      document.getElementById(props.uuid) as HTMLDivElement
-    );
+    
     analyzeChartData({
       tableKey: props.tableKey,
       chartId: props.uuid,
@@ -154,10 +153,38 @@ watch(
   { deep: true }
 );
 onMounted(() => {
-  nextTick(() => {
-    drawPie();
-  });
+  if(pieChar.value){
+    myChartPie.value = echarts.init(pieChar.value);
+    myChartPie.value.setOption({
+          legend: {
+            left: "center",
+          },
+          series: [
+            {
+              type: "pie",
+              data: [
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
+              },
+            },
+          ],
+        });
+    nextTick(() => {
+      drawPie();
+    });
+  }
+  
 });
+onUnmounted(() => {
+  if (myChartPie.value !== null && myChartPie.value !== undefined) {
+    myChartPie.value.dispose(); // 销毁实例，释放资源
+  }
+})
 </script>
 <template>
   <div>
@@ -259,7 +286,7 @@ onMounted(() => {
         >
       </el-form-item>
     </el-form>
-    <div class="barBox" :id="props.uuid"></div>
+    <div ref="pieChar" class="barBox" :id="props.uuid"></div>
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue
index a790c10..3a5c9de 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue
@@ -27,7 +27,8 @@ const props = withDefaults(
     },
   }
 );
-var myChartPie = ref<any>();
+const myChartPie = ref<any>();
+const radarChar = ref(null)
 /**
 @ 作者: 秦东
 @ 时间: 2025-06-26 11:34:21
@@ -35,9 +36,9 @@ var myChartPie = ref<any>();
 */
 const drawRadar = () => {
   if (props.uuid && props.uuid != "") {
-    myChartPie.value = echarts.init(
-      document.getElementById(props.uuid) as HTMLDivElement
-    );
+    // myChartPie.value = echarts.init(
+    //   document.getElementById(props.uuid) as HTMLDivElement
+    // );
     analyzeChartData({
       tableKey: props.tableKey,
       chartId: props.uuid,
@@ -138,10 +139,60 @@ watch(
   { deep: true }
 );
 onMounted(() => {
-  nextTick(() => {
-    drawRadar();
-  });
+  if(pieChar.value){
+    myChartPie.value = echarts.init(pieChar.value);
+    myChartPie.value.setOption({
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "5%",
+            top: "5%",
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            data: ["Allocated Budget", "Actual Spending"],
+          },
+          radar: {
+            // shape: 'circle',
+            indicator: [
+              { name: "Sales", max: 6500 },
+              { name: "Administration", max: 16000 },
+              { name: "Information Technology", max: 30000 },
+              { name: "Customer Support", max: 38000 },
+              { name: "Development", max: 52000 },
+              { name: "Marketing", max: 25000 },
+            ],
+          },
+          series: [
+            {
+              name: "Budget vs spending",
+              type: "radar",
+              data: [
+                {
+                  value: [4200, 3000, 20000, 35000, 50000, 18000],
+                  name: "Allocated Budget",
+                },
+                {
+                  value: [5000, 14000, 28000, 26000, 42000, 21000],
+                  name: "Actual Spending",
+                },
+              ],
+            },
+          ],
+        });
+    nextTick(() => {
+      drawRadar();
+    });
+  }
 });
+onUnmounted(() => {
+  if (myChartPie.value !== null && myChartPie.value !== undefined) {
+    myChartPie.value.dispose(); // 销毁实例，释放资源
+  }
+})
 </script>
 <template>
   <div>
@@ -243,7 +294,7 @@ onMounted(() => {
         >
       </el-form-item>
     </el-form>
-    <div class="barBox" :id="props.uuid"></div>
+    <div ref="radarChar" class="barBox" :id="props.uuid"></div>
   </div>
 </template>
 <style lang="scss" scoped>