折线图

src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue

@@ -4,6 +4,7 @@
 @ 备注: 折线图
 -->
 <script lang="ts" setup>
+import { analyzeChartData } from "@/api/chart/index";
 import { echatsViews } from "@/api/DesignForm/types";
 import * as echarts from "echarts";
 
@@ -33,40 +34,52 @@ const drawPie = () => {
     myChartPie.value = echarts.init(
       document.getElementById(props.uuid) as HTMLDivElement
     );
-    myChartPie.value.setOption({
+    analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => {
-      grid: {
+      console.log("火兔", data);
+      let optVal = data.data;
+      optVal.grid = {
         left: "2%",
         right: "2%",
-        bottom: "5%",
+        bottom: "15%",
         top: "15%",
         containLabel: true,
-      },
+      };
-      xAxis: {
+      myChartPie.value.setOption(optVal);
-        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: true,
-        },
-        {
-          name: "销量科技",
-          data: [822, 942, 951, 4, 1290, 1330, 1320],
-          type: "line",
-          smooth: true,
-        },
-      ],
     });
-    console.log("画图完毕---->", props);
+    // myChartPie.value.setOption({
+    //   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: true,
+    //     },
+    //     {
+    //       name: "销量科技",
+    //       data: [822, 942, 951, 4, 1290, 1330, 1320],
+    //       type: "line",
+    //       smooth: true,
+    //     },
+    //   ],
+    // });
+    // console.log("画图完毕---->", props);
   }
 };
 /**
@@ -82,7 +95,14 @@ const searBut = (val: string) => {
   }
   return false;
 };
-
+watch(
+  () => props.data,
+  (val: any) => {
+    console.log("画图完毕--改变-->", val);
+    drawPie();
+  },
+  { deep: true }
+);
 onMounted(() => {
   nextTick(() => {
     drawPie();