添加关联

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

@@ -1,171 +1,181 @@
 <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: "WidgetBarCompareChart",
   //参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
       options: {
         title: {
           //text: '柱状对比图',
-          x: 'center',
+          x: "center",
           textStyle: {
-            color: '#ffffff',
+            color: "#ffffff",
           },
         },
         //边距
         grid: [
-          {//左
-            show: false,//边框线
-            left: '4%',
+          {
+            //左
+            show: false, //边框线
+            left: "4%",
             top: 60,
             bottom: 10,
             containLabel: true,
-            width: '40%'
+            width: "40%",
           },
-          {//中间字体位置
+          {
+            //中间字体位置
             show: false,
-            left: '50.5%',
+            left: "50.5%",
             top: 60,
             bottom: 25,
-            width: '0%'
+            width: "0%",
           },
-          {//右
+          {
+            //右
             show: false,
-            right: '4%',
+            right: "4%",
             top: 60,
             bottom: 10,
             containLabel: true,
-            width: '40%'
+            width: "40%",
           },
         ],
         //图例
         legend: {
           textStyle: {
-            color: '#fff',
-            textAlign: 'center'
+            color: "#fff",
+            textAlign: "center",
           },
           //itemGap:80,
           //itemWidth: 0
         },
         xAxis: [
-          {// 左
+          {
+            // 左
             splitNumber: 2,
             show: true,
-            type: 'value',
+            type: "value",
             inverse: true,
-            axisLine: {//底分割线
+            axisLine: {
+              //底分割线
               show: false,
             },
             axisTick: {
               show: false,
             },
-            position: 'bottom',
-            axisLabel: { // x轴
+            position: "bottom",
+            axisLabel: {
+              // x轴
               show: true,
               textStyle: {
-                color: '#ffffff',
-                fontSize: 12
-              }
+                color: "#ffffff",
+                fontSize: 12,
+              },
             },
-            splitLine: { // 竖分割线
+            splitLine: {
+              // 竖分割线
               show: true,
               lineStyle: {
-                color: '#57617f',
+                color: "#57617f",
                 width: 1,
-                type: 'solid'
-              }
-            }
+                type: "solid",
+              },
+            },
           },
           {
             gridIndex: 1,
             show: false,
           },
-          {// 右
+          {
+            // 右
             gridIndex: 2,
             show: true,
-            type: 'value',
+            type: "value",
             axisLine: {
               show: false,
             },
             axisTick: {
               show: false,
             },
-            position: 'bottom',
+            position: "bottom",
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#ffffff',
+                color: "#ffffff",
                 fontSize: 12,
               },
             },
             splitLine: {
               show: true,
               lineStyle: {
-                color: '#57617f',
+                color: "#57617f",
                 width: 1,
-                type: 'solid',
+                type: "solid",
               },
             },
           },
         ],
         yAxis: [
           {
-            type: 'category',
+            type: "category",
             inverse: true,
-            position: 'right',
+            position: "right",
             axisLine: {
               show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             axisLabel: {
               show: false,
             },
             data: [],
           },
-          {//处理轴数据
+          {
+            //处理轴数据
             gridIndex: 1,
-            type: 'category',
+            type: "category",
             inverse: true,
-            position: 'left',
+            position: "left",
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             axisLabel: {
               show: true,
               textStyle: {
-                align: 'center',
-                color: '#ffffff',
+                align: "center",
+                color: "#ffffff",
                 fontSize: 14,
-              }
+              },
             },
             data: [],
           },
           {
             gridIndex: 2,
-            type: 'category',
+            type: "category",
             inverse: true,
-            position: 'left',
+            position: "left",
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             axisLabel: {
               show: false,
@@ -174,19 +184,18 @@ export default {
         ],
         series: [
           {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barGap: 20,
             barWidth: 15,
             label: {
               normal: {
                 show: true,
-                color: 'red',
-                position: 'insideLeft',
+                color: "red",
+                position: "insideLeft",
                 textStyle: {
-                  color: '#ffffff',
-                }
-
+                  color: "#ffffff",
+                },
               },
               emphasis: {
                 show: false,
@@ -194,7 +203,7 @@ export default {
             },
             itemStyle: {
               normal: {
-                color: '#36c5e7',
+                color: "#36c5e7",
                 barBorderRadius: [8, 0, 0, 8],
               },
               emphasis: {
@@ -204,8 +213,8 @@ export default {
             data: [],
           },
           {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barGap: 20,
             barWidth: 15,
             xAxisIndex: 2,
@@ -213,16 +222,16 @@ export default {
             label: {
               normal: {
                 show: true,
-                color: 'red',
-                position: 'insideRight',
+                color: "red",
+                position: "insideRight",
                 textStyle: {
-                  color: '#ffffff',
-                }
+                  color: "#ffffff",
+                },
               },
             },
             itemStyle: {
               normal: {
-                color: '#e68b55',
+                color: "#e68b55",
                 barBorderRadius: [0, 8, 8, 0],
               },
               emphasis: {
@@ -231,12 +240,12 @@ export default {
             },
             data: [],
           },
-        ]
+        ],
       },
       optionsStyle: {},
       optionsData: {},
       optionsSetup: {},
-      flagInter: null
+      flagInter: null,
     };
   },
   computed: {
@@ -247,9 +256,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: {
@@ -260,8 +269,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -269,6 +278,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -311,8 +328,8 @@ export default {
       const optionsSetup = this.optionsSetup;
       const xAxisLeft = {
         splitNumber: optionsSetup.splitNumberLeft,
-        type: 'value',
-        show : optionsSetup.hideXLeft,
+        type: "value",
+        show: optionsSetup.hideXLeft,
         inverse: true,
         //X轴线
         axisLine: {
@@ -325,22 +342,24 @@ export default {
           show: optionsSetup.tickLineLeft,
         },
         position: optionsSetup.positionXLeft,
-        axisLabel: { // x轴
+        axisLabel: {
+          // x轴
           show: true,
           textStyle: {
             color: optionsSetup.colorXLeft,
-            fontSize: optionsSetup.fontSizeXLeft
-          }
+            fontSize: optionsSetup.fontSizeXLeft,
+          },
         },
-        splitLine: { // 分割线
+        splitLine: {
+          // 分割线
           show: optionsSetup.isShowSplitLineLeft,
           lineStyle: {
             color: optionsSetup.splitLineColorLeft,
             width: optionsSetup.splitLineFontWidthLeft,
-            type: 'solid'
-          }
-        }
-      }
+            type: "solid",
+          },
+        },
+      };
       this.options.xAxis[0] = xAxisLeft;
     },
     // 右X轴设置
@@ -349,9 +368,10 @@ export default {
       const xAxisRight = {
         gridIndex: 2,
         splitNumber: optionsSetup.splitNumberRight,
-        show : optionsSetup.hideXRight,
-        type: 'value',
-        axisLine: {//X轴线
+        show: optionsSetup.hideXRight,
+        type: "value",
+        axisLine: {
+          //X轴线
           show: optionsSetup.lineXRight,
           lineStyle: {
             color: optionsSetup.lineColorXRight,
@@ -361,22 +381,24 @@ export default {
           show: optionsSetup.tickLineRight,
         },
         position: optionsSetup.positionXRight,
-        axisLabel: { // x轴
+        axisLabel: {
+          // x轴
           show: true,
           textStyle: {
             color: optionsSetup.colorXRight,
-            fontSize: optionsSetup.fontSizeXRight
-          }
+            fontSize: optionsSetup.fontSizeXRight,
+          },
         },
-        splitLine: { // 分割线
+        splitLine: {
+          // 分割线
           show: optionsSetup.isShowSplitLineRight,
           lineStyle: {
             color: optionsSetup.splitLineColorRight,
             width: optionsSetup.splitLineFontWidthRight,
-            type: 'solid'
-          }
-        }
-      }
+            type: "solid",
+          },
+        },
+      };
       this.options.xAxis[2] = xAxisRight;
     },
     // Y轴设置
@@ -385,11 +407,11 @@ export default {
       const axisLine = {
         show: optionsSetup.lineY,
         lineStyle: {
-          color: optionsSetup.lineColorY
-        }
+          color: optionsSetup.lineColorY,
+        },
       };
       const axisTick = {
-        show: optionsSetup.tickLineY
+        show: optionsSetup.tickLineY,
       };
       const axisLabel = {
         show: optionsSetup.hideY,
@@ -397,11 +419,11 @@ export default {
           align: optionsSetup.textAlignY,
           color: optionsSetup.colorY,
           fontSize: optionsSetup.fontSizeY,
-        }
+        },
       };
-      this.options.yAxis[1]['axisLine'] = axisLine;
-      this.options.yAxis[1]['axisTick'] = axisTick;
-      this.options.yAxis[1]['axisLabel'] = axisLabel;
+      this.options.yAxis[1]["axisLine"] = axisLine;
+      this.options.yAxis[1]["axisTick"] = axisTick;
+      this.options.yAxis[1]["axisLabel"] = axisLabel;
     },
     // 数值设定、柱体设置
     setOptionsTop() {
@@ -409,36 +431,36 @@ export default {
       const series = this.options.series;
       for (const key in series) {
         if (series[key].type == "bar") {
-          series[0].label = {
+          (series[0].label = {
             normal: {
               show: optionsSetup.isShow,
-              position: 'insideLeft',
+              position: "insideLeft",
               textStyle: {
                 fontSize: optionsSetup.fontSize,
                 color: optionsSetup.subTextColor,
-                fontWeight: optionsSetup.fontWeight
-              }
+                fontWeight: optionsSetup.fontWeight,
+              },
             },
             emphasis: {
               show: false,
             },
-          },
-            series[1].label = {
+          }),
+            (series[1].label = {
               normal: {
                 show: optionsSetup.isShow,
-                color: 'red',
-                position: 'insideRight',
+                color: "red",
+                position: "insideRight",
                 textStyle: {
                   fontSize: optionsSetup.fontSize,
                   color: optionsSetup.subTextColor,
-                  fontWeight: optionsSetup.fontWeight
-                }
+                  fontWeight: optionsSetup.fontWeight,
+                },
               },
               emphasis: {
                 show: false,
               },
-            },
-            series[key].barWidth = optionsSetup.maxWidth;
+            }),
+            (series[key].barWidth = optionsSetup.maxWidth);
         }
       }
       this.options.series = series;
@@ -451,8 +473,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -460,7 +482,8 @@ export default {
     setOptionsGrid() {
       const optionsSetup = this.optionsSetup;
       const grid = [
-        {//左
+        {
+          //左
           show: optionsSetup.frameLineLeft,
           borderColor: optionsSetup.borderColorLeft,
           borderWidth: optionsSetup.borderWidthLeft,
@@ -468,16 +491,18 @@ export default {
           top: optionsSetup.marginTop,
           bottom: optionsSetup.marginBottom,
           containLabel: true,
-          width: '40%'
+          width: "40%",
         },
-        {//中间字体位置
+        {
+          //中间字体位置
           show: false,
           left: "51%",
           top: optionsSetup.marginTop,
           bottom: optionsSetup.marginBottom + 15,
-          width: '0%'
+          width: "0%",
         },
-        {//右
+        {
+          //右
           show: optionsSetup.frameLineRight,
           borderColor: optionsSetup.borderColorRight,
           borderWidth: optionsSetup.borderWidthRight,
@@ -485,9 +510,9 @@ export default {
           top: optionsSetup.marginTop,
           bottom: optionsSetup.marginBottom,
           containLabel: true,
-          width: '40%'
+          width: "40%",
         },
-      ]
+      ];
       this.options.grid = grid;
     },
     // 图例操作
@@ -497,32 +522,31 @@ export default {
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
     // 图例名称设置
-    setOptionsLegendName(name){
+    setOptionsLegendName(name) {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       const legendName = optionsSetup.legendName;
       // 图例没有手动写则显示原值，写了则显示新值
-      if (null == legendName || legendName == '') {
+      if (null == legendName || legendName == "") {
         for (let i = 0; i < name.length; i++) {
           series[i].name = name[i];
         }
-        this.options.legend['data'] = name;
-      }else {
-        const arr = legendName.split('|');
+        this.options.legend["data"] = name;
+      } else {
+        const arr = legendName.split("|");
         for (let i = 0; i < arr.length; i++) {
           series[i].name = arr[i];
         }
-        this.options.legend['data'] = arr
+        this.options.legend["data"] = arr;
       }
     },
     // 颜色修改、圆角修改
@@ -533,21 +557,21 @@ export default {
       const itemStyleLeft = {
         normal: {
           color: customColor[0].color,
-          barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius]
+          barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius],
         },
         emphasis: {
           show: false,
         },
-      }
+      };
       const itemStyleRight = {
         normal: {
           color: customColor[1].color,
-          barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
+          barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0],
         },
         emphasis: {
           show: false,
         },
-      }
+      };
       this.options.series[0].itemStyle = itemStyleLeft;
       this.options.series[1].itemStyle = itemStyleRight;
     },
@@ -558,16 +582,16 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-        optionsData.dynamicData,
-        optionsData.refreshTime,
-        optionsSetup
-        );
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
     },
     //去重
     setUnique(arr) {
       let newArr = [];
-      arr.forEach(item => {
-        return newArr.includes(item) ? '' : newArr.push(item);
+      arr.forEach((item) => {
+        return newArr.includes(item) ? "" : newArr.push(item);
       });
       return newArr;
     },
@@ -598,15 +622,15 @@ export default {
         arrayList.push({
           name: yAxisList[i],
           data: data,
-        })
+        });
         legendName.push(yAxisList[i]);
       }
-      this.options.series[0]['name'] = arrayList[0].name;
-      this.options.series[0]['data'] = arrayList[0].data;
-      this.options.series[1]['name'] = arrayList[1].name;
-      this.options.series[1]['data'] = arrayList[1].data;
-      this.options.yAxis[1]['data'] = xAxisList;
-      this.options.legend['data'] = legendName;
+      this.options.series[0]["name"] = arrayList[0].name;
+      this.options.series[0]["data"] = arrayList[0].data;
+      this.options.series[1]["name"] = arrayList[1].name;
+      this.options.series[1]["data"] = arrayList[1].data;
+      this.options.yAxis[1]["data"] = xAxisList;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     // 动态数据
@@ -623,25 +647,25 @@ export default {
     },
     getEchartData(val, optionsSetup) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(optionsSetup, res);
       });
     },
     renderingFn(optionsSetup, val) {
       const legendName = [];
-      this.options.yAxis[1]['data'] = val.xAxis;
-      if (val.series[0].type == "bar"){
-        this.options.series[0]['name'] = val.series[0].name;
-        this.options.series[0]['data'] = val.series[0].data;
-        this.options.series[1]['name'] = val.series[1].name;
-        this.options.series[1]['data'] = val.series[1].data;
+      this.options.yAxis[1]["data"] = val.xAxis;
+      if (val.series[0].type == "bar") {
+        this.options.series[0]["name"] = val.series[0].name;
+        this.options.series[0]["data"] = val.series[0].data;
+        this.options.series[1]["name"] = val.series[1].name;
+        this.options.series[1]["data"] = val.series[1].data;
         legendName.push(val.series[0].name);
         legendName.push(val.series[1].name);
       }
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -651,5 +675,4 @@ export default {
   height: 100%;
   overflow: hidden;
 }
-
 </style>

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.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: "WidgetBarStackchart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -18,8 +19,8 @@ export default {
         grid: {},
         legend: {
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         xAxis: {
           type: "category",
@@ -27,9 +28,9 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         yAxis: {
           type: "value",
@@ -37,26 +38,26 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         series: [
           {
             data: [],
-            name: '',
+            name: "",
             type: "bar",
             barGap: "0%",
             itemStyle: {
-              barBorderRadius: null
-            }
-          }
-        ]
+              barBorderRadius: null,
+            },
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsSetup: {},
-      flagInter: null
+      flagInter: null,
     };
   },
   computed: {
@@ -67,9 +68,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: {
@@ -80,8 +81,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -89,6 +90,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -134,7 +143,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -147,23 +156,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;
     },
@@ -181,7 +190,7 @@ export default {
         name: optionsSetup.textNameY,
         nameTextStyle: {
           color: optionsSetup.nameColorY,
-          fontSize: optionsSetup.nameFontSizeY
+          fontSize: optionsSetup.nameFontSizeY,
         },
         // 轴反转
         inverse: optionsSetup.reversalY,
@@ -192,23 +201,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;
     },
@@ -220,8 +229,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -233,7 +242,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -244,32 +253,31 @@ export default {
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
     // 图例名称设置
-    setOptionsLegendName(name){
+    setOptionsLegendName(name) {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       const legendName = optionsSetup.legendName;
       // 图例没有手动写则显示原值，写了则显示新值
-      if (null == legendName || legendName == '') {
+      if (null == legendName || legendName == "") {
         for (let i = 0; i < name.length; i++) {
           series[i].name = name[i];
         }
-        this.options.legend['data'] = name;
-      }else {
-        const arr = legendName.split('|');
+        this.options.legend["data"] = name;
+      } else {
+        const arr = legendName.split("|");
         for (let i = 0; i < arr.length; i++) {
           series[i].name = arr[i];
         }
-        this.options.legend['data'] = arr
+        this.options.legend["data"] = arr;
       }
     },
     // 数据解析
@@ -280,27 +288,27 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-          optionsData.dynamicData,
-          optionsData.refreshTime,
-          optionsSetup
-        );
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
     },
     //去重
     setUnique(arr) {
       let newArr = [];
-      arr.forEach(item => {
-        return newArr.includes(item) ? '' : newArr.push(item);
+      arr.forEach((item) => {
+        return newArr.includes(item) ? "" : newArr.push(item);
       });
       return newArr;
     },
     //获取堆叠样式
     getStackStyle() {
       const optionsSetup = this.optionsSetup;
-      let style = ""
+      let style = "";
       if (optionsSetup.stackStyle == "upDown") {
-        style = "total"
+        style = "total";
       }
-      return style
+      return style;
     },
     //静态数据
     staticDataFn(val) {
@@ -353,9 +361,9 @@ export default {
             normal: {
               color: arrColor[i],
               barBorderRadius: optionsSetup.radius,
-            }
-          }
-        })
+            },
+          },
+        });
         legendName.push(yAxisList[i]);
       }
       this.options.series = series;
@@ -370,7 +378,7 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     // 动态数据
@@ -387,7 +395,7 @@ export default {
     },
     getEchartData(val, optionsSetup) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(optionsSetup, res);
       });
     },
@@ -434,17 +442,17 @@ export default {
               normal: {
                 color: arrColor[i],
                 barBorderRadius: optionsSetup.radius,
-              }
-            }
-          })
+              },
+            },
+          });
         }
         legendName.push(val.series[i].name);
       }
       this.options.series = series;
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -454,5 +462,4 @@ export default {
   height: 100%;
   overflow: hidden;
 }
