优化

report-ui/src/utils/screen.js

@@ -31,4 +31,4 @@ export function eventBusParams(optionsSetup, optionsData, callback) {
       callback(optionsData.dynamicData, optionsSetup)
     }
   });
-}
+}

report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-select.js

@@ -3,7 +3,7 @@
  * @Author: qianlishi qianlishi@anji-plus.com
  * @Date: 2023-01-09 13:02:59
  * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2023-01-12 14:39:29
+ * @LastEditTime: 2023-01-12 16:44:50
  */
 
 export const widgetSelect = {

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue

@@ -94,6 +94,7 @@ export default {
       this.optionsSetup,
       this.optionsData,
       (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
         this.getEchartData(dynamicData, optionsSetup);
       }
     );

report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import { eventBusParams } from "@/utils/screen";
 export default {
   name: "WidgetBarlinechart",
   components: {},
@@ -128,14 +127,6 @@ export default {
     this.optionsCollapse = this.value.collapse;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
-
-    eventBusParams(
-      this.optionsSetup,
-      this.optionsData,
-      (dynamicData, optionsSetup) => {
-        this.getEchartData(dynamicData, optionsSetup);
-      }
-    );
   },
   methods: {
     // 修改图标options属性

report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue

@@ -1,16 +1,17 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "WidgetLinechart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -20,17 +21,17 @@ export default {
         title: {
           text: "",
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c}%"
+          formatter: "{a} <br/>{b} : {c}%",
         },
         legend: {
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         xAxis: {
           type: "category",
@@ -38,30 +39,30 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         yAxis: {
           type: "value",
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         series: [
           {
             data: [],
-            type: "line"
-          }
-        ]
+            type: "line",
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -72,9 +73,9 @@ export default {
         height: this.optionsStyle.height + "px",
         left: this.optionsStyle.left + "px",
         top: this.optionsStyle.top + "px",
-        background: this.optionsSetup.background
+        background: this.optionsSetup.background,
       };
-    }
+    },
   },
   watch: {
     value: {
@@ -85,8 +86,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
     this.optionsStyle = this.value.position;
@@ -94,6 +95,14 @@ export default {
     this.optionsCollapse = this.value.collapse;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -140,7 +149,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -153,23 +162,23 @@ export default {
           textStyle: {
             // 坐标文字颜色
             color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX
-          }
+            fontSize: optionsSetup.fontSizeX,
+          },
         },
         axisLine: {
           show: true,
           lineStyle: {
             color: optionsSetup.lineColorX,
             width: optionsSetup.lineWidthX,
-          }
+          },
         },
         splitLine: {
           show: optionsSetup.isShowSplitLineX,
           lineStyle: {
             color: optionsSetup.splitLineColorX,
             width: optionsSetup.splitLineWidthX,
-          }
-        }
+          },
+        },
       };
       this.options.xAxis = xAxis;
     },
@@ -187,7 +196,7 @@ export default {
         name: optionsSetup.textNameY,
         nameTextStyle: {
           color: optionsSetup.nameColorY,
-          fontSize: optionsSetup.nameFontSizeY
+          fontSize: optionsSetup.nameFontSizeY,
         },
         // 轴反转
         inverse: optionsSetup.reversalY,
@@ -198,23 +207,23 @@ export default {
           textStyle: {
             // 坐标文字颜色
             color: optionsSetup.colorY,
-            fontSize: optionsSetup.fontSizeY
-          }
+            fontSize: optionsSetup.fontSizeY,
+          },
         },
         axisLine: {
           show: true,
           lineStyle: {
             color: optionsSetup.lineColorY,
             width: optionsSetup.lineWidthY,
-          }
+          },
         },
         splitLine: {
           show: optionsSetup.isShowSplitLineY,
           lineStyle: {
             color: optionsSetup.splitLineColorY,
             width: optionsSetup.splitLineWidthY,
-          }
-        }
+          },
+        },
       };
       this.options.yAxis = yAxis;
     },
@@ -230,15 +239,15 @@ export default {
           series[key].smooth = optionsSetup.smoothCurve;
           if (optionsSetup.area) {
             series[key].areaStyle = {
-              opacity: optionsSetup.areaThickness / 100
+              opacity: optionsSetup.areaThickness / 100,
             };
           } else {
             series[key].areaStyle = {
-              opacity: 0
+              opacity: 0,
             };
           }
           series[key].lineStyle = {
-            width: optionsSetup.lineWidth
+            width: optionsSetup.lineWidth,
           };
           series[key].label = {
             show: optionsSetup.isShow,
@@ -246,7 +255,7 @@ export default {
             distance: 10,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.subTextColor,
-            fontWeight: optionsSetup.fontWeight
+            fontWeight: optionsSetup.fontWeight,
           };
         }
       }
@@ -260,8 +269,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -273,7 +282,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -302,7 +311,7 @@ export default {
       let data = [];
       for (const i in val) {
         axis[i] = val[i].axis;
-        data[i] = val[i].data
+        data[i] = val[i].data;
       }
       // x轴
       this.options.xAxis.data = axis;
@@ -326,7 +335,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -340,8 +349,8 @@ export default {
           series[i].data = val.series[i].data;
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>