From ec0d786fd94544189a15156bffa607dcc1f002a7 Mon Sep 17 00:00:00 2001
From: herenshan112 <hreenshan112@163.com>
Date: Tue, 30 Sep 2025 09:07:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E6=A0=87=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/app/index.vue       |  7 ++-
 .../appPageForm/echatesUnit/chart/bar.vue     | 44 +++++++++++++++--
 .../appPageForm/echatesUnit/chart/line.vue    | 47 ++++++++++++++++++-
 3 files changed, 91 insertions(+), 7 deletions(-)

diff --git a/src/components/DesignForm/app/index.vue b/src/components/DesignForm/app/index.vue
index ba325bd..9c97524 100644
--- a/src/components/DesignForm/app/index.vue
+++ b/src/components/DesignForm/app/index.vue
@@ -54,7 +54,10 @@ import MapPage from "@/components/DesignForm/app/mapPage.vue";
 import CalendarPage from "@/components/DesignForm/app/calendar/calendar1/calendarPage.vue";
 import SearchSelect from "@/components/DesignForm/app/calendar/selectSearch.vue";
 import AKSelect from "@/components/DesignForm/public/form/select.vue";
+
 import ContainerPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/container.vue";
+import SeeContChart from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/seeContChart.vue";
+
 import exportPanel from "../exportPanel.vue";
 import importPanel from "../importPanel.vue";
 import { EpPropMergeType } from "element-plus/es/utils";
@@ -2394,7 +2397,9 @@ const isObject = (obj) => {
         />
       </el-col>
       <el-col v-if="viewType == 7" :span="24">
-        <ContainerPath
+        
+
+        <SeeContChart
           :echats-views="echatsViewsdf"
           :table-key="formBasicConfig.name"
           :types="1"
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 a17910f..2cc9c89 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
@@ -6,9 +6,24 @@
 
 <template>
   <div ref="biTitleBox">
-    <el-space  wrap class="spaceBox">
+    <!-- <el-space  wrap class="spaceBox">
       <svg-icon icon-class="zydq" :size="20" />
       <el-text>{{ props.data.title }}</el-text>
+    </el-space> -->
+    <el-space wrap class="spaceBox leftOrRight">
+      <div>
+        <svg-icon icon-class="zydq" :size="20" />
+        <el-text>{{ props.data.title }}</el-text>
+      </div>
+      <div class="qiehuan">
+        <el-space wrap class="spaceBox">
+          <svg-icon icon-class="chart" :size="20" @click="pickBar" />
+          <svg-icon icon-class="tb-zxt" :size="20" @click="pickLine" />
+          
+        </el-space>
+        
+      </div>
+      
     </el-space>
     <el-form
       v-if="props.data.search"
@@ -104,7 +119,7 @@
         >
       </el-form-item>
     </el-form>
-    <div ref="propsUuid" class="barBox" :id="props.uuid"></div>
+    <div ref="propsUuid" class="barBox" :id="props.uuid" v-loading="chartLoading"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -135,7 +150,7 @@ const props = withDefaults(
 );
 
 const setupkuandu = ref(props.kuandu>60?props.kuandu-60:600)
-
+const chartLoading = ref(false)
 const myChart = ref<any>();
 const propsUuid = ref(null)
 const seriesAnlay = (listVal: any[]) => {
@@ -169,7 +184,7 @@ watch(()=>props.kuandu,(val:number)=>{
 @ 功能: 画图
 */
 const drawPictures = () => {
-
+  chartLoading.value = true
   if (props.uuid && props.uuid != "") {
     console.log("改变狂赌---------->",props.kuandu,setupkuandu.value)
     myChart.value.resize(
@@ -222,6 +237,7 @@ const drawPictures = () => {
         };
 
         myChart.value.setOption(optChart);
+        chartLoading.value = false;
         // myChart.value.resize();
       } else {
         
@@ -254,7 +270,7 @@ const drawPictures = () => {
             },
           ],
         });
-        
+        chartLoading.value = false;
       }
     });
     // myChart.value.setOption({
@@ -317,7 +333,9 @@ const drawPictures = () => {
           ],
         });
         // myChart.value.resize();
+        chartLoading.value = false;
       }
+      
 };
 //获取当前激活的项目
 const controlData = computed(() => {
@@ -388,6 +406,17 @@ onUnmounted(() => {
     myChart.value.dispose(); // 销毁实例，释放资源
   }
 })
+//切换柱形图
+const pickBar = () => {
+  props.data.type="bar"
+  drawPictures();
+}
+//切换折线
+const pickLine = () =>{
+  
+  props.data.type="line"
+  drawPictures();
+}
 </script>
 <style lang="scss" scoped>
 .barBox {
@@ -410,4 +439,9 @@ onUnmounted(() => {
 .demo-form-inline .el-select {
   --el-select-width: 200px;
 }
+.leftOrRight {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>
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 9d26a79..80cd18a 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue
@@ -28,6 +28,7 @@ const props = withDefaults(
     },
   }
 );
+const chartLoading = ref(false)
 const myChartPie = ref<any>();
 const lineChar = ref(null)
 const pinhuaOrzejiao = ref(false);
@@ -72,6 +73,7 @@ watch(
 @ 功能: 画图
 */
 const drawLine = () => {
+  chartLoading.value = true
   if (props.uuid && props.uuid != "") {
     myChartPie.value.resize(
       {
@@ -124,6 +126,7 @@ const drawLine = () => {
         // }),
         myChartPie.value.setOption(optChart);
         // myChartPie.value.resize();
+        chartLoading.value = false;
       } else {
         myChartPie.value.setOption({
           tooltip: {
@@ -165,10 +168,52 @@ const drawLine = () => {
           ],
         });
         // myChartPie.value.resize();
+        chartLoading.value = false;
       }
     });
 
     // console.log("画图完毕---->", props);
+  }else{
+    myChartPie.value.setOption({
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "5%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          },
+          legend: {
+            data: ["销量", "销量科技"],
+          },
+          yAxis: {
+            type: "value",
+          },
+          series: [
+            {
+              name: "销量",
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              type: "line",
+              smooth: pinhuaOrzejiao.value,
+            },
+            {
+              name: "销量科技",
+              data: [822, 942, 951, 4, 1290, 1330, 1320],
+              type: "line",
+              smooth: pinhuaOrzejiao.value,
+            },
+          ],
+        });
+    chartLoading.value = false;
   }
 };
 /**
@@ -347,7 +392,7 @@ const pickLine = () =>{
         >
       </el-form-item>
     </el-form>
-    <div ref="lineChar" class="barBox" :id="props.uuid"></div>
+    <div ref="lineChar" class="barBox" :id="props.uuid" v-loading="chartLoading"></div>
   </div>
 </template>
 <style lang="scss" scoped>