-
 </style>

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

@@ -1,18 +1,18 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
 import echarts from "echarts";
-
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -23,63 +23,63 @@ export default {
           y: "4%",
           textStyle: {
             color: "#fff",
-            fontSize: "22"
+            fontSize: "22",
           },
           subtextStyle: {
             color: "#90979c",
-            fontSize: "16"
-          }
+            fontSize: "16",
+          },
         },
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            type: "shadow"
-          }
+            type: "shadow",
+          },
         },
         grid: {
           top: "15%",
           right: "3%",
           left: "5%",
-          bottom: "12%"
+          bottom: "12%",
         },
         legend: {
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         xAxis: {
           type: "category",
           data: [],
           axisLine: {
             lineStyle: {
-              color: "rgba(255,255,255,0.12)"
-            }
+              color: "rgba(255,255,255,0.12)",
+            },
           },
           axisLabel: {
             margin: 10,
             color: "#e2e9ff",
             textStyle: {
-              fontSize: 14
-            }
-          }
+              fontSize: 14,
+            },
+          },
         },
         yAxis: {
           name: "",
           axisLabel: {
             formatter: "{value}",
-            color: "#e2e9ff"
+            color: "#e2e9ff",
           },
           axisLine: {
             show: false,
             lineStyle: {
-              color: "rgba(255,255,255,0)"
-            }
+              color: "rgba(255,255,255,0)",
+            },
           },
           splitLine: {
             lineStyle: {
-              color: "rgba(255,255,255,0.12)"
-            }
-          }
+              color: "rgba(255,255,255,0.12)",
+            },
+          },
         },
         series: [
           {
@@ -88,23 +88,27 @@ export default {
             barWidth: "20px",
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
                   [
                     {
                       offset: 0,
-                      color: "rgba(0,244,255,1)" // 0% 处的颜色
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                     },
                     {
                       offset: 1,
-                      color: "rgba(0,77,167,1)" // 100% 处的颜色
-                    }
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
                   ],
                   false
                 ),
                 shadowColor: "rgba(0,160,221,1)",
                 //模糊细数
-                shadowBlur: 4
-              }
+                shadowBlur: 4,
+              },
             },
             label: {
               normal: {
@@ -116,17 +120,17 @@ export default {
                   a: {
                     fontSize: 15,
                     color: "#fff",
-                    align: "center"
-                  }
-                }
-              }
-            }
-          }
-        ]
+                    align: "center",
+                  },
+                },
+              },
+            },
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -137,9 +141,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: {
@@ -150,8 +154,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -159,6 +163,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -205,7 +217,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -218,23 +230,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;
     },
@@ -252,7 +264,7 @@ export default {
         name: optionsSetup.textNameY,
         nameTextStyle: {
           color: optionsSetup.nameColorY,
-          fontSize: optionsSetup.nameFontSizeY
+          fontSize: optionsSetup.nameFontSizeY,
         },
         // 轴反转
         inverse: optionsSetup.reversalY,
@@ -263,23 +275,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;
     },
@@ -295,8 +307,8 @@ export default {
             distance: optionsSetup.distance,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.subTextColor,
-            fontWeight: optionsSetup.fontWeight
-          }
+            fontWeight: optionsSetup.fontWeight,
+          };
         } else {
           series[0].label = {
             show: optionsSetup.isShow,
@@ -304,8 +316,8 @@ export default {
             distance: optionsSetup.distance,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.subTextColor,
-            fontWeight: optionsSetup.fontWeight
-          }
+            fontWeight: optionsSetup.fontWeight,
+          };
         }
         series[0].barWidth = optionsSetup.maxWidth;
       }
@@ -318,8 +330,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -331,7 +343,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -339,43 +351,39 @@ export default {
     setOptionsColor() {
       const optionsSetup = this.optionsSetup;
       const itemStyle = this.options.series[0]["itemStyle"];
-      let normal = {}
+      let normal = {};
       if (optionsSetup.verticalShow) {
         normal = {
-          color: new echarts.graphic.LinearGradient(1, 0, 0, 0,
-            [
-              {
-                offset: 0,
-                color: optionsSetup.bar0color // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: optionsSetup.bar100color // 100% 处的颜色
-              }
-            ],
-          ),
+          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+            {
+              offset: 0,
+              color: optionsSetup.bar0color, // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: optionsSetup.bar100color, // 100% 处的颜色
+            },
+          ]),
           barBorderRadius: optionsSetup.radius, //圆角
           shadowColor: optionsSetup.shadowColor, // 阴影颜色
-          shadowBlur: optionsSetup.shadowBlur //模糊系数
-        }
+          shadowBlur: optionsSetup.shadowBlur, //模糊系数
+        };
       } else {
         normal = {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
-            [
-              {
-                offset: 0,
-                color: optionsSetup.bar0color // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: optionsSetup.bar100color // 100% 处的颜色
-              }
-            ],
-          ),
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: optionsSetup.bar0color, // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: optionsSetup.bar100color, // 100% 处的颜色
+            },
+          ]),
           barBorderRadius: optionsSetup.radius, //圆角
           shadowColor: optionsSetup.shadowColor, // 阴影颜色
-          shadowBlur: optionsSetup.shadowBlur //模糊系数
-        }
+          shadowBlur: optionsSetup.shadowBlur, //模糊系数
+        };
       }
       itemStyle["normal"] = normal;
     },
@@ -386,10 +394,10 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(
-          optionsData.dynamicData,
-          optionsData.refreshTime,
-          optionsSetup
-        );
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
     },
     // 静态数据
     staticDataFn(val) {
@@ -399,7 +407,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轴
       if (optionsSetup.verticalShow) {
@@ -431,7 +439,7 @@ export default {
     },
     getEchartData(val, optionsSetup) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(optionsSetup, res);
       });
     },
@@ -456,8 +464,8 @@ export default {
           series[i].data = val.series[i].data;
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.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: "widgetBarLineStackChart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -18,8 +19,8 @@ export default {
         grid: {},
         legend: {
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         xAxis: {
           type: "category",
@@ -27,37 +28,37 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         yAxis: [
           {
-            type: 'value',
+            type: "value",
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#cdd5e2'
-              }
+                color: "#cdd5e2",
+              },
             },
             splitLine: {
               show: false,
             },
             axisLabel: {
               textStyle: {
-                color: '#666666'
-              }
+                color: "#666666",
+              },
             },
           },
           {
-            type: 'value',
+            type: "value",
             nameTextStyle: {
-              color: '#666666'
+              color: "#666666",
             },
             axisLine: {
               lineStyle: {
-                color: '#cdd5e2'
-              }
+                color: "#cdd5e2",
+              },
             },
             splitLine: {
               show: false,
@@ -65,33 +66,33 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#666666'
-              }
-            }
-          }
+                color: "#666666",
+              },
+            },
+          },
         ],
         series: [
           {
             data: [],
-            name: '',
+            name: "",
             type: "bar",
             barGap: "0%",
             itemStyle: {
-              barBorderRadius: null
-            }
+              barBorderRadius: null,
+            },
           },
           {
             data: [],
-            name: '',
+            name: "",
             type: "line",
-            itemStyle: {}
-          }
-        ]
+            itemStyle: {},
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsSetup: {},
-      flagInter: null
+      flagInter: null,
     };
   },
   computed: {
@@ -102,9 +103,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: {
@@ -115,8 +116,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -124,6 +125,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -169,7 +178,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -182,23 +191,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;
     },
@@ -217,7 +226,7 @@ export default {
           // 别名
           nameTextStyle: {
             color: optionsSetup.nameColorYLeft,
-            fontSize: optionsSetup.nameFontSizeYLeft
+            fontSize: optionsSetup.nameFontSizeYLeft,
           },
           axisLabel: {
             show: true,
@@ -226,10 +235,11 @@ export default {
             textStyle: {
               // 坐标文字颜色
               color: optionsSetup.colorYLeft,
-              fontSize: optionsSetup.fontSizeYLeft
-            }
+              fontSize: optionsSetup.fontSizeYLeft,
+            },
           },
-          axisTick: { // 刻度
+          axisTick: {
+            // 刻度
             show: optionsSetup.tickLineYLeft,
           },
           axisLine: {
@@ -237,15 +247,15 @@ export default {
             lineStyle: {
               color: optionsSetup.lineColorYLeft,
               width: optionsSetup.lineWidthYLeft,
-            }
+            },
           },
           splitLine: {
             show: optionsSetup.isShowSplitLineYLeft,
             lineStyle: {
               color: optionsSetup.splitLineColorYLeft,
               width: optionsSetup.splitLineFontWidthYLeft,
-            }
-          }
+            },
+          },
         },
         {
           type: "value",
@@ -258,7 +268,7 @@ export default {
           // 别名
           nameTextStyle: {
             color: optionsSetup.nameColorYRight,
-            fontSize: optionsSetup.nameFontSizeYRight
+            fontSize: optionsSetup.nameFontSizeYRight,
           },
           axisLabel: {
             show: true,
@@ -267,10 +277,11 @@ export default {
             textStyle: {
               // 坐标文字颜色
               color: optionsSetup.colorYRight,
-              fontSize: optionsSetup.fontSizeYRight
-            }
+              fontSize: optionsSetup.fontSizeYRight,
+            },
           },
-          axisTick: { // 刻度
+          axisTick: {
+            // 刻度
             show: optionsSetup.tickLineYRight,
           },
           axisLine: {
@@ -278,16 +289,16 @@ export default {
             lineStyle: {
               width: optionsSetup.lineWidthYRight,
               color: optionsSetup.lineColorYRight,
-            }
+            },
           },
           splitLine: {
             show: optionsSetup.isShowSplitLineYRight,
             lineStyle: {
               color: optionsSetup.splitLineColorYRight,
               width: optionsSetup.splitLineFontWidthYRight,
-            }
-          }
-        }
+            },
+          },
+        },
       ];
       this.options.yAxis = yAxis;
     },
@@ -299,8 +310,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -312,7 +323,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -323,12 +334,11 @@ export default {
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
@@ -338,17 +348,17 @@ export default {
       const series = this.options.series;
       const legendName = optionsSetup.legendName;
       // 图例没有手动写则显示原值，写了则显示新值
-      if (null == legendName || legendName == '') {
+      if (null == legendName || legendName == "") {
         for (let i = 0; i < name.length; i++) {
           series[i].name = name[i];
         }
-        this.options.legend['data'] = name;
+        this.options.legend["data"] = name;
       } else {
-        const arr = legendName.split('|');
+        const arr = legendName.split("|");
         for (let i = 0; i < arr.length; i++) {
           series[i].name = arr[i];
         }
-        this.options.legend['data'] = arr
+        this.options.legend["data"] = arr;
       }
     },
     // 数据解析
@@ -359,16 +369,16 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-          optionsData.dynamicData,
-          optionsData.refreshTime,
-          optionsSetup
-        );
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
     },
     //去重
     setUnique(arr) {
       let newArr = [];
-      arr.forEach(item => {
-        return newArr.includes(item) ? '' : newArr.push(item);
+      arr.forEach((item) => {
+        return newArr.includes(item) ? "" : newArr.push(item);
       });
       return newArr;
     },
@@ -404,16 +414,21 @@ export default {
       yAxisList = this.setUnique(yAxisList);
       const legendName = yAxisList;
       for (let i = 0; i < yAxisList.length; i++) {
-        const bar = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "bar");
+        const bar = this.getStaticSeriesData(
+          xAxisList,
+          yAxisList[i],
+          val,
+          "bar"
+        );
         series.push({
           name: yAxisList[i],
-          type: 'bar',
+          type: "bar",
           data: bar,
-          barGap: '0%',
+          barGap: "0%",
           barWidth: optionsSetup.maxWidth,
           label: {
             show: optionsSetup.isShowBar,
-            position: 'top',
+            position: "top",
             distance: optionsSetup.distanceBar,
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
@@ -424,15 +439,20 @@ export default {
             normal: {
               color: arrColor[i],
               barBorderRadius: optionsSetup.radius,
-            }
-          }
-        })
+            },
+          },
+        });
       }
       for (let i = 0; i < yAxisList.length; i++) {
-        const line = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "line");
+        const line = this.getStaticSeriesData(
+          xAxisList,
+          yAxisList[i],
+          val,
+          "line"
+        );
         series.push({
           name: yAxisList[i],
-          type: 'line',
+          type: "line",
           data: line,
           yAxisIndex: 1,
           symbol: optionsSetup.symbol,
@@ -442,7 +462,7 @@ export default {
           itemStyle: {
             normal: {
               color: arrColor[i],
-            }
+            },
           },
           // 线条
           lineStyle: {
@@ -451,20 +471,20 @@ export default {
           },
           label: {
             show: optionsSetup.isShowLine,
-            position: 'top',
+            position: "top",
             distance: optionsSetup.distanceLine,
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
             fontWeight: optionsSetup.fontWeightLine,
           },
-        })
+        });
       }
       this.options.series = series;
       this.options.xAxis.data = xAxisList;
       this.options.yAxis.data = [];
       this.options.xAxis.type = "category";
       this.options.yAxis.type = "value";
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     // 动态数据
@@ -481,7 +501,7 @@ export default {
     },
     getEchartData(val, optionsSetup) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(optionsSetup, res);
       });
     },
@@ -506,13 +526,13 @@ export default {
         const bar = this.getDynamicSeriesData(legendName[i], val.series, "bar");
         series.push({
           name: legendName[i],
-          type: 'bar',
+          type: "bar",
           data: bar,
-          barGap: '0%',
+          barGap: "0%",
           barWidth: optionsSetup.maxWidth,
           label: {
             show: optionsSetup.isShowBar,
-            position: 'top',
+            position: "top",
             distance: optionsSetup.distanceBar,
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
@@ -523,12 +543,16 @@ export default {
             normal: {
               color: arrColor[i],
               barBorderRadius: optionsSetup.radius,
-            }
-          }
-        })
+            },
+          },
+        });
       }
       for (let i = 0; i < legendName.length; i++) {
-        const line = this.getDynamicSeriesData(legendName[i], val.series, "line");
+        const line = this.getDynamicSeriesData(
+          legendName[i],
+          val.series,
+          "line"
+        );
         series.push({
           name: legendName[i],
           type: "line",
@@ -541,7 +565,7 @@ export default {
           itemStyle: {
             normal: {
               color: arrColor[i],
-            }
+            },
           },
           // 线条
           lineStyle: {
@@ -550,16 +574,16 @@ export default {
           },
           label: {
             show: optionsSetup.isShowLine,
-            position: 'top',
+            position: "top",
             distance: optionsSetup.distanceLine,
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
             fontWeight: optionsSetup.fontWeightLine,
           },
-        })
+        });
       }
       this.options.series = series;
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     getDynamicSeriesData(legend, series, type) {
@@ -569,9 +593,9 @@ export default {
           data = series[i].data;
         }
       }
-      return data
+      return data;
     },
-  }
+  },
 };
 </script>
 
@@ -581,5 +605,4 @@ export default {
   height: 100%;
   overflow: hidden;
 }
-
 </style>

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

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "WidgetBarlinechart",
   components: {},
@@ -127,6 +128,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属性

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

@@ -1,79 +1,86 @@
 <template>
-  <div :style='styleObj'>
-    <v-chart :options='options' autoresize/>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
-
-import echarts from 'echarts';
-
+import echarts from "echarts";
+import { eventBusParams } from "@/utils/screen";
 export default {
-  name: 'widgetMoreBarLineChart',
+  name: "widgetMoreBarLineChart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
       options: {
         tooltip: {
-          trigger: 'item',
+          trigger: "item",
           axisPointer: {
-            type: 'shadow'
-          }
+            type: "shadow",
+          },
         },
         grid: {
-          left: '2%',
-          right: '4%',
-          bottom: '14%',
-          top: '16%',
-          containLabel: true
+          left: "2%",
+          right: "4%",
+          bottom: "14%",
+          top: "16%",
+          containLabel: true,
         },
         legend: {},
         xAxis: {
-          type: 'category',
-          data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
+          type: "category",
+          data: [
+            "2012",
+            "2013",
+            "2014",
+            "2015",
+            "2016",
+            "2017",
+            "2018",
+            "2019",
+          ],
           axisLine: {
             lineStyle: {
-              color: '#cdd5e2'
-
-            }
+              color: "#cdd5e2",
+            },
           },
           axisLabel: {
             textStyle: {
-              color: '#666666'
-            }
+              color: "#666666",
+            },
           },
         },
         yAxis: [
           {
-            type: 'value',
+            type: "value",
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#cdd5e2'
-              }
+                color: "#cdd5e2",
+              },
             },
             splitLine: {
               show: false,
             },
             axisLabel: {
               textStyle: {
-                color: '#666666'
-              }
+                color: "#666666",
+              },
             },
           },
           {
-            type: 'value',
+            type: "value",
             nameTextStyle: {
-              color: '#666666'
+              color: "#666666",
             },
             axisLine: {
               lineStyle: {
-                color: '#cdd5e2'
-              }
+                color: "#cdd5e2",
+              },
             },
             splitLine: {
               show: false,
@@ -81,53 +88,58 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#666666'
-              }
-            }
-          }
+                color: "#666666",
+              },
+            },
+          },
         ],
         series: [
           {
-            name: '调解成功',
-            type: 'bar',
+            name: "调解成功",
+            type: "bar",
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0,
-                  color: '#29acff'
-                }, {
-                  offset: 1,
-                  color: '#4bdfff'
-                }]),
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#29acff",
+                  },
+                  {
+                    offset: 1,
+                    color: "#4bdfff",
+                  },
+                ]),
                 barBorderRadius: 6,
               },
             },
-            data: []
+            data: [],
           },
           {
-            name: '调解失败',
-            type: 'bar',
+            name: "调解失败",
+            type: "bar",
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0,
-                  color: '#3d93f2'
-                }, {
-                  offset: 1,
-                  color: '#5dc1fd'
-                }]),
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#3d93f2",
+                  },
+                  {
+                    offset: 1,
+                    color: "#5dc1fd",
+                  },
+                ]),
                 barBorderRadius: 6,
-              }
-
+              },
             },
-            data: []
+            data: [],
           },
           {
-            name: '调解成功率',
-            type: 'line',
+            name: "调解成功率",
+            type: "line",
             yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
             smooth: false, //平滑曲线显示
-            symbol: 'circle', //标记的图形为实心圆
+            symbol: "circle", //标记的图形为实心圆
             symbolSize: 8, //标记的大小
             /*itemStyle: {
               normal: {
@@ -137,25 +149,25 @@ export default {
               },
             },*/
             lineStyle: {
-              color: '#ffa43a'
+              color: "#ffa43a",
             },
-            data: []
-          }
-        ]
-      }
-    }
+            data: [],
+          },
+        ],
+      },
+    };
   },
   computed: {
     styleObj() {
       return {
-        position: this.ispreview ? 'absolute' : 'static',
-        width: this.optionsStyle.width + 'px',
-        height: this.optionsStyle.height + 'px',
-        left: this.optionsStyle.left + 'px',
-        top: this.optionsStyle.top + 'px',
-        background: this.optionsSetup.background
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background,
       };
-    }
+    },
   },
   watch: {
     value: {
@@ -166,8 +178,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
     this.optionsStyle = this.value.position;
@@ -175,6 +187,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属性
@@ -220,7 +240,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -233,23 +253,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;
     },
@@ -268,7 +288,7 @@ export default {
           // 别名
           nameTextStyle: {
             color: optionsSetup.nameColorYLeft,
-            fontSize: optionsSetup.nameFontSizeYLeft
+            fontSize: optionsSetup.nameFontSizeYLeft,
           },
           axisLabel: {
             show: true,
@@ -277,26 +297,27 @@ export default {
             textStyle: {
               // 坐标文字颜色
               color: optionsSetup.colorYLeft,
-              fontSize: optionsSetup.fontSizeYLeft
-            }
+              fontSize: optionsSetup.fontSizeYLeft,
+            },
           },
-          axisTick: { // 刻度
+          axisTick: {
+            // 刻度
             show: optionsSetup.tickLineYLeft,
           },
           axisLine: {
             show: optionsSetup.lineYLeft,
             lineStyle: {
               width: optionsSetup.lineWidthYLeft,
-              color: optionsSetup.lineColorYLeft
-            }
+              color: optionsSetup.lineColorYLeft,
+            },
           },
           splitLine: {
             show: optionsSetup.isShowSplitLineYLeft,
             lineStyle: {
               color: optionsSetup.splitLineColorYLeft,
               width: optionsSetup.splitLineFontWidthYLeft,
-            }
-          }
+            },
+          },
         },
         {
           type: "value",
@@ -309,7 +330,7 @@ export default {
           // 别名
           nameTextStyle: {
             color: optionsSetup.nameColorYRight,
-            fontSize: optionsSetup.nameFontSizeYRight
+            fontSize: optionsSetup.nameFontSizeYRight,
           },
           axisLabel: {
             show: true,
@@ -318,10 +339,11 @@ export default {
             textStyle: {
               // 坐标文字颜色
               color: optionsSetup.colorYRight,
-              fontSize: optionsSetup.fontSizeYRight
-            }
+              fontSize: optionsSetup.fontSizeYRight,
+            },
           },
-          axisTick: { // 刻度
+          axisTick: {
+            // 刻度
             show: optionsSetup.tickLineYRight,
           },
           axisLine: {
@@ -329,16 +351,16 @@ export default {
             lineStyle: {
               width: optionsSetup.lineWidthYRight,
               color: optionsSetup.lineColorYRight,
-            }
+            },
           },
           splitLine: {
             show: optionsSetup.isShowSplitLineYRight,
             lineStyle: {
               color: optionsSetup.splitLineColorYRight,
               width: optionsSetup.splitLineFontWidthYRight,
-            }
-          }
-        }
+            },
+          },
+        },
       ];
       this.options.yAxis = yAxis;
     },
@@ -346,12 +368,12 @@ export default {
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
-        trigger: 'item',
+        trigger: "item",
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -363,7 +385,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -373,12 +395,11 @@ export default {
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
@@ -388,23 +409,23 @@ export default {
       const series = this.options.series;
       const legendName = optionsSetup.legendName;
       // 图例没有手动写则显示原值，写了则显示新值
-      if (null == legendName || legendName == '') {
+      if (null == legendName || legendName == "") {
         for (let i = 0; i < name.length; i++) {
           series[i].name = name[i];
         }
-        this.options.legend['data'] = name;
+        this.options.legend["data"] = name;
       } else {
-        const arr = legendName.split('|');
+        const arr = legendName.split("|");
         for (let i = 0; i < arr.length; i++) {
           series[i].name = arr[i];
         }
-        this.options.legend['data'] = arr
+        this.options.legend["data"] = arr;
       }
     },
     // 数据处理
     setOptionsData() {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
-      optionsData.dataType == 'staticData'
+      optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
@@ -428,30 +449,30 @@ export default {
         line[i] = val[i].sales;
       }
       const legendName = [];
-      legendName.push('调解成功');
-      legendName.push('调解失败');
-      legendName.push('调解成功率');
+      legendName.push("调解成功");
+      legendName.push("调解失败");
+      legendName.push("调解成功率");
       // x轴
       this.options.xAxis.data = axis;
       // series
       for (const i in series) {
-        if (series[i].type == 'bar') {
+        if (series[i].type == "bar") {
           series[i].name = legendName[i];
-          series[i].type = 'bar';
+          series[i].type = "bar";
           series[i].label = {
             show: optionsSetup.isShowBar,
-            position: 'top',
+            position: "top",
             distance: optionsSetup.distanceBar,
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
-            fontWeight: optionsSetup.fontWeightBar
+            fontWeight: optionsSetup.fontWeightBar,
           };
           series[i].barWidth = optionsSetup.maxWidth;
-          series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
-          series[i].itemStyle.normal['color'] = arrColor[i];
-        } else if (series[i].type == 'line') {
+          series[i].itemStyle.normal["barBorderRadius"] = optionsSetup.radius;
+          series[i].itemStyle.normal["color"] = arrColor[i];
+        } else if (series[i].type == "line") {
           series[i].name = legendName[i];
-          series[i].type = 'line';
+          series[i].type = "line";
           series[i].yAxisIndex = 1;
           series[i].symbol = optionsSetup.symbol;
           series[i].showSymbol = optionsSetup.markPoint;
@@ -459,36 +480,36 @@ export default {
           series[i].smooth = optionsSetup.smoothCurve;
           if (optionsSetup.area) {
             series[i].areaStyle = {
-              opacity: optionsSetup.areaThickness / 100
+              opacity: optionsSetup.areaThickness / 100,
             };
           } else {
             series[i].areaStyle = {
-              opacity: 0
+              opacity: 0,
             };
           }
           series[i].itemStyle = {
             normal: {
               color: arrColor[i],
-            }
+            },
           };
           series[i].lineStyle = {
             color: arrColor[i],
-            width: optionsSetup.lineWidth
+            width: optionsSetup.lineWidth,
           };
           series[i].label = {
             show: optionsSetup.isShowLine,
-            position: 'top',
+            position: "top",
             distance: optionsSetup.distanceLine,
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
-            fontWeight: optionsSetup.fontWeightLine
+            fontWeight: optionsSetup.fontWeightLine,
           };
         }
       }
       series[0].data = bar1;
       series[1].data = bar2;
       series[2].data = line;
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     dynamicDataFn(val, refreshTime) {
@@ -504,7 +525,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -522,27 +543,27 @@ export default {
       for (const i in val.series) {
         legendName.push(val.series[i].name);
         const obj = {};
-        if (val.series[i].type == 'bar') {
+        if (val.series[i].type == "bar") {
           obj.name = val.series[i].name;
           obj.type = val.series[i].type;
           obj.label = {
             show: optionsSetup.isShowBar,
-            position: 'top',
+            position: "top",
             distance: optionsSetup.distanceBar,
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
-            fontWeight: optionsSetup.fontWeightBar
+            fontWeight: optionsSetup.fontWeightBar,
           };
           obj.barWidth = optionsSetup.maxWidth;
           obj.itemStyle = {
             normal: {
               color: arrColor[i],
               barBorderRadius: optionsSetup.radius,
-            }
+            },
           };
           obj.data = val.series[i].data;
           series.push(obj);
-        } else if (val.series[i].type == 'line') {
+        } else if (val.series[i].type == "line") {
           obj.name = val.series[i].name;
           obj.type = val.series[i].type;
           obj.yAxisIndex = 1;
@@ -552,41 +573,40 @@ export default {
           obj.smooth = optionsSetup.smoothCurve;
           if (optionsSetup.area) {
             obj.areaStyle = {
-              opacity: optionsSetup.areaThickness / 100
+              opacity: optionsSetup.areaThickness / 100,
             };
           } else {
             obj.areaStyle = {
-              opacity: 0
-            }
+              opacity: 0,
+            };
           }
           obj.itemStyle = {
             normal: {
               color: arrColor[i],
-            }
+            },
           };
           obj.lineStyle = {
             color: arrColor[i],
-            width: optionsSetup.lineWidth
+            width: optionsSetup.lineWidth,
           };
           obj.label = {
             show: optionsSetup.isShowLine,
-            position: 'top',
+            position: "top",
             distance: optionsSetup.distanceLine,
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
-            fontWeight: optionsSetup.fontWeightLine
+            fontWeight: optionsSetup.fontWeightLine,
           };
           obj.data = val.series[i].data;
           series.push(obj);
         }
       }
       this.options.series = series;
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
-  }
+  },
 };
-
 </script>
 
 <style scoped lang='scss'>

report-ui/src/views/bigscreenDesigner/designer/widget/decorate/widgetDecoratePieChart.vue

@@ -1,17 +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: "widgetRotatePieChart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -19,112 +19,112 @@ export default {
         title: {},
         series: [
           {
-            name: '最外环',
-            type: 'pie',
+            name: "最外环",
+            type: "pie",
             silent: true,
-            radius: ['98%', '97%'],
+            radius: ["98%", "97%"],
             label: {
               normal: {
-                show: false
+                show: false,
               },
             },
             labelLine: {
               normal: {
-                show: false
-              }
+                show: false,
+              },
             },
             itemStyle: {
               normal: {
                 show: false,
               },
             },
-            data: [0]
+            data: [0],
           },
           {
-            name: '外四环',
-            type: 'pie',
+            name: "外四环",
+            type: "pie",
             zlevel: 2,
             silent: true,
-            radius: ['90%', '91%'],
+            radius: ["90%", "91%"],
             startAngle: 50,
             hoverAnimation: false,
             label: {
               normal: {
-                show: false
+                show: false,
               },
             },
             labelLine: {
               normal: {
-                show: false
-              }
+                show: false,
+              },
             },
-            data: [0]
+            data: [0],
           },
           {
-            name: '里四环',
-            type: 'pie',
+            name: "里四环",
+            type: "pie",
             zlevel: 3,
             silent: true,
-            radius: ['88%', '87%'],
+            radius: ["88%", "87%"],
             label: {
               normal: {
-                show: false
+                show: false,
               },
             },
             labelLine: {
               normal: {
-                show: false
-              }
+                show: false,
+              },
             },
-            data: [0]
+            data: [0],
           },
           {
-            name: '虚线环',
-            type: 'pie',
+            name: "虚线环",
+            type: "pie",
             zlevel: 4,
             silent: true,
-            radius: ['84%', '83%'],
+            radius: ["84%", "83%"],
             label: {
               normal: {
-                show: false
+                show: false,
               },
             },
             labelLine: {
               normal: {
-                show: false
-              }
+                show: false,
+              },
             },
-            data: [0]
+            data: [0],
           },
           {
-            name: '三分环',
-            type: 'pie',
+            name: "三分环",
+            type: "pie",
             zlevel: 5,
             silent: true,
-            radius: ['80%', '78%'],
+            radius: ["80%", "78%"],
             color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
             startAngle: 50,
             avoidLabelOverlap: false,
             hoverAnimation: false,
             label: {
               normal: {
-                show: false
+                show: false,
               },
             },
-            data: [50, 20, 40]
+            data: [50, 20, 40],
           },
           {
             name: "外指标环",
-            type: 'gauge',
+            type: "gauge",
             splitNumber: 30,
             min: 0,
             max: 100,
-            radius: '73%', //图表尺寸
-            center: ['50%', '50%'],
+            radius: "73%", //图表尺寸
+            center: ["50%", "50%"],
             startAngle: 90,
             endAngle: -269.9999,
             axisLabel: {
-              show: false
+              show: false,
             },
             pointer: {
               show: 0,
@@ -134,17 +134,17 @@ export default {
             },
           },
           {
-            name: '里指标环',
-            type: 'gauge',
+            name: "里指标环",
+            type: "gauge",
             splitNumber: 30,
             min: 0,
             max: 100,
-            radius: '68%',
-            center: ['50%', '50%'],
+            radius: "68%",
+            center: ["50%", "50%"],
             startAngle: 90,
             endAngle: -269.9999,
             axisLabel: {
-              show: false
+              show: false,
             },
             pointer: {
               show: 0,
@@ -154,64 +154,61 @@ export default {
             },
           },
           {
-            name: '环外环',
-            type: 'pie',
+            name: "环外环",
+            type: "pie",
             zlevel: 20,
             silent: true,
-            radius: ['60%', '59%'],
+            radius: ["60%", "59%"],
             hoverAnimation: false,
             label: {
               normal: {
-                show: false
+                show: false,
               },
             },
             labelLine: {
               normal: {
-                show: false
-              }
+                show: false,
+              },
             },
           },
           {
-            name: '中间环形图',
-            type: 'pie',
-            radius: ['40%', '55%'],
+            name: "中间环形图",
+            type: "pie",
+            radius: ["40%", "55%"],
             avoidLabelOverlap: false,
             hoverAnimation: false,
             itemStyle: {
               normal: {
-                color: '#80ADD2',
-                borderColor: '#3D4268',
-              }
+                color: "#80ADD2",
+                borderColor: "#3D4268",
+              },
             },
             label: {
               normal: {
                 show: false,
-                position: 'center',
-
+                position: "center",
               },
               emphasis: {
                 show: true,
                 textStyle: {
-                  fontSize: '30',
-                  fontWeight: 'bold'
-                }
-              }
+                  fontSize: "30",
+                  fontWeight: "bold",
+                },
+              },
             },
             labelLine: {
               normal: {
-                show: false
-              }
+                show: false,
+              },
             },
-            data: [
-              25, 25, 25, 25, 25, 25
-            ]
+            data: [25, 25, 25, 25, 25, 25],
           },
-        ]
+        ],
       },
       optionsStyle: {}, // 样式
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
-    }
+      optionsSetup: {},
+    };
   },
   computed: {
     styleObj() {
@@ -221,9 +218,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: {
@@ -234,8 +231,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -243,6 +240,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     editorOptions() {
@@ -257,20 +262,20 @@ export default {
     },
     // 颜色设置
     setColor(color) {
-      const nullColor = 'rgba(0,0,0,0)'
+      const nullColor = "rgba(0,0,0,0)";
       if (color == "") {
-        color = nullColor
+        color = nullColor;
       }
-      return color
+      return color;
     },
     // 最外外环1
     setOptionsLastRing() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series[0];
       if (optionsSetup.isLastRingShow) {
-        series.data = [0]
+        series.data = [0];
       } else {
-        series.data = ''
+        series.data = "";
       }
       const normal = {
         color: {
@@ -286,7 +291,7 @@ export default {
           ],
         },
       };
-      series.itemStyle['normal'] = normal;
+      series.itemStyle["normal"] = normal;
     },
     setRingPie2() {
       const optionsSetup = this.optionsSetup;
@@ -300,23 +305,23 @@ export default {
               normal: {
                 color: this.setColor(optionsSetup.eightColor),
                 borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          })
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
         } else {
           dataArr.push({
             name: (i + 1).toString(),
             value: 20,
             itemStyle: {
               normal: {
-                color: 'rgba(0,0,0,0)'
-              }
-            }
-          })
+                color: "rgba(0,0,0,0)",
+              },
+            },
+          });
         }
       }
-      return dataArr
+      return dataArr;
     },
     // 八分环
     setOptionsEightRing() {
@@ -327,7 +332,7 @@ export default {
     setRingPie3() {
       const optionsSetup = this.optionsSetup;
       let dataArr = [];
-      for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
+      for (let i = 0; i < optionsSetup.dottedNum * 2; i++) {
         if (i % 2 === 0) {
           dataArr.push({
             name: (i + 1).toString(),
@@ -336,34 +341,38 @@ export default {
               normal: {
                 color: this.setColor(optionsSetup.dottedColor),
                 borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          })
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
         } else {
           dataArr.push({
             name: (i + 1).toString(),
             value: 20,
             itemStyle: {
               normal: {
-                color: 'rgba(0,0,0,0)',
-              }
-            }
-          })
+                color: "rgba(0,0,0,0)",
+              },
+            },
+          });
         }
       }
-      return dataArr
+      return dataArr;
     },
     // 虚线环
     setOptionsDottedRing() {
       const series = this.options.series;
-      series[3].data = this.setRingPie3()
+      series[3].data = this.setRingPie3();
     },
     // 三分环
     setOptionsThreeRing() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series[4];
-      series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)]
+      series.color = [
+        this.setColor(optionsSetup.three1Color),
+        this.setColor(optionsSetup.three2Color),
+        this.setColor(optionsSetup.three3Color),
+      ];
     },
     // 外指标环
     setOptionsOutRing() {
@@ -374,32 +383,30 @@ export default {
         lineStyle: {
           width: optionsSetup.outRingWidth,
           shadowBlur: 0,
-          color: [
-            [1, this.setColor(optionsSetup.outRingColor)]
-          ]
-        }
+          color: [[1, this.setColor(optionsSetup.outRingColor)]],
+        },
       };
       const axisTick = {
         show: optionsSetup.isOutTickShow,
         lineStyle: {
           color: this.setColor(optionsSetup.outTickColor),
-          width: optionsSetup.outTickWidth
+          width: optionsSetup.outTickWidth,
         },
         length: optionsSetup.outTickLength,
-        splitNumber: optionsSetup.outTickWidth
+        splitNumber: optionsSetup.outTickWidth,
       };
-      series[5].splitNumber = optionsSetup.outSplitNum
+      series[5].splitNumber = optionsSetup.outSplitNum;
       const splitLine = {
         show: optionsSetup.isOutSplitShow,
         length: optionsSetup.outSplitLength,
         lineStyle: {
           color: this.setColor(optionsSetup.outSplitColor),
           width: optionsSetup.outSplitWidth,
-        }
+        },
       };
-      series[5].axisLine = axisLine
-      series[5].axisTick = axisTick
-      series[5].splitLine = splitLine
+      series[5].axisLine = axisLine;
+      series[5].axisTick = axisTick;
+      series[5].splitLine = splitLine;
     },
     // 里指标环
     setOptionsInRing() {
@@ -410,9 +417,7 @@ export default {
         lineStyle: {
           width: optionsSetup.inRingWidth,
           shadowBlur: 0,
-          color: [
-            [1, this.setColor(optionsSetup.inRingColor)],
-          ],
+          color: [[1, this.setColor(optionsSetup.inRingColor)]],
         },
       };
       const axisTick = {
@@ -424,61 +429,61 @@ export default {
         length: optionsSetup.inTickLength,
         splitNumber: optionsSetup.inTickNum,
       };
-      series[6].splitNumber = optionsSetup.inSplitNum
+      series[6].splitNumber = optionsSetup.inSplitNum;
       const splitLine = {
         show: optionsSetup.isInSplitShow,
         length: optionsSetup.inSplitLength,
         lineStyle: {
           color: this.setColor(optionsSetup.inSplitColor),
-          width: optionsSetup.inSplitWidth
-        }
+          width: optionsSetup.inSplitWidth,
+        },
       };
-      series[6].axisLine = axisLine
-      series[6].axisTick = axisTick
-      series[6].splitLine = splitLine
+      series[6].axisLine = axisLine;
+      series[6].axisTick = axisTick;
+      series[6].splitLine = splitLine;
     },
     // 环外环设置
     setOptionsRingOnRing() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series[7];
       if (optionsSetup.isRingOnRingShow) {
-        series.data = [0]
+        series.data = [0];
       } else {
-        series.data = ''
+        series.data = "";
       }
       const itemStyle = {
         normal: {
           color: this.setColor(optionsSetup.ringOnRingColor),
-        }
-      }
-      series.itemStyle = itemStyle
+        },
+      };
+      series.itemStyle = itemStyle;
     },
     // 中饼图设置
     setOptionsPie() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series[8];
-      let width = optionsSetup.pieWidth
-      const pieWidth = width + "%"
-      series.radius = [pieWidth, '55%']
+      let width = optionsSetup.pieWidth;
+      const pieWidth = width + "%";
+      series.radius = [pieWidth, "55%"];
 
-      let pieBlocks = optionsSetup.pieBlocks
+      let pieBlocks = optionsSetup.pieBlocks;
       if (pieBlocks == "six") {
-        series.data = [25, 25, 25, 25, 25, 25]
+        series.data = [25, 25, 25, 25, 25, 25];
       } else if (pieBlocks == "five") {
-        series.data = [30, 30, 30, 30, 30]
+        series.data = [30, 30, 30, 30, 30];
       } else {
-        series.data = [40, 40, 40, 40]
+        series.data = [40, 40, 40, 40];
       }
       const itemStyle = {
         normal: {
           color: this.setColor(optionsSetup.pieColor),
           borderColor: this.setColor(optionsSetup.pieBorderColor),
-        }
-      }
-      series.itemStyle = itemStyle
-    }
-  }
-}
+        },
+      };
+      series.itemStyle = itemStyle;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">

report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.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: "WidgetFunnel",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -19,19 +20,19 @@ export default {
         title: {
           text: "",
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c}"
+          formatter: "{a} <br/>{b} : {c}",
         },
         legend: {
-          x: 'center',
-          y: '92%',
+          x: "center",
+          y: "92%",
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         series: [
           {
@@ -44,37 +45,37 @@ export default {
             label: {
               normal: {
                 show: true,
-                position: 'inside',
-                formatter: '{c}',
+                position: "inside",
+                formatter: "{c}",
                 textStyle: {
-                  color: '#fff',
+                  color: "#fff",
                   fontSize: 14,
-                }
+                },
               },
               emphasis: {
-                position: 'inside',
-                formatter: '{b}: {c}'
-              }
+                position: "inside",
+                formatter: "{b}: {c}",
+              },
             },
             itemStyle: {
               normal: {
                 opacity: 0.8,
-                borderColor: 'rgba(12, 13, 43, .9)',
+                borderColor: "rgba(12, 13, 43, .9)",
                 borderWidth: 1,
                 shadowBlur: 4,
                 shadowOffsetX: 0,
                 shadowOffsetY: 0,
-                shadowColor: 'rgba(0, 0, 0, .6)'
-              }
+                shadowColor: "rgba(0, 0, 0, .6)",
+              },
             },
-            data: []
-          }
-        ]
+            data: [],
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -85,9 +86,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: {
@@ -98,8 +99,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
     this.optionsStyle = this.value.position;
@@ -107,6 +108,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属性
@@ -134,15 +143,15 @@ export default {
       const optionsSetup = this.optionsSetup;
       const normal = {
         show: optionsSetup.isShow,
-        position: 'inside',
-        formatter: '{c}',
+        position: "inside",
+        formatter: "{c}",
         textStyle: {
           color: optionsSetup.color,
           fontSize: optionsSetup.fontSize,
           fontWeight: optionsSetup.fontWeight,
-        }
-      }
-      this.options.series[0].label['normal'] = normal;
+        },
+      };
+      this.options.series[0].label["normal"] = normal;
     },
     // 标题修改
     setOptionsTitle() {
@@ -174,8 +183,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -187,12 +196,11 @@ export default {
       legend.left = optionsSetup.lateralPosition;
       legend.right = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
@@ -235,7 +243,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -245,8 +253,8 @@ export default {
           this.options.series[key].data = val;
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue

@@ -1,10 +1,11 @@
 <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: "widgetHeatmap",
   components: {},
@@ -135,6 +136,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属性
@@ -180,7 +189,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -193,15 +202,15 @@ export default {
           textStyle: {
             // 坐标文字颜色
             color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX
-          }
+            fontSize: optionsSetup.fontSizeX,
+          },
         },
         axisLine: {
           show: true,
           lineStyle: {
             color: optionsSetup.lineColorX,
             width: optionsSetup.lineWidthX,
-          }
+          },
         },
       };
       this.options.xAxis = xAxis;
@@ -220,7 +229,7 @@ export default {
         name: optionsSetup.textNameY,
         nameTextStyle: {
           color: optionsSetup.nameColorY,
-          fontSize: optionsSetup.nameFontSizeY
+          fontSize: optionsSetup.nameFontSizeY,
         },
         // 轴反转
         inverse: optionsSetup.reversalY,
@@ -231,15 +240,15 @@ export default {
           textStyle: {
             // 坐标文字颜色
             color: optionsSetup.colorY,
-            fontSize: optionsSetup.fontSizeY
-          }
+            fontSize: optionsSetup.fontSizeY,
+          },
         },
         axisLine: {
           show: true,
           lineStyle: {
             color: optionsSetup.lineColorY,
             width: optionsSetup.lineWidthY,
-          }
+          },
         },
       };
       this.options.yAxis = yAxis;
@@ -252,9 +261,9 @@ export default {
         textStyle: {
           fontSize: optionsSetup.fontSize,
           color: optionsSetup.subTextColor,
-          fontWeight: optionsSetup.fontWeight
-        }
-      }
+          fontWeight: optionsSetup.fontWeight,
+        },
+      };
       this.options.series[0].label = lable;
     },
     // 边距设置
@@ -265,7 +274,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -279,7 +288,7 @@ export default {
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,
-        }
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -291,8 +300,8 @@ export default {
       visualMap.min = optionsSetup.dataMin;
       visualMap.max = optionsSetup.dataMax;
       visualMap.textStyle = {
-        fontSize : optionsSetup.legendFontSize,
-        color : optionsSetup.legendColor
+        fontSize: optionsSetup.legendFontSize,
+        color: optionsSetup.legendColor,
       };
       visualMap.inRange.color = optionsSetup.legendColorList.map((x) => {
         return x.color;
@@ -312,8 +321,8 @@ export default {
     //去重
     setUnique(arr) {
       let newArr = [];
-      arr.forEach(item => {
-        return newArr.includes(item) ? '' : newArr.push(item);
+      arr.forEach((item) => {
+        return newArr.includes(item) ? "" : newArr.push(item);
       });
       return newArr;
     },
@@ -324,7 +333,7 @@ export default {
       for (const i in val) {
         xAxisList[i] = val[i].axis;
         yAxisList[i] = val[i].yaxis;
-        data[i] = [val[i].axis,val[i].yaxis,val[i].num]
+        data[i] = [val[i].axis, val[i].yaxis, val[i].num];
       }
       xAxisList = this.setUnique(xAxisList);
       yAxisList = this.setUnique(yAxisList);

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

@@ -1,17 +1,18 @@
 <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: "WidgetBarCompareChart",
   //参考 https://www.makeapie.com/editor.html?c=xOjLyozu2W
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -22,19 +23,19 @@ export default {
           },
         },
         title: {
-          x: 'center',
+          x: "center",
           textStyle: {
-            color: '#ffffff',
+            color: "#ffffff",
           },
         },
         tooltip: {
           show: true,
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'line',
+            type: "line",
             lineStyle: {
-              color: '#ffffff',
-              type: 'dashed',
+              color: "#ffffff",
+              type: "dashed",
             },
           },
           /*axisPointer: {
@@ -50,67 +51,76 @@ export default {
         },
         //边距
         grid: [
-          {// 上
+          {
+            // 上
             left: 30,
             right: 20,
-            top: '60px',
+            top: "60px",
             containLabel: true,
-            bottom: '50%',
+            bottom: "50%",
           },
-          { // 下
+          {
+            // 下
             left: 30,
             containLabel: true,
             right: 20,
-            top: '51%',
+            top: "51%",
           },
         ],
         //图例
         legend: {
           textStyle: {
-            color: '#fff',
-            textAlign: 'center'
+            color: "#fff",
+            textAlign: "center",
           },
           //itemGap:80,
           //itemWidth: 0
         },
         xAxis: [
-          {//
+          {
+            //
             gridIndex: 0,
             show: true,
-            type: 'category',
+            type: "category",
             boundaryGap: true, // 居中
-            axisLine: { //x轴线
+            axisLine: {
+              //x轴线
               show: true,
               lineStyle: {
-                color: '#ffffff',
-              }
+                color: "#ffffff",
+              },
             },
-            axisTick: { // 刻度
+            axisTick: {
+              // 刻度
               show: true,
             },
-            axisLabel: { // X轴数据
+            axisLabel: {
+              // X轴数据
               show: true,
               textStyle: {
                 interval: 0,
-                color: '#ffffff',
-                fontSize: 14
-              }
+                color: "#ffffff",
+                fontSize: 14,
+              },
             },
             data: [],
           },
-          {//
+          {
+            //
             gridIndex: 1,
             show: true,
-            type: 'category',
-            position: 'top',
+            type: "category",
+            position: "top",
             boundaryGap: true, // 居中
-            axisLine: { // x轴线
+            axisLine: {
+              // x轴线
               show: true,
               lineStyle: {
-                color: '#ffffff',
-              }
+                color: "#ffffff",
+              },
             },
-            axisTick: { // 刻度
+            axisTick: {
+              // 刻度
               show: true,
             },
             axisLabel: {
@@ -128,24 +138,25 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#ffffff',
+                color: "#ffffff",
                 fontSize: 14,
               },
             },
-            axisLine: { // 轴线
+            axisLine: {
+              // 轴线
               show: true,
               lineStyle: {
-                color: '#ffffff',
+                color: "#ffffff",
               },
             },
             splitLine: {
               show: false,
               lineStyle: {
-                color: '#ffffff',
+                color: "#ffffff",
               },
             },
             axisPointer: {
-              snap: true
+              snap: true,
             },
           },
           {
@@ -155,84 +166,87 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#ffffff',
+                color: "#ffffff",
                 fontSize: 14,
               },
             },
-            axisLine: { // 轴线
+            axisLine: {
+              // 轴线
               show: true,
               lineStyle: {
-                color: '#ffffff',
+                color: "#ffffff",
               },
             },
             splitLine: {
               show: false,
               lineStyle: {
-                color: '#ffffff',
+                color: "#ffffff",
               },
             },
             axisPointer: {
-              snap: true
+              snap: true,
             },
           },
         ],
         series: [
           {
-            name: '',
-            type: 'line',
+            name: "",
+            type: "line",
             xAxisIndex: 0,
             yAxisIndex: 0,
-            showSymbol: true,// 标记点
-            symbol: 'circle',
+            showSymbol: true, // 标记点
+            symbol: "circle",
             symbolSize: 5,
             smooth: true, // 曲线，折线
             itemStyle: {
-              color: '#36c5e7',
+              color: "#36c5e7",
             },
             lineStyle: {
-              color: '#36c5e7',
+              color: "#36c5e7",
               width: 2,
             },
-            label: { // 数值
-              position: 'top',
+            label: {
+              // 数值
+              position: "top",
               distance: 10,
               show: true,
-              color: '#36c5e7',
+              color: "#36c5e7",
               fontSize: 14,
             },
             data: [],
           },
           {
-            name: '',
-            type: 'line',
+            name: "",
+            type: "line",
             xAxisIndex: 1,
             yAxisIndex: 1,
-            showSymbol: true,// 标记点
-            symbol: 'circle',
+            showSymbol: true, // 标记点
+            symbol: "circle",
             symbolSize: 5,
             smooth: true, // 曲线，折线
             itemStyle: {
-              color: '#e68b55',
+              color: "#e68b55",
             },
             lineStyle: {
-              color: '#e68b55',
+              color: "#e68b55",
               width: 2,
             },
-            label: {// 数值
-              position: 'bottom',
+            label: {
+              // 数值
+              position: "bottom",
               distance: 10,
               show: true,
-              color: '#e68b55',
+              color: "#e68b55",
               fontSize: 16,
             },
             data: [],
           },
-        ]
+        ],
       },
       optionsStyle: {},
       optionsData: {},
       optionsSetup: {},
-      flagInter: null
+      flagInter: null,
     };
   },
   computed: {
@@ -243,9 +257,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: {
@@ -256,8 +270,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -265,6 +279,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -311,48 +333,53 @@ export default {
         name: optionsSetup.nameX, // 坐标轴名称
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
-        type: 'category',
+        type: "category",
         boundaryGap: optionsSetup.boundaryX, // 值居中
-        axisLine: { //x轴线
+        axisLine: {
+          //x轴线
           show: optionsSetup.lineX,
           lineStyle: {
             color: optionsSetup.lineColorX,
-          }
+          },
         },
-        axisTick: { // 刻度
+        axisTick: {
+          // 刻度
           show: optionsSetup.tickLineX,
         },
-        axisLabel: { // X轴数据
+        axisLabel: {
+          // X轴数据
           show: true,
           interval: optionsSetup.splitNumberX,
           textStyle: {
             color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX
-          }
+            fontSize: optionsSetup.fontSizeX,
+          },
         },
-      }
+      };
       const xAxis1 = {
         gridIndex: 1,
         show: optionsSetup.isShowX,
-        type: 'category',
-        position: 'top',
+        type: "category",
+        position: "top",
         boundaryGap: optionsSetup.boundaryX, // 值居中
-        axisLine: { // x轴线
+        axisLine: {
+          // x轴线
           show: optionsSetup.lineX,
           lineStyle: {
             color: optionsSetup.lineColorX,
-          }
+          },
         },
-        axisTick: { // 刻度
+        axisTick: {
+          // 刻度
           show: optionsSetup.tickLineX,
         },
         axisLabel: {
           show: false,
           interval: optionsSetup.splitNumberX,
         },
-      }
+      };
       this.options.xAxis[0] = xAxis0;
       this.options.xAxis[1] = xAxis1;
     },
@@ -367,7 +394,7 @@ export default {
         name: optionsSetup.textNameY, // 坐标轴名称
         nameTextStyle: {
           color: optionsSetup.nameColorY,
-          fontSize: optionsSetup.nameFontSizeY
+          fontSize: optionsSetup.nameFontSizeY,
         },
         axisLabel: {
           show: true,
@@ -376,10 +403,12 @@ export default {
             fontSize: optionsSetup.fontSizeYTop,
           },
         },
-        axisTick: { // 刻度
+        axisTick: {
+          // 刻度
           show: optionsSetup.tickLineYTop,
         },
-        axisLine: { // 轴线
+        axisLine: {
+          // 轴线
           show: optionsSetup.lineYTop,
           lineStyle: {
             color: optionsSetup.lineColorYTop,
@@ -393,10 +422,10 @@ export default {
           },
         },
         axisPointer: {
-          snap: true
+          snap: true,
         },
-      }
-      this.options.yAxis[0] = yAxis
+      };
+      this.options.yAxis[0] = yAxis;
     },
     // 下Y轴设置
     setOptionsYBottom() {
@@ -409,7 +438,7 @@ export default {
         name: optionsSetup.textNameY, // 坐标轴名称
         nameTextStyle: {
           color: optionsSetup.nameColorY,
-          fontSize: optionsSetup.nameFontSizeY
+          fontSize: optionsSetup.nameFontSizeY,
         },
         inverse: true, // 翻转
         axisLabel: {
@@ -419,10 +448,12 @@ export default {
             fontSize: optionsSetup.fontSizeYBottom,
           },
         },
-        axisTick: { // 刻度
+        axisTick: {
+          // 刻度
           show: optionsSetup.tickLineYBottom,
         },
-        axisLine: { // 轴线
+        axisLine: {
+          // 轴线
           show: optionsSetup.lineYBottom,
           lineStyle: {
             color: optionsSetup.lineColorYBottom,
@@ -436,82 +467,82 @@ export default {
           },
         },
         axisPointer: {
-          snap: true
+          snap: true,
         },
-      }
-      this.options.yAxis[1] = yAxis
+      };
+      this.options.yAxis[1] = yAxis;
     },
     // 数值设定 折线设置
     setOptionsTop() {
       const optionsSetup = this.optionsSetup;
-      const series = this.options.series
+      const series = this.options.series;
       // 折线
       for (const key in series) {
-        series[key].symbol = optionsSetup.symbol
-        series[key].showSymbol = optionsSetup.markPoint
-        series[key].symbolSize = optionsSetup.pointSize
-        series[key].smooth = optionsSetup.smoothCurve
+        series[key].symbol = optionsSetup.symbol;
+        series[key].showSymbol = optionsSetup.markPoint;
+        series[key].symbolSize = optionsSetup.pointSize;
+        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,
+          };
         }
       }
       // 数值
-      if (series[0].type == 'line') {
+      if (series[0].type == "line") {
         series[0].label = {
-          position: 'top',
+          position: "top",
           distance: 10,
           show: optionsSetup.isShow,
           color: optionsSetup.subTextColor,
           fontSize: optionsSetup.fontSize,
-          fontWeight: optionsSetup.fontWeight
-        }
+          fontWeight: optionsSetup.fontWeight,
+        };
         series[1].label = {
-          position: 'bottom',
+          position: "bottom",
           distance: 10,
           show: optionsSetup.isShow,
           color: optionsSetup.subTextColor,
           fontSize: optionsSetup.fontSize,
-          fontWeight: optionsSetup.fontWeight
-        }
+          fontWeight: optionsSetup.fontWeight,
+        };
       }
     },
     // tooltip 提示语设置
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
-      let tooltip = {}
+      let tooltip = {};
       if (optionsSetup.tipsType == "line") {
         tooltip = {
           show: optionsSetup.tipsShow,
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
             type: optionsSetup.tipsType,
             lineStyle: {
               color: optionsSetup.tipsColor,
-              type: 'dashed',
+              type: "dashed",
             },
           },
-        }
+        };
       } else {
         tooltip = {
           show: optionsSetup.tipsShow,
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
             type: optionsSetup.tipsType,
             lineStyle: {
               color: optionsSetup.tipsColor,
-              type: 'dashed',
+              type: "dashed",
             },
             crossStyle: {
               color: optionsSetup.tipsColor,
-            }
+            },
           },
-        }
+        };
       }
       this.options.tooltip = tooltip;
     },
@@ -519,21 +550,23 @@ export default {
     setOptionsGrid() {
       const optionsSetup = this.optionsSetup;
       const grid = [
-        {// 上
+        {
+          // 上
           left: optionsSetup.marginLeft,
           right: optionsSetup.marginRight,
           top: optionsSetup.marginTop,
           containLabel: true,
-          bottom: '50%',
+          bottom: "50%",
         },
-        { // 下
+        {
+          // 下
           left: optionsSetup.marginLeft,
           right: optionsSetup.marginRight,
           containLabel: true,
-          top: '51%',
+          top: "51%",
           bottom: optionsSetup.marginBottom,
         },
-      ]
+      ];
       this.options.grid = grid;
     },
     // 图例操作
@@ -543,39 +576,38 @@ export default {
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
     // 图例名称设置
-    setOptionsLegendName(name){
+    setOptionsLegendName(name) {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       const legendName = optionsSetup.legendName;
       // 图例没有手动写则显示原值，写了则显示新值
-      if (null == legendName || legendName == '') {
+      if (null == legendName || legendName == "") {
         for (let i = 0; i < name.length; i++) {
           series[i].name = name[i];
         }
-        this.options.legend['data'] = name;
-      }else {
-        const arr = legendName.split('|');
+        this.options.legend["data"] = name;
+      } else {
+        const arr = legendName.split("|");
         for (let i = 0; i < arr.length; i++) {
           series[i].name = arr[i];
         }
-        this.options.legend['data'] = arr
+        this.options.legend["data"] = arr;
       }
     },
     // 颜色修改、宽度修改
     setOptionsColor() {
       const optionsSetup = this.optionsSetup;
       const customColor = optionsSetup.customColor;
-      const series = this.options.series
+      const series = this.options.series;
       const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color);
@@ -584,13 +616,13 @@ export default {
       for (const key in series) {
         const itemStyle = {
           color: arrColor[key],
-        }
+        };
         const lineStyle = {
           color: arrColor[key],
           width: optionsSetup.lineWidth,
-        }
-        this.options.series[key].itemStyle = itemStyle
-        this.options.series[key].lineStyle = lineStyle
+        };
+        this.options.series[key].itemStyle = itemStyle;
+        this.options.series[key].lineStyle = lineStyle;
       }
     },
     // 数据解析
@@ -600,16 +632,16 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-        optionsData.dynamicData,
-        optionsData.refreshTime,
-        optionsSetup
-        );
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
     },
     //去重
     setUnique(arr) {
       let newArr = [];
-      arr.forEach(item => {
-        return newArr.includes(item) ? '' : newArr.push(item);
+      arr.forEach((item) => {
+        return newArr.includes(item) ? "" : newArr.push(item);
       });
       return newArr;
     },
@@ -639,17 +671,17 @@ export default {
         }
         arrayList.push({
           name: yAxisList[i],
-          data: data
-        })
+          data: data,
+        });
         legendName.push(yAxisList[i]);
       }
-      this.options.series[0]['name'] = arrayList[0].name;
-      this.options.series[0]['data'] = arrayList[0].data;
-      this.options.series[1]['name'] = arrayList[1].name;
-      this.options.series[1]['data'] = arrayList[1].data;
-      this.options.xAxis[0]['data'] = xAxisList;
-      this.options.xAxis[1]['data'] = xAxisList;
-      this.options.legend['data'] = legendName;
+      this.options.series[0]["name"] = arrayList[0].name;
+      this.options.series[0]["data"] = arrayList[0].data;
+      this.options.series[1]["name"] = arrayList[1].name;
+      this.options.series[1]["data"] = arrayList[1].data;
+      this.options.xAxis[0]["data"] = xAxisList;
+      this.options.xAxis[1]["data"] = xAxisList;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     // 动态数据
@@ -666,26 +698,26 @@ export default {
     },
     getEchartData(val, optionsSetup) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(optionsSetup, res);
       });
     },
     renderingFn(optionsSetup, val) {
       const legendName = [];
-      this.options.xAxis[0]['data'] = val.xAxis;
-      this.options.xAxis[1]['data'] = val.xAxis;
+      this.options.xAxis[0]["data"] = val.xAxis;
+      this.options.xAxis[1]["data"] = val.xAxis;
       if (val.series[0].type == "line") {
-        this.options.series[0]['name'] = val.series[0].name;
-        this.options.series[0]['data'] = val.series[0].data;
-        this.options.series[1]['name'] = val.series[1].name;
-        this.options.series[1]['data'] = val.series[1].data;
+        this.options.series[0]["name"] = val.series[0].name;
+        this.options.series[0]["data"] = val.series[0].data;
+        this.options.series[1]["name"] = val.series[1].name;
+        this.options.series[1]["data"] = val.series[1].data;
         legendName.push(val.series[0].name);
         legendName.push(val.series[1].name);
       }
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -695,5 +727,4 @@ export default {
   height: 100%;
   overflow: hidden;
 }
-
 </style>

report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.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: "WidgetBarStackchart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -18,8 +19,8 @@ export default {
         grid: {},
         legend: {
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         xAxis: {
           type: "category",
@@ -27,9 +28,9 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         yAxis: {
           type: "value",
@@ -37,26 +38,26 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         series: [
           {
             data: [],
-            name: '',
+            name: "",
             type: "line",
             barGap: "0%",
             itemStyle: {
-              barBorderRadius: null
-            }
-          }
-        ]
+              barBorderRadius: null,
+            },
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsSetup: {},
-      flagInter: null
+      flagInter: null,
     };
   },
   computed: {
@@ -67,9 +68,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: {
@@ -80,8 +81,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -89,6 +90,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -134,7 +143,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -147,23 +156,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;
     },
@@ -181,7 +190,7 @@ export default {
         name: optionsSetup.textNameY,
         nameTextStyle: {
           color: optionsSetup.nameColorY,
-          fontSize: optionsSetup.nameFontSizeY
+          fontSize: optionsSetup.nameFontSizeY,
         },
         // 轴反转
         inverse: optionsSetup.reversalY,
@@ -192,23 +201,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;
     },
@@ -218,14 +227,14 @@ export default {
       let areaStyle = [];
       if (optionsSetup.area) {
         areaStyle = {
-          opacity: optionsSetup.areaThickness / 100
-        }
+          opacity: optionsSetup.areaThickness / 100,
+        };
       } else {
         areaStyle = {
-          opacity: 0
-        }
+          opacity: 0,
+        };
       }
-      return areaStyle
+      return areaStyle;
     },
     // tooltip 提示语设置，鼠标放置显示
     setOptionsTooltip() {
@@ -235,8 +244,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -248,7 +257,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -259,12 +268,11 @@ export default {
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
@@ -274,17 +282,17 @@ export default {
       const series = this.options.series;
       const legendName = optionsSetup.legendName;
       // 图例没有手动写则显示原值，写了则显示新值
-      if (null == legendName || legendName == '') {
+      if (null == legendName || legendName == "") {
         for (let i = 0; i < name.length; i++) {
           series[i].name = name[i];
         }
-        this.options.legend['data'] = name;
+        this.options.legend["data"] = name;
       } else {
-        const arr = legendName.split('|');
+        const arr = legendName.split("|");
         for (let i = 0; i < arr.length; i++) {
           series[i].name = arr[i];
         }
-        this.options.legend['data'] = arr
+        this.options.legend["data"] = arr;
       }
     },
     // 图例颜色修改
@@ -307,16 +315,16 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-          optionsData.dynamicData,
-          optionsData.refreshTime,
-          optionsSetup
-        );
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
     },
     //去重
     setUnique(arr) {
       let newArr = [];
-      arr.forEach(item => {
-        return newArr.includes(item) ? '' : newArr.push(item);
+      arr.forEach((item) => {
+        return newArr.includes(item) ? "" : newArr.push(item);
       });
       return newArr;
     },
@@ -379,7 +387,7 @@ export default {
             color: optionsSetup.subTextColor,
             fontWeight: optionsSetup.fontWeight,
           },
-        })
+        });
         legendName.push(yAxisList[i]);
       }
       this.options.series = series;
@@ -394,7 +402,7 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     // 动态数据
@@ -411,7 +419,7 @@ export default {
     },
     getEchartData(val, optionsSetup) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(optionsSetup, res);
       });
     },
@@ -467,15 +475,15 @@ export default {
               color: optionsSetup.subTextColor,
               fontWeight: optionsSetup.fontWeight,
             },
-          })
+          });
         }
         legendName.push(val.series[i].name);
       }
       this.options.series = series;
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -485,5 +493,4 @@ export default {
   height: 100%;
   overflow: hidden;
 }
-
 </style>

report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue

@@ -41,159 +41,159 @@ let geoCoordMap = {
   广西壮族自治区: [108.479, 23.1152],
   海南省: [110.3893, 19.8516],
   上海市: [121.4648, 31.2891],
-  香港: [114.173355,22.320048],
-  澳门: [113.54909,22.198951]
+  香港: [114.173355, 22.320048],
+  澳门: [113.54909, 22.198951],
 };
 let data = [
   {
     name: "南海诸岛",
-    value: 1
+    value: 1,
   },
   {
     name: "北京",
-    value: 524
+    value: 524,
   },
   {
     name: "天津",
-    value: 14
+    value: 14,
   },
   {
     name: "上海",
-    value: 150
+    value: 150,
   },
   {
     name: "重庆",
-    value: 75
+    value: 75,
   },
   {
     name: "河北",
-    value: 13
+    value: 13,
   },
   {
     name: "河南",
-    value: 83
+    value: 83,
   },
   {
     name: "云南",
-    value: 11
+    value: 11,
   },
   {
     name: "辽宁",
-    value: 19
+    value: 19,
   },
   {
     name: "黑龙江",
-    value: 15
+    value: 15,
   },
   {
     name: "湖南",
-    value: 69
+    value: 69,
   },
   {
     name: "安徽",
-    value: 260
+    value: 260,
   },
   {
     name: "山东",
-    value: 39
+    value: 39,
   },
   {
     name: "新疆",
-    value: 4
+    value: 4,
   },
   {
     name: "江苏",
-    value: 31
+    value: 31,
   },
   {
     name: "浙江",
-    value: 104
+    value: 104,
   },
   {
     name: "江西",
-    value: 36
+    value: 36,
   },
   {
     name: "湖北",
-    value: 1052
+    value: 1052,
   },
   {
     name: "广西",
-    value: 33
+    value: 33,
   },
   {
     name: "甘肃",
-    value: 347
+    value: 347,
   },
   {
     name: "山西",
-    value: 8
+    value: 8,
   },
   {
     name: "内蒙古",
-    value: 157
+    value: 157,
   },
   {
     name: "陕西",
-    value: 22
+    value: 22,
   },
   {
     name: "吉林",
-    value: 4
+    value: 4,
   },
   {
     name: "福建",
-    value: 36
+    value: 36,
   },
   {
     name: "贵州",
-    value: 39
+    value: 39,
   },
   {
     name: "广东",
-    value: 996
+    value: 996,
   },
   {
     name: "青海",
-    value: 27
+    value: 27,
   },
   {
     name: "西藏",
-    value: 31
+    value: 31,
   },
   {
     name: "四川",
-    value: 46
+    value: 46,
   },
   {
     name: "宁夏",
-    value: 16
+    value: 16,
   },
   {
     name: "海南",
-    value: 22
+    value: 22,
   },
   {
     name: "台湾",
-    value: 6
+    value: 6,
   },
   {
     name: "香港",
-    value: 2
+    value: 2,
   },
   {
     name: "澳门",
-    value: 9
-  }
+    value: 9,
+  },
 ];
-let convertData = function(data) {
+let convertData = function (data) {
   let res = [];
   for (let i = 0; i < data.length; i++) {
     let geoCoord = geoCoordMap[data[i].name];
     if (geoCoord) {
       res.push({
         name: data[i].name,
-        value: geoCoord.concat(data[i].value)
+        value: geoCoord.concat(data[i].value),
       });
     }
   }
@@ -203,26 +203,26 @@ let max = 6000,
   min = 10;
 let maxSize4Pin = 100,
   minSize4Pin = 20;
-
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "widgetAirBubbleMap",
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
       options: {
         //backgroundColor: '#0F1C3C',
         tooltip: {
-          trigger: 'item',
+          trigger: "item",
           formatter: function (params) {
-            if (params.value.length >1 ) {
+            if (params.value.length > 1) {
               return params.data.name + "" + params.data.value[2];
             } else {
               return params.name;
             }
-          }
+          },
         },
         geo: {
           map: "china",
@@ -230,8 +230,8 @@ export default {
           roam: false,
           label: {
             emphasis: {
-              show: false
-            }
+              show: false,
+            },
           },
           layoutSize: "80%",
           itemStyle: {
@@ -244,21 +244,21 @@ export default {
                 [
                   {
                     offset: 0,
-                    color: "#00F6FF"
+                    color: "#00F6FF",
                   },
                   {
                     offset: 1,
-                    color: "#53D9FF"
-                  }
+                    color: "#53D9FF",
+                  },
                 ],
                 false
               ),
               borderWidth: 3,
               shadowColor: "rgba(10,76,139,1)",
               shadowOffsetY: 0,
-              shadowBlur: 60
-            }
-          }
+              shadowBlur: 60,
+            },
+          },
         },
         series: [
           {
@@ -271,11 +271,11 @@ export default {
                 position: "right",
                 show: true,
                 color: "#53D9FF",
-                fontSize: 20
+                fontSize: 20,
               },
               emphasis: {
-                show: true
-              }
+                show: true,
+              },
             },
             itemStyle: {
               normal: {
@@ -288,16 +288,16 @@ export default {
                   colorStops: [
                     {
                       offset: 0,
-                      color: "#073684" // 0% 处的颜色
+                      color: "#073684", // 0% 处的颜色
                     },
                     {
                       offset: 1,
-                      color: "#061E3D" // 100% 处的颜色
-                    }
-                  ]
+                      color: "#061E3D", // 100% 处的颜色
+                    },
+                  ],
                 },
                 borderColor: "#215495",
-                borderWidth: 1
+                borderWidth: 1,
               },
               //鼠标放置颜色加深
               emphasis: {
@@ -309,23 +309,23 @@ export default {
                   colorStops: [
                     {
                       offset: 0,
-                      color: "#073684" // 0% 处的颜色
+                      color: "#073684", // 0% 处的颜色
                     },
                     {
                       offset: 1,
-                      color: "#2B91B7" // 100% 处的颜色
-                    }
-                  ]
-                }
-              }
+                      color: "#2B91B7", // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
             },
-            data: data
+            data: data,
           },
           {
             type: "effectScatter",
             coordinateSystem: "geo",
             rippleEffect: {
-              brushType: "stroke"
+              brushType: "stroke",
             },
             showEffectOn: "render",
             itemStyle: {
@@ -339,20 +339,20 @@ export default {
                   colorStops: [
                     {
                       offset: 0,
-                      color: "rgba(5,80,151,0.2)"
+                      color: "rgba(5,80,151,0.2)",
                     },
                     {
                       offset: 0.8,
-                      color: "rgba(5,80,151,0.8)"
+                      color: "rgba(5,80,151,0.8)",
                     },
                     {
                       offset: 1,
-                      color: "rgba(0,108,255,0.7)"
-                    }
+                      color: "rgba(0,108,255,0.7)",
+                    },
                   ],
-                  global: false
-                }
-              }
+                  global: false,
+                },
+              },
             },
             label: {
               normal: {
@@ -360,19 +360,19 @@ export default {
                 color: "#fff",
                 fontWeight: "bold",
                 position: "inside",
-                formatter: function(para) {
+                formatter: function (para) {
                   return "{cnNum|" + para.data.value[2] + "}";
                 },
                 rich: {
                   cnNum: {
                     fontSize: 13,
-                    color: "#D4EEFF"
-                  }
-                }
-              }
+                    color: "#D4EEFF",
+                  },
+                },
+              },
             },
             symbol: "circle",
-            symbolSize: function(val) {
+            symbolSize: function (val) {
               if (val[2] == 0) {
                 return 0;
               }
@@ -384,14 +384,14 @@ export default {
               );
             },
             data: convertData(data),
-            zlevel: 1
-          }
-        ]
+            zlevel: 1,
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -402,9 +402,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: {
@@ -415,8 +415,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -424,6 +424,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -465,7 +473,7 @@ export default {
         show: optionsSetup.isShowMap,
         color: optionsSetup.fontTextColor,
         fontSize: optionsSetup.fontTextSize,
-        fontWeight: optionsSetup.fontTextWeight
+        fontWeight: optionsSetup.fontTextWeight,
       };
       label["normal"] = normal;
     },
@@ -482,16 +490,16 @@ export default {
           colorStops: [
             {
               offset: 0,
-              color: optionsSetup.font0PreColor // 0% 处的颜色
+              color: optionsSetup.font0PreColor, // 0% 处的颜色
             },
             {
               offset: 1,
-              color: optionsSetup.font100PreColor // 100% 处的颜色
-            }
-          ]
+              color: optionsSetup.font100PreColor, // 100% 处的颜色
+            },
+          ],
         },
         borderColor: "#215495",
-        borderWidth: 1
+        borderWidth: 1,
       };
       //鼠标放置颜色加深
       const emphasis = {
@@ -503,14 +511,14 @@ export default {
           colorStops: [
             {
               offset: 0,
-              color: "#073684" // 0% 处的颜色
+              color: "#073684", // 0% 处的颜色
             },
             {
               offset: 1,
-              color: optionsSetup.fontHighlightColor // 100% 处的颜色
-            }
-          ]
-        }
+              color: optionsSetup.fontHighlightColor, // 100% 处的颜色
+            },
+          ],
+        },
       };
       itemStyle["normal"] = normal;
       itemStyle["emphasis"] = emphasis;
@@ -535,16 +543,16 @@ export default {
         color: "#fff",
         fontWeight: "bold",
         position: "inside",
-        formatter: function(para) {
+        formatter: function (para) {
           return "{cnNum|" + para.data.value[2] + "}";
         },
         rich: {
           cnNum: {
             fontSize: optionsSetup.fontDataSize,
             color: optionsSetup.fontDataColor,
-            fontWeight: optionsSetup.fontDataWeight
-          }
-        }
+            fontWeight: optionsSetup.fontDataWeight,
+          },
+        },
       };
       const data = convertData(val);
       this.options.series[1]["data"] = data;
@@ -563,7 +571,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -576,22 +584,22 @@ export default {
         color: "#fff",
         fontWeight: "bold",
         position: "inside",
-        formatter: function(para) {
+        formatter: function (para) {
           return "{cnNum|" + para.data.value[2] + "}";
         },
         rich: {
           cnNum: {
             fontSize: optionsSetup.fontDataSize,
             color: optionsSetup.fontDataColor,
-            fontWeight: optionsSetup.fontDataWeight
-          }
-        }
+            fontWeight: optionsSetup.fontDataWeight,
+          },
+        },
       };
       const data = convertData(val);
       this.options.series[1]["data"] = data;
       label["normal"] = normal;
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue

@@ -1,12 +1,13 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 <script>
+import { eventBusParams } from "@/utils/screen";
 import "echarts/map/js/china.js";
 import echarts from "echarts";
-import {conversionCity} from '@/utils/china';
+import { conversionCity } from "@/utils/china";
 /*let geoCoordMap = {
   上海市: [121.4648, 31.2891],
   东莞市: [113.8953, 22.901],
@@ -130,7 +131,7 @@ export default {
   name: "widgetLineMap",
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -138,38 +139,44 @@ export default {
         title: {
           left: "center",
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         tooltip: {
-          trigger: 'item',
+          trigger: "item",
           formatter: function (params, ticket, callback) {
             if (params.seriesType == "effectScatter") {
               return "线路：" + params.data.name + "" + params.data.value[2];
             } else if (params.seriesType == "lines") {
-              return params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value;
+              return (
+                params.data.fromName +
+                ">" +
+                params.data.toName +
+                "<br />" +
+                params.data.value
+              );
             } else {
               return params.name;
             }
-          }
+          },
         },
         legend: {
           show: true,
-          orient: 'vertical',
-          top: 'bottom',
-          left: 'right',
+          orient: "vertical",
+          top: "bottom",
+          left: "right",
           textStyle: {
-            color: '#fff'
+            color: "#fff",
           },
-          selectedMode: 'multiple',
+          selectedMode: "multiple",
         },
         geo: {
           map: "china",
           label: {
             emphasis: {
               show: true,
-              color: "white"
-            }
+              color: "white",
+            },
           },
           roam: true,
           itemStyle: {
@@ -179,8 +186,8 @@ export default {
               borderWidth: 1,
             },
             emphasis: {
-              areaColor: "#2a333d"
-            }
+              areaColor: "#2a333d",
+            },
           },
         },
         series: [
@@ -193,97 +200,97 @@ export default {
               period: 6,
               trailLength: 0.7,
               color: "#fff",
-              symbolSize: 3
+              symbolSize: 3,
             },
             lineStyle: {
               normal: {
-                color: '#a6c84c',
+                color: "#a6c84c",
                 width: 0,
-                curveness: 0.2
-              }
+                curveness: 0.2,
+              },
             },
             data: [],
           },
           {
             type: "lines",
             zlevel: 2,
-            symbol: ['none', 'arrow'],
+            symbol: ["none", "arrow"],
             symbolSize: 10,
             effect: {
               show: true,
               period: 4,
               trailLength: 0,
-              symbol: 'arrow',
-              symbolSize: 5
+              symbol: "arrow",
+              symbolSize: 5,
             },
             lineStyle: {
               normal: {
                 // 颜色+ 线条
-                color: '#ffa022',
+                color: "#ffa022",
                 width: 1,
                 opacity: 0.4,
-                curveness: 0.2
-              }
+                curveness: 0.2,
+              },
             },
             data: [],
           },
           {
             // 起点
             //name: tempData[0],
-            type: 'effectScatter',
-            coordinateSystem: 'geo',
+            type: "effectScatter",
+            coordinateSystem: "geo",
             zlevel: 2,
             rippleEffect: {
-              brushType: 'stroke'
+              brushType: "stroke",
             },
             label: {
               normal: {
                 show: true,
-                position: 'right',
-                formatter: '{b}',
+                position: "right",
+                formatter: "{b}",
                 fontSize: 22,
-              }
+              },
             },
             // 点的大小
             symbolSize: 10,
             itemStyle: {
               normal: {
                 // 地图点颜色
-                color: '#46bee9'
-              }
+                color: "#46bee9",
+              },
             },
             data: [],
           },
           {
             // 终点
             //name: tempData[0],
-            type: 'effectScatter',
-            coordinateSystem: 'geo',
+            type: "effectScatter",
+            coordinateSystem: "geo",
             zlevel: 2,
             rippleEffect: {
-              brushType: 'stroke'
+              brushType: "stroke",
             },
             label: {
               normal: {
                 show: true,
-                position: 'right',
-                formatter: '{b}',
+                position: "right",
+                formatter: "{b}",
                 fontSize: 22,
-              }
+              },
             },
             // 点的大小
             symbolSize: 10,
             itemStyle: {
               normal: {
                 // 地图点颜色
-                color: '#46bee9'
-              }
+                color: "#46bee9",
+              },
             },
             data: [],
           },
-        ]
+        ],
       },
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -294,9 +301,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: {
@@ -306,8 +313,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
     this.optionsStyle = this.value.position;
@@ -316,6 +323,14 @@ export default {
   },
   mounted() {
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     convertData(data) {
@@ -326,14 +341,12 @@ export default {
         let targetCoord = geoCoordMap[dataItem.target];
         if (sourceCoord && targetCoord) {
           res.push({
-              fromName: dataItem.source,
-              toName: dataItem.target,
-              coords: [sourceCoord, targetCoord],
-              value: dataItem.value,
-            }
-          )
+            fromName: dataItem.source,
+            toName: dataItem.target,
+            coords: [sourceCoord, targetCoord],
+            value: dataItem.value,
+          });
         }
-        ;
       }
       return res;
     },
@@ -369,12 +382,12 @@ export default {
       this.options.title = title;
     },
     // 起点设置
-    setOptionsSource(){
+    setOptionsSource() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series[2];
       const normal = {
         show: optionsSetup.isShowSource,
-        position: 'right',
+        position: "right",
         color: optionsSetup.sourceFontTextColor,
         fontSize: optionsSetup.sourceFontTextSize,
         fontWeight: optionsSetup.sourceFontTextWeight,
@@ -382,19 +395,19 @@ export default {
       const itemStyle = {
         normal: {
           color: optionsSetup.sourcePointColor,
-        }
+        },
       };
       series.symbolSize = optionsSetup.sourceSymbolSize;
       series.label.normal = normal;
       series.itemStyle = itemStyle;
     },
     // 终点设置
-    setOptionsTarget(){
+    setOptionsTarget() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series[3];
       const normal = {
         show: optionsSetup.isShowTarget,
-        position: 'right',
+        position: "right",
         color: optionsSetup.targetFontTextColor,
         fontSize: optionsSetup.targetFontTextSize,
         fontWeight: optionsSetup.targetFontTextWeight,
@@ -402,14 +415,14 @@ export default {
       const itemStyle = {
         normal: {
           color: optionsSetup.targetPointColor,
-        }
+        },
       };
       series.symbolSize = optionsSetup.targetSymbolSize;
       series.label.normal = normal;
       series.itemStyle = itemStyle;
     },
     // 图标设置
-    setOptionsSymbol(){
+    setOptionsSymbol() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series[1];
       const effect = {
@@ -420,22 +433,22 @@ export default {
         symbolSize: optionsSetup.symbolSize,
         color: optionsSetup.symbolColor,
       };
-      series['effect'] = effect;
+      series["effect"] = effect;
     },
     setSymbol(optionsSetup) {
       let symbol;
-      if (optionsSetup.symbol == 'plane') {
+      if (optionsSetup.symbol == "plane") {
         symbol = planePath;
       } else {
         symbol = "arrow";
       }
       return symbol;
     },
-    setPeriod(optionsSetup){
+    setPeriod(optionsSetup) {
       let period;
-      if (optionsSetup.symbol == 'plane') {
+      if (optionsSetup.symbol == "plane") {
         period = optionsSetup.symbolPeriod - 1;
-      }else {
+      } else {
         period = optionsSetup.symbolPeriod;
       }
       return period;
@@ -450,10 +463,10 @@ export default {
           color: optionsSetup.lineColor,
           width: optionsSetup.lineWidth,
           opacity: 0.4,
-          curveness: 0.2
-        }
+          curveness: 0.2,
+        },
       };
-      series['lineStyle'] = lineStyle;
+      series["lineStyle"] = lineStyle;
     },
     // 地图颜色设置
     setOptionsColor() {
@@ -467,7 +480,7 @@ export default {
         emphasis: {
           // 地图块颜色
           areaColor: optionsSetup.highlightColor,
-        }
+        },
       };
       this.options.geo["itemStyle"] = itemStyle;
     },
@@ -486,16 +499,16 @@ export default {
         if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
           return {
             name: dataItem.source,
-            value: geoCoordMap[dataItem.source].concat([dataItem.value])
-          }
+            value: geoCoordMap[dataItem.source].concat([dataItem.value]),
+          };
         }
       });
       series[3]["data"] = val.map(function (dataItem) {
         if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
           return {
             name: dataItem.target,
-            value: geoCoordMap[dataItem.target].concat([dataItem.value])
-          }
+            value: geoCoordMap[dataItem.target].concat([dataItem.value]),
+          };
         }
       });
     },
@@ -512,7 +525,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -524,20 +537,20 @@ export default {
         if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
           return {
             name: dataItem.source,
-            value: geoCoordMap[dataItem.source].concat([dataItem.value])
-          }
+            value: geoCoordMap[dataItem.source].concat([dataItem.value]),
+          };
         }
       });
       series[3]["data"] = val.map(function (dataItem) {
         if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
           return {
             name: dataItem.target,
-            value: geoCoordMap[dataItem.target].concat([dataItem.value])
-          }
+            value: geoCoordMap[dataItem.target].concat([dataItem.value]),
+          };
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue

@@ -1,25 +1,25 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
 import echarts from "echarts";
-
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "WidgetGauge",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
       options: {
         series: [
           {
-            type: 'gauge',
+            type: "gauge",
             z: 100,
             axisLine: {
               lineStyle: {
@@ -30,15 +30,15 @@ export default {
                     new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                       {
                         offset: 0,
-                        color: 'rgba(0, 237, 3,0.1)',
+                        color: "rgba(0, 237, 3,0.1)",
                       },
                       {
                         offset: 0.5,
-                        color: 'rgba(0, 237, 3,0.6)',
+                        color: "rgba(0, 237, 3,0.6)",
                       },
                       {
                         offset: 1,
-                        color: 'rgba(0, 237, 3,1)',
+                        color: "rgba(0, 237, 3,1)",
                       },
                     ]),
                   ],
@@ -47,15 +47,15 @@ export default {
                     new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                       {
                         offset: 0,
-                        color: 'rgba(255, 184, 0,0.1)',
+                        color: "rgba(255, 184, 0,0.1)",
                       },
                       {
                         offset: 0.5,
-                        color: 'rgba(255, 184, 0,0.6)',
+                        color: "rgba(255, 184, 0,0.6)",
                       },
                       {
                         offset: 1,
-                        color: 'rgba(255, 184, 0,1)',
+                        color: "rgba(255, 184, 0,1)",
                       },
                     ]),
                   ],
@@ -64,15 +64,15 @@ export default {
                     new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                       {
                         offset: 0,
-                        color: 'rgba(175, 36, 74,0.1)',
+                        color: "rgba(175, 36, 74,0.1)",
                       },
                       {
                         offset: 0.5,
-                        color: 'rgba(255, 36, 74,0.6)',
+                        color: "rgba(255, 36, 74,0.6)",
                       },
                       {
                         offset: 1,
-                        color: 'rgba(255, 36, 74,1)',
+                        color: "rgba(255, 36, 74,1)",
                       },
                     ]),
                   ],
@@ -81,7 +81,7 @@ export default {
             },
             pointer: {
               itemStyle: {
-                color: 'auto',
+                color: "auto",
               },
             },
             axisTick: {
@@ -89,7 +89,7 @@ export default {
               distance: 0,
               length: 10,
               lineStyle: {
-                color: 'auto',
+                color: "auto",
                 width: 2,
               },
             },
@@ -98,20 +98,20 @@ export default {
               distance: 0,
               length: 14,
               lineStyle: {
-                color: 'auto',
+                color: "auto",
                 width: 4,
               },
             },
             axisLabel: {
               show: true,
-              color: 'white',
+              color: "white",
               distance: 2,
               fontSize: 10,
             },
             detail: {
               valueAnimation: true,
-              formatter: '{value} %',
-              color: 'white',
+              formatter: "{value} %",
+              color: "white",
               fontSize: 18,
             },
             data: [
@@ -125,7 +125,7 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -136,9 +136,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: {
@@ -149,8 +149,8 @@ export default {
         this.optionsSetup = val.setup; // 样式
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
     this.optionsStyle = this.value.position;
@@ -158,16 +158,24 @@ 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: {
     editorOptions() {
-      this.setOptions()
-      this.setOptionsData()
+      this.setOptions();
+      this.setOptionsData();
     },
     setOptions() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-      if (series[0].type == 'gauge') {
+      if (series[0].type == "gauge") {
         const axisLine = {
           show: optionsSetup.ringShow,
           lineStyle: {
@@ -226,28 +234,28 @@ export default {
               ],
             ],
           },
-        }
+        };
         const axisTick = {
           show: optionsSetup.tickShow,
           distance: optionsSetup.tickDistance,
           length: optionsSetup.tickLength,
           lineStyle: {
-            color: 'auto',
+            color: "auto",
             width: optionsSetup.tickWidth,
           },
-        }
+        };
         const splitLine = {
           show: optionsSetup.splitShow,
           distance: optionsSetup.splitDistance,
           length: optionsSetup.splitLength,
           lineStyle: {
-            color: 'auto',
+            color: "auto",
             width: optionsSetup.splitWidth,
           },
-        }
-        series[0].axisLine = axisLine
-        series[0].axisTick = axisTick
-        series[0].splitLine = splitLine
+        };
+        series[0].axisLine = axisLine;
+        series[0].axisTick = axisTick;
+        series[0].splitLine = splitLine;
       }
     },
     setOptionsData() {
@@ -259,21 +267,21 @@ export default {
     staticDataFn(val) {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-      const num = val[0]['num'];
+      const num = val[0]["num"];
       const data = [
         {
-          value: num
-        }
-      ]
+          value: num,
+        },
+      ];
       const detail = {
         valueAnimation: true,
-        formatter: '{value} %',
+        formatter: "{value} %",
         color: optionsSetup.labelColor,
         fontSize: optionsSetup.labelFontSize,
         fontWeight: optionsSetup.labelFontWeight,
-      }
-      series[0].data = data
-      series[0].detail = detail
+      };
+      series[0].data = data;
+      series[0].detail = detail;
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -288,7 +296,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -297,20 +305,20 @@ export default {
       const series = this.options.series;
       const data = [
         {
-          value: val[0].value
-        }
-      ]
+          value: val[0].value,
+        },
+      ];
       const detail = {
         valueAnimation: true,
-        formatter: '{value} %',
+        formatter: "{value} %",
         color: optionsSetup.labelColor,
         fontSize: optionsSetup.labelFontSize,
         fontWeight: optionsSetup.labelFontWeight,
-      }
-      series[0].data = data
-      series[0].detail = detail
-    }
-  }
+      };
+      series[0].data = data;
+      series[0].detail = detail;
+    },
+  },
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue

@@ -5,13 +5,14 @@
 </template>
 
 <script>
+import { eventBusParams } from "@/utils/screen";
 let per = 60;
 export default {
   name: "widgetPiePercentageChart", //百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -25,14 +26,14 @@ export default {
             rich: {
               nums: {
                 fontSize: 60,
-                color: "#29EEF3"
+                color: "#29EEF3",
               },
               percent: {
                 fontSize: 30,
-                color: "#29EEF3"
-              }
-            }
-          }
+                color: "#29EEF3",
+              },
+            },
+          },
         },
         legend: {
           type: "plain",
@@ -43,27 +44,27 @@ export default {
           data: [
             {
               name: "1",
-              icon: "circle"
+              icon: "circle",
             },
             {
               name: "2",
-              icon: "circle"
+              icon: "circle",
             },
             {
               name: "3",
-              icon: "circle"
+              icon: "circle",
             },
             {
               name: "4",
-              icon: "circle"
-            }
+              icon: "circle",
+            },
           ],
           textStyle: {
             color: "white",
             fontSize: 16,
-            padding: [10, 1, 10, 0]
+            padding: [10, 1, 10, 0],
           },
-          selectedMode: false
+          selectedMode: false,
         },
         series: [
           {
@@ -78,17 +79,17 @@ export default {
                   cy: api.getHeight() / 2,
                   r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                   startAngle: ((0 + this.angle) * Math.PI) / 180,
-                  endAngle: ((90 + this.angle) * Math.PI) / 180
+                  endAngle: ((90 + this.angle) * Math.PI) / 180,
                 },
                 style: {
                   stroke: "#0CD3DB",
                   fill: "transparent",
-                  lineWidth: 1.5
+                  lineWidth: 1.5,
                 },
-                silent: true
+                silent: true,
               };
             },
-            data: [0]
+            data: [0],
           },
           {
             //name: '环2',
@@ -102,17 +103,17 @@ export default {
                   cy: api.getHeight() / 2,
                   r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                   startAngle: ((180 + this.angle) * Math.PI) / 180,
-                  endAngle: ((270 + this.angle) * Math.PI) / 180
+                  endAngle: ((270 + this.angle) * Math.PI) / 180,
                 },
                 style: {
                   stroke: "#0CD3DB",
                   fill: "transparent",
-                  lineWidth: 1.5
+                  lineWidth: 1.5,
                 },
-                silent: true
+                silent: true,
               };
             },
-            data: [0]
+            data: [0],
           },
           {
             //name: '环3',
@@ -126,17 +127,17 @@ export default {
                   cy: api.getHeight() / 2,
                   r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                   startAngle: ((270 + -this.angle) * Math.PI) / 180,
-                  endAngle: ((40 + -this.angle) * Math.PI) / 180
+                  endAngle: ((40 + -this.angle) * Math.PI) / 180,
                 },
                 style: {
                   stroke: "#0CD3DB",
                   fill: "transparent",
-                  lineWidth: 1.5
+                  lineWidth: 1.5,
                 },
-                silent: true
+                silent: true,
               };
             },
-            data: [0]
+            data: [0],
           },
           {
             //name: '环4',
@@ -150,17 +151,17 @@ export default {
                   cy: api.getHeight() / 2,
                   r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                   startAngle: ((90 + -this.angle) * Math.PI) / 180,
-                  endAngle: ((220 + -this.angle) * Math.PI) / 180
+                  endAngle: ((220 + -this.angle) * Math.PI) / 180,
                 },
                 style: {
                   stroke: "#0CD3DB",
                   fill: "transparent",
-                  lineWidth: 1.5
+                  lineWidth: 1.5,
                 },
-                silent: true
+                silent: true,
               };
             },
-            data: [0]
+            data: [0],
           },
           {
             //name: '绿点1',
@@ -176,16 +177,16 @@ export default {
                 shape: {
                   cx: point.x,
                   cy: point.y,
-                  r: 4
+                  r: 4,
                 },
                 style: {
                   stroke: "#0CD3DB", //粉
-                  fill: "#0CD3DB"
+                  fill: "#0CD3DB",
                 },
-                silent: true
+                silent: true,
               };
             },
-            data: [0]
+            data: [0],
           },
           {
             //name: '绿点2',
@@ -201,16 +202,16 @@ export default {
                 shape: {
                   cx: point.x,
                   cy: point.y,
-                  r: 4
+                  r: 4,
                 },
                 style: {
                   stroke: "#0CD3DB", //绿
-                  fill: "#0CD3DB"
+                  fill: "#0CD3DB",
                 },
-                silent: true
+                silent: true,
               };
             },
-            data: [0]
+            data: [0],
           },
           {
             //name: '圆环',
@@ -223,8 +224,8 @@ export default {
             zlevel: 0,
             label: {
               normal: {
-                position: "center"
-              }
+                position: "center",
+              },
             },
             data: [
               {
@@ -237,33 +238,33 @@ export default {
                       colorStops: [
                         {
                           offset: 0,
-                          color: "#4FADFD" // 0% 处的颜色
+                          color: "#4FADFD", // 0% 处的颜色
                         },
                         {
                           offset: 1,
-                          color: "#28E8FA" // 100% 处的颜色
-                        }
-                      ]
-                    }
-                  }
-                }
+                          color: "#28E8FA", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
               },
               {
                 value: 100 - per,
                 name: "",
                 label: {
                   normal: {
-                    show: false
-                  }
+                    show: false,
+                  },
                 },
                 //剩余圆环颜色
                 itemStyle: {
                   normal: {
-                    color: "#173164"
-                  }
-                }
-              }
-            ]
+                    color: "#173164",
+                  },
+                },
+              },
+            ],
           },
           {
             name: "percent",
@@ -275,42 +276,42 @@ export default {
             splitNumber: 8,
             hoverAnimation: true,
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
               length: 15,
               lineStyle: {
                 width: 5,
-                color: "#061740"
-              }
+                color: "#061740",
+              },
             },
             axisLabel: {
-              show: false
+              show: false,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                opacity: 0
-              }
+                opacity: 0,
+              },
             },
             detail: {
-              show: false
+              show: false,
             },
             data: [
               {
                 value: 0,
-                name: ""
-              }
-            ]
-          }
-        ]
+                name: "",
+              },
+            ],
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -321,9 +322,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: {
@@ -334,8 +335,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
     this.optionsStyle = this.value.position;
@@ -343,6 +344,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);
+      }
+    );
   },
   mounted() {
     /*        setInterval(() => {
@@ -357,7 +366,7 @@ export default {
       let y1 = y0 + r * Math.sin((x * Math.PI) / 180);
       return {
         x: x1,
-        y: y1
+        y: y1,
       };
     },
     editorOptions() {
@@ -376,13 +385,13 @@ export default {
         nums: {
           fontSize: optionsSetup.textNumFontSize,
           color: optionsSetup.textNumColor,
-          fontWeight: optionsSetup.textNumFontWeight
+          fontWeight: optionsSetup.textNumFontWeight,
         },
         percent: {
           fontSize: optionsSetup.textPerFontSize,
           color: optionsSetup.textPerColor,
-          fontWeight: optionsSetup.textPerFontWeight
-        }
+          fontWeight: optionsSetup.textPerFontWeight,
+        },
       };
       title.textStyle["rich"] = rich;
       this.options.title = title;
@@ -397,21 +406,21 @@ export default {
           colorStops: [
             {
               offset: 0,
-              color: optionsSetup.color0Start // 0% 处的颜色
+              color: optionsSetup.color0Start, // 0% 处的颜色
             },
             {
               offset: 1,
-              color: optionsSetup.color100End // 100% 处的颜色
-            }
-          ]
-        }
+              color: optionsSetup.color100End, // 100% 处的颜色
+            },
+          ],
+        },
       };
       itemStyle["normal"] = normal;
     },
     setOptionSurplusColor() {
       const itemStyle = this.options.series[6]["data"][1]["itemStyle"];
       const normal = {
-        color: this.optionsSetup.colorsurplus
+        color: this.optionsSetup.colorsurplus,
       };
       itemStyle["normal"] = normal;
     },
@@ -423,7 +432,7 @@ export default {
       line.length = optionsSetup.lineLength;
       const lineStyle = {
         width: optionsSetup.lineWidth,
-        color: optionsSetup.lineColor
+        color: optionsSetup.lineColor,
       };
       line["lineStyle"] = lineStyle;
     },
@@ -454,13 +463,13 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.options.title.text = "{nums|" + res[0].value + "}{percent|%}";
         this.options.series[6]["data"][0]["value"] = res[0].value;
         this.options.series[6]["data"][1]["value"] = 100 - res[0].value;
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -5,24 +5,25 @@
 </template>
 
 <script>
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "WidgetPieNightingaleRoseArea", //南丁格尔玫瑰图面积模式 参考：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
       options: {
         legend: {
-          top: "bottom"
+          top: "bottom",
         },
         toolbox: {
           show: true,
           feature: {
-            mark: { show: true }
-          }
+            mark: { show: true },
+          },
         },
         series: [
           {
@@ -32,16 +33,16 @@ export default {
             center: ["50%", "50%"],
             roseType: "area",
             itemStyle: {
-              borderRadius: 8
+              borderRadius: 8,
             },
-            data: []
-          }
-        ]
+            data: [],
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -52,9 +53,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: {
@@ -65,8 +66,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -74,6 +75,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -126,12 +135,12 @@ export default {
             padding: [-30, 15, -20, 15],
             color: optionsSetup.subTextColor,
             fontSize: optionsSetup.fontSize,
-            fontWeight: optionsSetup.fontWeight
-          }
+            fontWeight: optionsSetup.fontWeight,
+          },
         },
         fontSize: optionsSetup.fontSize,
 
-        fontWeight: optionsSetup.optionsSetup
+        fontWeight: optionsSetup.optionsSetup,
       };
       for (const key in series) {
         if (series[key].type == "pie") {
@@ -148,8 +157,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -161,7 +170,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -178,7 +187,7 @@ export default {
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
@@ -222,7 +231,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -232,8 +241,8 @@ export default {
           this.options.series[key].data = val;
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.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: "WidgetPiechart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -19,15 +20,15 @@ export default {
           text: "",
           left: "center",
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         legend: {
           orient: "vertical",
           left: "left",
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         series: [
           {
@@ -38,16 +39,16 @@ export default {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -58,9 +59,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: {
@@ -71,8 +72,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
     this.optionsStyle = this.value.position;
@@ -80,6 +81,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属性
@@ -137,17 +146,17 @@ export default {
             padding: [-30, 15, -20, 15],
             color: optionsSetup.subTextColor,
             fontSize: optionsSetup.fontSize,
-            fontWeight: optionsSetup.fontWeight
-          }
+            fontWeight: optionsSetup.fontWeight,
+          },
         },
         fontSize: optionsSetup.fontSize,
 
-        fontWeight: optionsSetup.optionsSetup
+        fontWeight: optionsSetup.optionsSetup,
       };
       for (const key in series) {
         if (series[key].type == "pie") {
           series[key].label = label;
-          series[key].labelLine = {show: optionsSetup.isShow};
+          series[key].labelLine = { show: optionsSetup.isShow };
         }
       }
     },
@@ -159,8 +168,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.lineColor,
-          fontSize: optionsSetup.tipFontSize
-        }
+          fontSize: optionsSetup.tipFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -177,7 +186,7 @@ export default {
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
@@ -220,7 +229,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -230,8 +239,8 @@ export default {
           this.options.series[key].data = val;
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue

@@ -1,17 +1,17 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 <script>
 import vue from "vue";
 import VueSuperSlide from "vue-superslide";
-
+import { eventBusParams } from "@/utils/screen";
 vue.use(VueSuperSlide);
 export default {
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -20,13 +20,13 @@ export default {
         title: {},
         legend: {},
         radar: {
-          indicator: []
+          indicator: [],
         },
-        series: []
+        series: [],
       },
       optionsSetup: {},
       optionsPosition: {},
-      optionsData: {}
+      optionsData: {},
     };
   },
   computed: {
@@ -38,7 +38,7 @@ export default {
         height: allStyle.height + "px",
         left: allStyle.left + "px",
         top: allStyle.top + "px",
-        background: this.optionsSetup.background
+        background: this.optionsSetup.background,
       };
     },
   },
@@ -50,14 +50,22 @@ export default {
         this.optionsData = val.data;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsSetup = this.value.setup;
     this.optionsPosition = this.value.position;
     this.optionsData = this.value.data;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     editorOptions() {
@@ -105,7 +113,7 @@ export default {
         lineStyle: {
           color: optionsSetup.axisLineColor,
           opacity: optionsSetup.axisLineOpacity / 100,
-        }
+        },
       };
       const axisName = {
         show: optionsSetup.axisNameShow,
@@ -113,14 +121,14 @@ export default {
         fontSize: optionsSetup.axisNameFontSize,
         fontStyle: optionsSetup.axisNamFontStyle,
         fontWeight: optionsSetup.axisNamFontWeight,
-      }
+      };
       const splitLine = {
         show: optionsSetup.splitLineShow,
         lineStyle: {
           color: optionsSetup.splitLineColor,
           opacity: optionsSetup.splitLineOpacity / 100,
-        }
-      }
+        },
+      };
       this.options.radar.axisLine = axisLine;
       // echarts5.X以上，name属性被替换为axisName
       this.options.radar.name = axisName;
@@ -142,7 +150,7 @@ export default {
           fontSize: optionsSetup.legendFontSize,
         },
         itemWidth: optionsSetup.legendWidth,
-      }
+      };
       this.options.legend = legend;
     },
     // 图例名称设置
@@ -151,17 +159,17 @@ export default {
       const series = this.options.series;
       const legendName = optionsSetup.legendName;
       // 图例没有手动写则显示原值，写了则显示新值
-      if (null == legendName || legendName == '') {
+      if (null == legendName || legendName == "") {
         for (let i = 0; i < name.length; i++) {
           series[0].data[i].name = name[i];
         }
-        this.options.legend['data'] = name;
+        this.options.legend["data"] = name;
       } else {
-        const arr = legendName.split('|');
+        const arr = legendName.split("|");
         for (let i = 0; i < arr.length; i++) {
           series[0].data[i].name = arr[i];
         }
-        this.options.legend['data'] = arr;
+        this.options.legend["data"] = arr;
       }
     },
     // tooltip 提示语设置，鼠标放置显示
@@ -173,13 +181,13 @@ export default {
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,
-        }
+        },
       };
       this.options.tooltip = tooltip;
     },
     // 雷达大小设置
     setOptionsMargin() {
-      this.options.radar.radius = '70%';
+      this.options.radar.radius = "70%";
     },
     setOptionsData() {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -190,8 +198,8 @@ export default {
     //去重
     setUnique(arr) {
       let newArr = [];
-      arr.forEach(item => {
-        return newArr.includes(item) ? '' : newArr.push(item);
+      arr.forEach((item) => {
+        return newArr.includes(item) ? "" : newArr.push(item);
       });
       return newArr;
     },
@@ -247,16 +255,16 @@ export default {
         legendName.push(name[i]);
       }
       this.options.series[0] = {
-        type: 'radar',
+        type: "radar",
         data: data,
         symbolSize: optionsSetup.symbolSize,
         areaStyle: {
           normal: {
             opacity: optionsSetup.opacity / 100,
-          }
+          },
         },
       };
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     dynamicDataFn(data, refreshTime) {
@@ -272,7 +280,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -328,19 +336,19 @@ export default {
         legendName.push(name[i]);
       }
       this.options.series[0] = {
-        type: 'radar',
+        type: "radar",
         data: data,
         symbolSize: optionsSetup.symbolSize,
         areaStyle: {
           normal: {
             opacity: optionsSetup.opacity / 100,
-          }
+          },
         },
       };
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

report-ui/src/views/bigscreenDesigner/designer/widget/widgetHref.vue

@@ -19,11 +19,11 @@ export default {
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
-      options: {}
+      options: {},
     };
   },
   computed: {
@@ -52,22 +52,22 @@ export default {
         top: this.transStyle.top + "px",
         right: this.transStyle.right + "px",
         linkAdress: this.transStyle.linkAdress,
-        jumpMode: this.transStyle.jumpMode == "other" ? "_blank" : "_self"
+        jumpMode: this.transStyle.jumpMode == "other" ? "_blank" : "_self",
       };
-    }
+    },
   },
   watch: {
     value: {
       handler(val) {
         this.options = val;
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.options = this.value;
   },
-  methods: {}
+  methods: {},
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue

@@ -1,56 +1,60 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 <script>
 import wordCloud from "../../../../../../static/wordCloud/echarts-wordcloud.min.js";
-
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "widgetWordCloud",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
       options: {
         tooltip: {
-          show: true
+          show: true,
         },
         series: [
           {
-            type: 'wordCloud',
-            size: ['9%', '99%'],
+            type: "wordCloud",
+            size: ["9%", "99%"],
             sizeRange: [6, 30],
             textRotation: [0, 45, 90, -45],
             rotationRange: [-45, 90],
-            shape: 'circle',
+            shape: "circle",
             textPadding: 0,
             autoSize: {
               enable: true,
-              minSize: 6
+              minSize: 6,
             },
             textStyle: {
               normal: {
                 color: function () {
-                  return 'rgb(' + [
-                    Math.round(Math.random() * 160),
-                    Math.round(Math.random() * 160),
-                    Math.round(Math.random() * 160)
-                  ].join(',') + ')';
-                }
+                  return (
+                    "rgb(" +
+                    [
+                      Math.round(Math.random() * 160),
+                      Math.round(Math.random() * 160),
+                      Math.round(Math.random() * 160),
+                    ].join(",") +
+                    ")"
+                  );
+                },
               },
             },
-            data: []
-          }
-        ]
+            data: [],
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsSetup: {},
-      flagInter: null
+      flagInter: null,
     };
   },
   computed: {
@@ -61,9 +65,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: {
@@ -74,8 +78,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -83,6 +87,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        console.log("dynamicData", dynamicData);
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -118,12 +130,18 @@ export default {
     // 词云字体范围
     setOptionsSizeRange() {
       const optionsSetup = this.optionsSetup;
-      this.options.series[0].sizeRange = [optionsSetup.minRangeSize, optionsSetup.maxRangeSize];
+      this.options.series[0].sizeRange = [
+        optionsSetup.minRangeSize,
+        optionsSetup.maxRangeSize,
+      ];
     },
     // 文字角度
     setOptionsRotationRange() {
       const optionsSetup = this.optionsSetup;
-      this.options.series[0].rotationRange = [optionsSetup.minRotationRange, optionsSetup.maxRotationRange];
+      this.options.series[0].rotationRange = [
+        optionsSetup.minRotationRange,
+        optionsSetup.maxRotationRange,
+      ];
     },
     // tooltip 设置
     setOptionsTooltip() {
@@ -133,8 +151,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -164,7 +182,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -172,8 +190,8 @@ export default {
       for (const key in this.options.series) {
         this.options.series[key].data = val;
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="scss">