echarts 表数据

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

@@ -1,222 +1,237 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options"
-             autoresize />
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
-import echarts from 'echarts';
+import echarts from "echarts";
 export default {
-  name: 'WidgetGradientColorBarchart',  //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
+  name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
-  data () {
+  data() {
     return {
       options: {
         // backgroundColor: '#00265f',
-        "title": {
-          "text": "政策补贴额度",
+        title: {
+          text: "政策补贴额度",
           x: "center",
           y: "4%",
           textStyle: {
-            color: '#fff',
-            fontSize: '22'
+            color: "#fff",
+            fontSize: "22"
           },
           subtextStyle: {
-            color: '#90979c',
-            fontSize: '16',
-
-          },
+            color: "#90979c",
+            fontSize: "16"
+          }
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow'
+            type: "shadow"
           }
         },
         grid: {
-          top: '15%',
-          right: '3%',
-          left: '5%',
-          bottom: '12%'
+          top: "15%",
+          right: "3%",
+          left: "5%",
+          bottom: "12%"
         },
         legend: {
           textStyle: {
-            color: '#fff',
-          },
+            color: "#fff"
+          }
         },
         xAxis: {
-          type: 'category',
-          data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
+          type: "category",
+          data: [
+            "制造业",
+            "建筑业",
+            "农林牧渔",
+            "房地产",
+            "金融业",
+            "居民服务及其他"
+          ],
           axisLine: {
             lineStyle: {
-              color: 'rgba(255,255,255,0.12)'
+              color: "rgba(255,255,255,0.12)"
             }
           },
           axisLabel: {
             margin: 10,
-            color: '#e2e9ff',
+            color: "#e2e9ff",
             textStyle: {
               fontSize: 14
-            },
-          },
+            }
+          }
         },
         yAxis: {
-          name: '单位：万元',
+          name: "单位：万元",
           axisLabel: {
-            formatter: '{value}',
-            color: '#e2e9ff',
+            formatter: "{value}",
+            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: [{
-          type: 'bar',
-          data: [5000, 2600, 1300, 1300, 1250, 1500],
-          barWidth: '20px',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(0,244,255,1)' // 0% 处的颜色
-              }, {
-                offset: 1,
-                color: 'rgba(0,77,167,1)' // 100% 处的颜色
-              }], false),
-              barBorderRadius: [30, 30, 30, 30],
-              shadowColor: 'rgba(0,160,221,1)',
-              shadowBlur: 4,
-            }
-          },
-          label: {
-            normal: {
-              show: true,
-              lineHeight: 30,
-              width: 80,
-              height: 30,
-              backgroundColor: 'rgba(0,160,221,0.1)',
-              borderRadius: 200,
-              position: ['-8', '-60'],
-              distance: 1,
-              formatter: [
-                '    {d|●}',
-                ' {a|{c}}     \n',
-                '    {b|}'
-              ].join(','),
-              rich: {
-                d: {
-                  color: '#3CDDCF',
-                },
-                a: {
-                  color: '#fff',
-                  align: 'center',
-                },
-                b: {
-                  width: 1,
-                  height: 30,
-                  borderWidth: 1,
-                  borderColor: '#234e6c',
-                  align: 'left'
-                },
+        series: [
+          {
+            type: "bar",
+            data: [5000, 2600, 1300, 1300, 1250, 1500],
+            barWidth: "20px",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)" // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)" // 100% 处的颜色
+                    }
+                  ],
+                  false
+                ),
+                barBorderRadius: [30, 30, 30, 30],
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4
+              }
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 30,
+                width: 80,
+                height: 30,
+                backgroundColor: "rgba(0,160,221,0.1)",
+                borderRadius: 200,
+                position: ["-8", "-60"],
+                distance: 1,
+                formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(
+                  ","
+                ),
+                rich: {
+                  d: {
+                    color: "#3CDDCF"
+                  },
+                  a: {
+                    color: "#fff",
+                    align: "center"
+                  },
+                  b: {
+                    width: 1,
+                    height: 30,
+                    borderWidth: 1,
+                    borderColor: "#234e6c",
+                    align: "left"
+                  }
+                }
               }
             }
           }
-        }]
+        ]
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
-      optionsSetup: {},
-    }
+      optionsSetup: {}
+    };
   },
   computed: {
-    styleObj () {
+    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: {
-      handler (val) {
-        console.log(val)
-        this.optionsStyle = val.position
-        this.optionsData = val.data
-        this.optionsCollapse = val.setup
-        this.optionsSetup = val.setup
-        this.editorOptions()
+      handler(val) {
+        console.log(val);
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
-  mounted () {
-    this.optionsStyle = this.value.position
-    this.optionsData = this.value.data
-    this.optionsCollapse = this.value.setup
-    this.optionsSetup = this.value.setup
-    this.editorOptions()
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
-      this.setOptionsTitle()
-      this.setOptionsX()
-      this.setOptionsY()
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
       // this.setOptionsTop()
       // this.setOptionsTooltip()
-      this.setOptionsMargin()
+      this.setOptionsMargin();
       // this.setOptionsLegend()
-      this.setOptionsColor()
-      this.setOptionsData()
+      this.setOptionsColor();
+      this.setOptionsData();
     },
     // 标题修改
-    setOptionsTitle () {
-      const optionsCollapse = this.optionsSetup
-      const title = {}
-      title.text = optionsCollapse.titleText
-      title.show = optionsCollapse.isNoTitle
-      title.left = optionsCollapse.textAlign
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight,
-      }
-      title.subtext = optionsCollapse.subText
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
       title.subtextStyle = {
         color: optionsCollapse.subTextColor,
         fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize,
-      }
+        fontSize: optionsCollapse.subTextFontSize
+      };
 
-      this.options.title = title
+      this.options.title = title;
     },
     // X轴设置
-    setOptionsX () {
-      const optionsCollapse = this.optionsSetup
+    setOptionsX() {
+      const optionsCollapse = this.optionsSetup;
       const xAxis = {
-        type: 'category',
+        type: "category",
         show: optionsCollapse.hideX, // 坐标轴是否显示
         name: optionsCollapse.xName, // 坐标轴名称
         nameTextStyle: {
           color: optionsCollapse.xNameColor,
-          fontSize: optionsCollapse.xNameFontSize,
+          fontSize: optionsCollapse.xNameFontSize
         },
         nameRotate: optionsCollapse.textAngle, // 文字角度
         inverse: optionsCollapse.reversalX, // 轴反转
@@ -226,194 +241,213 @@ export default {
           rotate: optionsCollapse.textAngle, // 文字角度
           textStyle: {
             color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeX,
-          },
+            fontSize: optionsCollapse.fontSizeX
+          }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorX,
-          },
+            color: optionsCollapse.lineColorX
+          }
         },
         splitLine: {
-            show: optionsCollapse.isShowSplitLineX,
-            lineStyle: {
-                color: optionsCollapse.splitLineColorX
-            },
-        },
-      }
-      this.options.xAxis = xAxis
+          show: optionsCollapse.isShowSplitLineX,
+          lineStyle: {
+            color: optionsCollapse.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
     },
     // Y轴设置
-    setOptionsY () {
-      const optionsCollapse = this.optionsSetup
+    setOptionsY() {
+      const optionsCollapse = this.optionsSetup;
       const yAxis = {
-        type: 'value',
+        type: "value",
         show: optionsCollapse.isShowY, // 坐标轴是否显示
         name: optionsCollapse.textNameY, // 坐标轴名称
         nameTextStyle: {
           color: optionsCollapse.NameColorY,
-          fontSize: optionsCollapse.NameFontSizeY,
+          fontSize: optionsCollapse.NameFontSizeY
         },
         inverse: optionsCollapse.reversalY, // 轴反转
         axisLabel: {
           show: true,
           textStyle: {
             color: optionsCollapse.colorY, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeY,
-          },
+            fontSize: optionsCollapse.fontSizeY
+          }
         },
         splitLine: {
-          show: false,
+          show: false
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorY,
-          },
+            color: optionsCollapse.lineColorY
+          }
         },
         splitLine: {
-            show: optionsCollapse.isShowSplitLineY,
-            lineStyle: {
-                color: optionsCollapse.splitLineColorY
-            },
-        },
-      }
+          show: optionsCollapse.isShowSplitLineY,
+          lineStyle: {
+            color: optionsCollapse.splitLineColorY
+          }
+        }
+      };
 
-      this.options.yAxis = yAxis
+      this.options.yAxis = yAxis;
     },
     // 数值设定 or 柱体设置
-    setOptionsTop () {
-      const optionsCollapse = this.optionsSetup
-      const series = this.options.series
+    setOptionsTop() {
+      const optionsCollapse = this.optionsSetup;
+      const series = this.options.series;
 
       for (const key in series) {
-        if (series[key].type == 'bar') {
+        if (series[key].type == "bar") {
           series[key].label = {
             show: optionsCollapse.isShow,
-            position: 'top',
+            position: "top",
             distance: 10,
             fontSize: optionsCollapse.fontSize,
             color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight,
-          }
-          series[key].barWidth = optionsCollapse.maxWidth
-          series[key].barMinHeight = optionsCollapse.minHeight
+            fontWeight: optionsCollapse.fontWeight
+          };
+          series[key].barWidth = optionsCollapse.maxWidth;
+          series[key].barMinHeight = optionsCollapse.minHeight;
         }
       }
-      this.options.series = series
+      this.options.series = series;
     },
     // tooltip 设置
-    setOptionsTooltip () {
-      const optionsCollapse = this.optionsSetup
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup;
       const tooltip = {
-        trigger: 'item',
+        trigger: "item",
         show: true,
         textStyle: {
           color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize,
-        },
-      }
-      this.options.tooltip = tooltip
+          fontSize: optionsCollapse.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
     },
     // 边距设置
-    setOptionsMargin () {
-      const optionsCollapse = this.optionsSetup
+    setOptionsMargin() {
+      const optionsCollapse = this.optionsSetup;
       const grid = {
         left: optionsCollapse.marginLeft,
         right: optionsCollapse.marginRight,
         bottom: optionsCollapse.marginBottom,
         top: optionsCollapse.marginTop,
-        containLabel: true,
-      }
-      this.options.grid = grid
+        containLabel: true
+      };
+      this.options.grid = grid;
     },
     // 图例操作 legend
-    setOptionsLegend () {
-      const optionsCollapse = this.optionsSetup
-      const legend = this.options.legend
-      legend.show = optionsCollapse.isShowLegend
-      legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
-      legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
-      legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
-      legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
-      legend.orient = optionsCollapse.layoutFront
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsCollapse.isShowLegend;
+      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.bottom =
+        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsCollapse.layoutFront;
       legend.textStyle = {
         color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize,
-      }
-      legend.itemWidth = optionsCollapse.lengedWidth
+        fontSize: optionsCollapse.fontSize
+      };
+      legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 渐变色
-    setOptionsColor () {
-      const optionsCollapse = this.optionsSetup
-      const barStart = {}
-      barStart['offset'] = 0
-      barStart['color'] = optionsCollapse.barStart
-      const barEnd = {}
-      barStart['offset'] = 1
-      barStart['color'] = optionsCollapse.barEnd
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup;
+      const barStart = {};
+      barStart["offset"] = 0;
+      barStart["color"] = optionsCollapse.barStart;
+      const barEnd = {};
+      barStart["offset"] = 1;
+      barStart["color"] = optionsCollapse.barEnd;
       // this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false)
-
     },
     // 数据解析
-    setOptionsData () {
-      const optionsSetup = this.optionsSetup
-      console.log(optionsSetup)
-      const optionsData = this.optionsData // 数据类型 静态 or 动态
-      console.log(optionsData)
-      optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup)
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData, optionsSetup)
+        : this.dynamicDataFn(
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
     },
     // 静态数据
-    staticDataFn (val, optionsSetup) {
-      const staticData = JSON.parse(val)
+    staticDataFn(val, optionsSetup) {
+      const staticData = JSON.parse(val);
       // x轴
       if (optionsSetup.verticalShow) {
-        this.options.xAxis.data = []
-        this.options.yAxis.data = staticData.categories
-        this.options.xAxis.type = 'value'
-        this.options.yAxis.type = 'category'
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = staticData.categories;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
       } else {
-        this.options.xAxis.data = staticData.categories
-        this.options.yAxis.data = []
-        this.options.xAxis.type = 'category'
-        this.options.yAxis.type = 'value'
+        this.options.xAxis.data = staticData.categories;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
       }
       // series
-      const series = this.options.series
+      const series = this.options.series;
       for (const i in series) {
-        if (series[i].type == 'bar') {
-          series[i].data = staticData.series[0].data
+        if (series[i].type == "bar") {
+          series[i].data = staticData.series[0].data;
         }
       }
     },
     // 动态数据
-    dynamicDataFn (val, optionsSetup) {
-      console.log(val)
-      if (!val) return
+    dynamicDataFn(val, refreshTime, optionsSetup) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val, optionsSetup);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(optionsSetup, res);
+      });
+    },
+    renderingFn(optionsSetup, val) {
       // x轴
       if (optionsSetup.verticalShow) {
-        this.options.xAxis.data = []
-        this.options.yAxis.data = val.xAxis
-        this.options.xAxis.type = 'value'
-        this.options.yAxis.type = 'category'
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = val.xAxis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
       } else {
-        this.options.xAxis.data = val.xAxis
-        this.options.yAxis.data = []
-        this.options.xAxis.type = 'category'
-        this.options.yAxis.type = 'value'
+        this.options.xAxis.data = val.xAxis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
       }
 
       // series
-      const series = this.options.series
+      const series = this.options.series;
       for (const i in series) {
-        if (series[i].type == 'bar') {
-          series[i].data = val.series[i].data
+        if (series[i].type == "bar") {
+          series[i].data = val.series[i].data;
         }
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue

@@ -1,179 +1,178 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options"
-             autoresize />
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'WidgetBarlinechart',
+  name: "WidgetBarlinechart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
-  data () {
+  data() {
     return {
       options: {
         color: [],
         grid: {},
         title: {
-          text: '',
+          text: "",
           textStyle: {
-            color: '#fff',
-          },
+            color: "#fff"
+          }
         },
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c}%',
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c}%"
         },
         legend: {
           textStyle: {
-            color: '#fff',
+            color: "#fff"
           },
-          data: ['货运量', '货运总量'],
+          data: ["货运量", "货运总量"]
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             data: [],
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#fff',
-              },
-            },
-          },
+                color: "#fff"
+              }
+            }
+          }
         ],
         yAxis: [
           {
-            type: 'value',
-            name: '',
+            type: "value",
+            name: "",
             min: 0,
             max: 250,
             interval: 50,
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#fff',
-              },
-            },
+                color: "#fff"
+              }
+            }
           },
           {
-            type: 'value',
-            name: '',
+            type: "value",
+            name: "",
             min: 0,
             max: 25,
             interval: 5,
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#fff',
-              },
-            },
-          },
+                color: "#fff"
+              }
+            }
+          }
         ],
         series: [
           {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             data: [],
             itemStyle: {
-              barBorderRadius: null,
-            },
+              barBorderRadius: null
+            }
           },
           {
-            name: '',
-            type: 'line',
+            name: "",
+            type: "line",
             yAxisIndex: 1,
             data: [],
-            itemStyle: {},
-          },
-        ],
+            itemStyle: {}
+          }
+        ]
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {},
-    }
+      optionsSetup: {}
+    };
   },
   computed: {
-    styleObj () {
+    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: {
-      handler (val) {
-        this.optionsStyle = val.position
-        this.optionsData = val.data
-        this.optionsCollapse = val.collapse
-        this.optionsSetup = val.setup
-        this.editorOptions()
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
-  created () {
-    this.optionsStyle = this.value.position
-    this.optionsData = this.value.data
-    this.optionsCollapse = this.value.collapse
-    this.optionsSetup = this.value.setup
-    this.editorOptions()
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
-      this.setOptionsTitle()
-      this.setOptionsX()
-      this.setOptionsY()
-      this.setOptionsTop()
-      this.setOptionsBar()
-      this.setOptionsTooltip()
-      this.setOptionsData()
-      this.setOptionsMargin()
-      this.setOptionsLegend()
-      this.setOptionsColor()
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsTop();
+      this.setOptionsBar();
+      this.setOptionsTooltip();
+      this.setOptionsData();
+      this.setOptionsMargin();
+      this.setOptionsLegend();
+      this.setOptionsColor();
     },
     // 标题修改
-    setOptionsTitle () {
-      const optionsCollapse = this.optionsSetup
-      const title = {}
-      title.text = optionsCollapse.titleText
-      title.show = optionsCollapse.isNoTitle
-      title.left = optionsCollapse.textAlign
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight,
-      }
-      title.subtext = optionsCollapse.subText
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
       title.subtextStyle = {
         color: optionsCollapse.subTextColor,
         fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize,
-      }
+        fontSize: optionsCollapse.subTextFontSize
+      };
 
-      this.options.title = title
+      this.options.title = title;
     },
     // X轴设置
-    setOptionsX () {
-      const optionsCollapse = this.optionsSetup
+    setOptionsX() {
+      const optionsCollapse = this.optionsSetup;
       const xAxis = {
-        type: 'category',
+        type: "category",
         show: optionsCollapse.hideX, // 坐标轴是否显示
         name: optionsCollapse.xName, // 坐标轴名称
         nameTextStyle: {
           color: optionsCollapse.xNameColor,
-          fontSize: optionsCollapse.xNameFontSize,
+          fontSize: optionsCollapse.xNameFontSize
         },
         nameRotate: optionsCollapse.textAngle, // 文字角度
         inverse: optionsCollapse.reversalX, // 轴反转
@@ -183,238 +182,257 @@ export default {
           rotate: optionsCollapse.textAngle, // 文字角度
           textStyle: {
             color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeX,
-          },
+            fontSize: optionsCollapse.fontSizeX
+          }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorX,
-          },
+            color: optionsCollapse.lineColorX
+          }
         },
         splitLine: {
-            show: optionsCollapse.isShowSplitLineX,
-            lineStyle: {
-                color: optionsCollapse.splitLineColorX
-            },
-        },
-      }
-      this.options.xAxis = xAxis
+          show: optionsCollapse.isShowSplitLineX,
+          lineStyle: {
+            color: optionsCollapse.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
     },
     // Y轴设置
-    setOptionsY () {
-      const optionsCollapse = this.optionsSetup
+    setOptionsY() {
+      const optionsCollapse = this.optionsSetup;
       const yAxis = [
         {
-          type: 'value',
+          type: "value",
           show: optionsCollapse.isShowY, // 坐标轴是否显示
           name: optionsCollapse.textNameY, // 坐标轴名称
           nameTextStyle: {
             color: optionsCollapse.NameColorY,
-            fontSize: optionsCollapse.NameFontSizeY,
+            fontSize: optionsCollapse.NameFontSizeY
           },
           inverse: optionsCollapse.reversalY, // 轴反转
           axisLabel: {
             show: true,
             textStyle: {
               color: optionsCollapse.colorY, // x轴 坐标文字颜色
-              fontSize: optionsCollapse.fontSizeY,
-            },
+              fontSize: optionsCollapse.fontSizeY
+            }
           },
           splitLine: {
-            show: false,
+            show: false
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#fff',
-            },
+              color: "#fff"
+            }
           },
           splitLine: {
             show: optionsCollapse.isShowSplitLineY,
             lineStyle: {
-                color: optionsCollapse.splitLineColorY
-            },
-        },
+              color: optionsCollapse.splitLineColorY
+            }
+          }
         },
         {
-          type: 'value',
+          type: "value",
           show: optionsCollapse.isShowY, // 坐标轴是否显示
           name: optionsCollapse.textNameY, // 坐标轴名称
           nameTextStyle: {
             color: optionsCollapse.NameColorY,
-            fontSize: optionsCollapse.NameFontSizeY,
+            fontSize: optionsCollapse.NameFontSizeY
           },
           inverse: optionsCollapse.reversalY, // 轴反转
           axisLabel: {
             show: true,
             textStyle: {
               color: optionsCollapse.colorY, // x轴 坐标文字颜色
-              fontSize: optionsCollapse.fontSizeY,
-            },
+              fontSize: optionsCollapse.fontSizeY
+            }
           },
           splitLine: {
-            show: false,
+            show: false
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: optionsCollapse.lineColorY,
-            },
+              color: optionsCollapse.lineColorY
+            }
           },
           splitLine: {
             show: true,
             lineStyle: {
-                color: optionsCollapse.splitLineColorY
-            },
-        },
-        },
-      ]
+              color: optionsCollapse.splitLineColorY
+            }
+          }
+        }
+      ];
 
-      this.options.yAxis = yAxis
+      this.options.yAxis = yAxis;
     },
     // 折线设置
-    setOptionsTop () {
-      const optionsCollapse = this.optionsSetup
-      const series = this.options.series
+    setOptionsTop() {
+      const optionsCollapse = this.optionsSetup;
+      const series = this.options.series;
       for (const key in series) {
-        if (series[key].type == 'line') {
-          series[key].showSymbol = optionsCollapse.markPoint
-          series[key].symbolSize = optionsCollapse.pointSize
-          series[key].smooth = optionsCollapse.smoothCurve
+        if (series[key].type == "line") {
+          series[key].showSymbol = optionsCollapse.markPoint;
+          series[key].symbolSize = optionsCollapse.pointSize;
+          series[key].smooth = optionsCollapse.smoothCurve;
           if (optionsCollapse.area) {
             series[key].areaStyle = {
-              opacity: optionsCollapse.areaThickness / 100,
-            }
+              opacity: optionsCollapse.areaThickness / 100
+            };
           } else {
             series[key].areaStyle = {
-              opacity: 0,
-            }
+              opacity: 0
+            };
           }
           series[key].lineStyle = {
-            width: optionsCollapse.lineWidth,
-          }
-          series[key].itemStyle.borderRadius = optionsCollapse.radius
+            width: optionsCollapse.lineWidth
+          };
+          series[key].itemStyle.borderRadius = optionsCollapse.radius;
           series[key].label = {
             show: optionsCollapse.isShow,
-            position: 'top',
+            position: "top",
             distance: 10,
             fontSize: optionsCollapse.fontSize,
             color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight,
-          }
+            fontWeight: optionsCollapse.fontWeight
+          };
         }
       }
-      this.options.series = series
+      this.options.series = series;
     },
-    setOptionsBar () {
-      const optionsCollapse = this.optionsSetup
-      const series = this.options.series
+    setOptionsBar() {
+      const optionsCollapse = this.optionsSetup;
+      const series = this.options.series;
       for (const key in series) {
-        if (series[key].type == 'bar') {
+        if (series[key].type == "bar") {
           series[key].label = {
             show: optionsCollapse.isShow,
-            position: 'top',
+            position: "top",
             distance: 10,
             fontSize: optionsCollapse.fontSize,
             color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight,
-          }
-          series[key].barWidth = optionsCollapse.maxWidth
-          series[key].barMinHeight = optionsCollapse.minHeight
-          series[key].itemStyle.barBorderRadius = optionsCollapse.radius
+            fontWeight: optionsCollapse.fontWeight
+          };
+          series[key].barWidth = optionsCollapse.maxWidth;
+          series[key].barMinHeight = optionsCollapse.minHeight;
+          series[key].itemStyle.barBorderRadius = optionsCollapse.radius;
         }
       }
-      this.options.series = series
+      this.options.series = series;
     },
     // tooltip 设置
-    setOptionsTooltip () {
-      const optionsCollapse = this.optionsSetup
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup;
       const tooltip = {
-        trigger: 'item',
+        trigger: "item",
         show: true,
         textStyle: {
           color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize,
-        },
-      }
-      this.options.tooltip = tooltip
+          fontSize: optionsCollapse.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
     },
     // 边距设置
-    setOptionsMargin () {
-      const optionsCollapse = this.optionsSetup
+    setOptionsMargin() {
+      const optionsCollapse = this.optionsSetup;
       const grid = {
         left: optionsCollapse.marginLeft,
         right: optionsCollapse.marginRight,
         bottom: optionsCollapse.marginBottom,
         top: optionsCollapse.marginTop,
-        containLabel: true,
-      }
-      this.options.grid = grid
+        containLabel: true
+      };
+      this.options.grid = grid;
     },
     // 图例操作 legend
-    setOptionsLegend () {
-      const optionsCollapse = this.optionsSetup
-      const legend = this.options.legend
-      legend.show = optionsCollapse.isShowLegend
-      legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
-      legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
-      legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
-      legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
-      legend.orient = optionsCollapse.layoutFront
+    setOptionsLegend() {
+      const optionsCollapse = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsCollapse.isShowLegend;
+      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.bottom =
+        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsCollapse.layoutFront;
       legend.textStyle = {
         color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize,
-      }
-      legend.itemWidth = optionsCollapse.lengedWidth
+        fontSize: optionsCollapse.fontSize
+      };
+      legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
-    setOptionsColor () {
-      const optionsCollapse = this.optionsSetup
-      const customColor = optionsCollapse.customColor
-      if (!customColor) return
-      const arrColor = []
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup;
+      const customColor = optionsCollapse.customColor;
+      if (!customColor) return;
+      const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
-        arrColor.push(customColor[i].color)
+        arrColor.push(customColor[i].color);
       }
-      this.options.color = arrColor
-      this.options = Object.assign({}, this.options)
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
     },
     // 数据处理
-    setOptionsData () {
-      const optionsData = this.optionsData // 数据类型 静态 or 动态
-      optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      console.log(optionsData);
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
-    staticDataFn (val) {
-      const staticData = JSON.parse(val)
+    staticDataFn(val) {
+      const staticData = JSON.parse(val);
       // x轴
-      this.options.xAxis.data = staticData.xAxis
+      this.options.xAxis.data = staticData.xAxis;
       // series
-      const series = this.options.series
+      const series = this.options.series;
       for (const i in series) {
         for (const j in staticData.series) {
           if (series[i].type == staticData.series[j].type) {
-            series[i].data = staticData.series[j].data
+            series[i].data = staticData.series[j].data;
           }
         }
       }
     },
-    dynamicDataFn (val) {
-      if (!val) return
-      // x轴
-      this.options.xAxis.data = val.xAxis
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options.xAxis.data = val.xAxis;
       // series
-      const series = this.options.series
+      const series = this.options.series;
       for (const i in series) {
         for (const j in val.series) {
           if (series[i].type == val.series[j].type) {
-            series[i].data = val.series[j].data
+            series[i].data = val.series[j].data;
           }
         }
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue

@@ -6,218 +6,239 @@
 
 <script>
 export default {
-  name: 'WidgetFunnel',
+  name: "WidgetFunnel",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
   data() {
     return {
       options: {
         color: [],
         title: {
-          text: '',
+          text: "",
           textStyle: {
-            color: '#fff',
-          },
+            color: "#fff"
+          }
         },
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c}%',
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c}%"
         },
         legend: {
           textStyle: {
-            color: '#fff',
-          },
+            color: "#fff"
+          }
         },
         series: [
           {
-            name: '',
-            type: 'funnel',
-            left: '10%',
+            name: "",
+            type: "funnel",
+            left: "10%",
             top: 60,
             // x2: 80,
             bottom: 60,
-            width: '80%',
+            width: "80%",
             // height: {totalHeight} - y - y2,
             min: 0,
             max: 100,
-            minSize: '0%',
-            maxSize: '100%',
-            sort: 'descending',
+            minSize: "0%",
+            maxSize: "100%",
+            sort: "descending",
             gap: 2,
             label: {
               show: true,
-              position: 'inside',
+              position: "inside"
             },
             labelLine: {
               length: 10,
               lineStyle: {
                 width: 1,
-                type: 'solid',
-              },
+                type: "solid"
+              }
             },
             itemStyle: {
-              borderColor: '#fff',
-              borderWidth: 1,
+              borderColor: "#fff",
+              borderWidth: 1
             },
             emphasis: {
               label: {
-                fontSize: 20,
-              },
+                fontSize: 20
+              }
             },
-            data: [],
-          },
-        ],
+            data: []
+          }
+        ]
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {},
-    }
+      optionsSetup: {}
+    };
   },
   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: {
       handler(val) {
-        this.optionsStyle = val.position
-        this.optionsData = val.data
-        this.optionsCollapse = val.collapse
-        this.optionsSetup = val.setup
-        this.editorOptions()
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   created() {
-    this.optionsStyle = this.value.position
-    this.optionsData = this.value.data
-    this.optionsCollapse = this.value.collapse
-    this.optionsSetup = this.value.setup
-    this.editorOptions()
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
   },
   methods: {
     // 修改图标options属性
     editorOptions() {
-      this.setOptionsText()
-      this.setOptionsTitle()
-      this.setOptionsTooltip()
-      this.setOptionsLegend()
-      this.setOptionsColor()
-      this.setOptionsData()
+      this.setOptionsText();
+      this.setOptionsTitle();
+      this.setOptionsTooltip();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
     },
     // 文字设置
     setOptionsText() {
-      const optionsCollapse = this.optionsSetup
-      const series = this.options.series
+      const optionsCollapse = this.optionsSetup;
+      const series = this.options.series;
 
       for (const key in series) {
-        if (series[key].type == 'funnel') {
-          series[key].label.show = optionsCollapse.isShow
-          series[key].label.fontSize = optionsCollapse.fontSize
-          series[key].label.color = optionsCollapse.color
-          series[key].label.fontWeight = optionsCollapse.fontWeight
+        if (series[key].type == "funnel") {
+          series[key].label.show = optionsCollapse.isShow;
+          series[key].label.fontSize = optionsCollapse.fontSize;
+          series[key].label.color = optionsCollapse.color;
+          series[key].label.fontWeight = optionsCollapse.fontWeight;
 
-          series[key].sort = optionsCollapse.reversal ? 'ascending' : 'descending'
+          series[key].sort = optionsCollapse.reversal
+            ? "ascending"
+            : "descending";
         }
       }
     },
     // 标题修改
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup
-      const title = {}
-      title.show = optionsCollapse.isNoTitle
-      title.text = optionsCollapse.titleText
-      title.left = optionsCollapse.textAlign
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.show = optionsCollapse.isNoTitle;
+      title.text = optionsCollapse.titleText;
+      title.left = optionsCollapse.textAlign;
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight,
-      }
-      title.subtext = optionsCollapse.subText
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
       title.subtextStyle = {
         color: optionsCollapse.subTextColor,
         fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize,
-      }
+        fontSize: optionsCollapse.subTextFontSize
+      };
 
-      this.options.title = title
+      this.options.title = title;
     },
     // 提示语设置 tooltip
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup
+      const optionsCollapse = this.optionsSetup;
       const tooltip = {
-        trigger: 'item',
+        trigger: "item",
         show: true,
         textStyle: {
           color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize,
-        },
-      }
-      this.options.tooltip = tooltip
+          fontSize: optionsCollapse.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup
-      const legend = this.options.legend
-      legend.show = optionsCollapse.isShowLegend
-      legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
-      legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
-      legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
-      legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
-      legend.orient = optionsCollapse.layoutFront
+      const optionsCollapse = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsCollapse.isShowLegend;
+      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.bottom =
+        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsCollapse.layoutFront;
       legend.textStyle = {
         color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize,
-      }
-      legend.itemWidth = optionsCollapse.lengedWidth
+        fontSize: optionsCollapse.fontSize
+      };
+      legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup
-      const customColor = optionsCollapse.customColor
-      if (!customColor) return
-      const arrColor = []
+      const optionsCollapse = this.optionsSetup;
+      const customColor = optionsCollapse.customColor;
+      if (!customColor) return;
+      const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
-        arrColor.push(customColor[i].color)
+        arrColor.push(customColor[i].color);
       }
-      this.options.color = arrColor
-      this.options = Object.assign({}, this.options)
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
     },
     setOptionsData() {
-      const optionsData = this.optionsData // 数据类型 静态 or 动态
-      optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val)
+      const staticData = JSON.parse(val);
       for (const key in this.options.series) {
-        if (this.options.series[key].type == 'funnel') {
-          this.options.series[key].data = staticData
+        if (this.options.series[key].type == "funnel") {
+          this.options.series[key].data = staticData;
         }
       }
     },
-    dynamicDataFn(val) {
-      if (!val) return
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
       for (const key in this.options.series) {
-        if (this.options.series[key].type == 'funnel') {
-          this.options.series[key].data = val
+        if (this.options.series[key].type == "funnel") {
+          this.options.series[key].data = val;
         }
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue

@@ -6,128 +6,148 @@
 
 <script>
 export default {
-  name: 'WidgetGauge',
+  name: "WidgetGauge",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
   data() {
     return {
       options: {
         series: [
           {
-            name: 'Pressure',
-            type: 'gauge',
+            name: "Pressure",
+            type: "gauge",
             detail: {
-              formatter: '{value}',
+              formatter: "{value}",
               textStyle: {
-                fontSize: 12,
-              },
+                fontSize: 12
+              }
             },
             axisLine: {
               show: true,
               lineStyle: {
-                width: 10,
-              },
+                width: 10
+              }
             },
             axisLabel: {
               show: true,
-              fontSize: 12,
+              fontSize: 12
             },
             axisTick: {
-              show: true,
+              show: true
             },
             data: [
               {
                 value: 50,
-                name: '',
-              },
-            ],
-          },
-        ],
+                name: ""
+              }
+            ]
+          }
+        ]
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {},
-    }
+      optionsSetup: {}
+    };
   },
   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: {
       handler(val) {
-        this.optionsStyle = val.position // 位置
-        this.optionsData = val.data // 数据
-        this.optionsCollapse = val.collapse // 折叠数据
-        this.optionsSetup = val.setup // 样式
-        this.setOptions()
-        this.setOptionsData()
+        this.optionsStyle = val.position; // 位置
+        this.optionsData = val.data; // 数据
+        this.optionsCollapse = val.collapse; // 折叠数据
+        this.optionsSetup = val.setup; // 样式
+        this.setOptions();
+        this.setOptionsData();
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   created() {
-    this.optionsStyle = this.value.position
-    this.optionsData = this.value.data
-    this.optionsCollapse = this.value.collapse
-    this.optionsSetup = this.value.setup
-    this.setOptions()
-    this.setOptionsData()
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.setOptions();
+    this.setOptionsData();
   },
   methods: {
     setOptions() {
-      const optionsSetup = this.optionsSetup
-      const series = this.options.series
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
       for (const key in series) {
-        if (series[key].type == 'gauge') {
-          series[key].axisLine.lineStyle.width = optionsSetup.tickMarkWeight
-          series[key].axisLabel.show = optionsSetup.showScaleValue
-          series[key].axisLabel.fontSize = optionsSetup.scaleFontSize
-          series[key].axisTick.show = optionsSetup.showTickMarks
-          series[key].detail.textStyle.fontSize = optionsSetup.targetFontSize
+        if (series[key].type == "gauge") {
+          series[key].axisLine.lineStyle.width = optionsSetup.tickMarkWeight;
+          series[key].axisLabel.show = optionsSetup.showScaleValue;
+          series[key].axisLabel.fontSize = optionsSetup.scaleFontSize;
+          series[key].axisTick.show = optionsSetup.showTickMarks;
+          series[key].detail.textStyle.fontSize = optionsSetup.targetFontSize;
         }
       }
     },
     setOptionsData() {
-      const optionsData = this.optionsData // 数据类型 静态 or 动态
-      optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      console.log(optionsData);
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const unit = JSON.parse(val).unit
-      const series = this.options.series
+      const unit = JSON.parse(val).unit;
+      const series = this.options.series;
       for (const key in series) {
-        series[key].detail.formatter = `{value}${unit}`
+        series[key].detail.formatter = `{value}${unit}`;
         series[key].data[0] = {
           value: JSON.parse(val).value,
-          name: JSON.parse(val).name,
-        }
+          name: JSON.parse(val).name
+        };
       }
     },
-    dynamicDataFn(val) {
-      if (!val) return
-      const series = this.options.series
+    dynamicDataFn(val, refreshTime) {
+      console.log(val);
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      const series = this.options.series;
       for (const key in series) {
-        series[key].detail.formatter = `{value}${val.unit}`
+        series[key].detail.formatter = `{value}${val.unit}`;
         series[key].data[0] = {
           value: val.value,
-          name: val.name || '',
-        }
+          name: val.name || ""
+        };
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

report-ui/src/views/report/bigscreen/designer/widget/widgetHollowPiechart.vue

@@ -6,123 +6,123 @@
 
 <script>
 export default {
-  name: 'WidgetHollowPiechart',
+  name: "WidgetHollowPiechart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
   data() {
     return {
       options: {
         color: [],
         tooltip: {
-          trigger: 'item',
+          trigger: "item"
         },
         legend: {
-          top: '5%',
-          left: 'center',
+          top: "5%",
+          left: "center",
           textStyle: {
-            color: '#fff',
-          },
+            color: "#fff"
+          }
         },
         series: [
           {
-            type: 'pie',
-            radius: ['40%', '70%'],
+            type: "pie",
+            radius: ["40%", "70%"],
             avoidLabelOverlap: true,
             label: {
               show: false,
-              position: 'center',
+              position: "center"
             },
             emphasis: {
               label: {
                 show: true,
-                fontSize: '40',
-                fontWeight: 'bold',
-              },
+                fontSize: "40",
+                fontWeight: "bold"
+              }
             },
             labelLine: {
-              show: true,
+              show: true
             },
-            data: [],
-          },
-        ],
+            data: []
+          }
+        ]
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {},
-    }
+      optionsSetup: {}
+    };
   },
   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: {
       handler(val) {
-        this.optionsStyle = val.position
-        this.optionsData = val.data
-        this.optionsCollapse = val.collapse
-        this.optionsSetup = val.setup
-        this.editorOptions()
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   created() {
-    this.optionsStyle = this.value.position
-    this.optionsData = this.value.data
-    this.optionsCollapse = this.value.collapse
-    this.optionsSetup = this.value.setup
-    this.editorOptions()
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
   },
   methods: {
     // 修改图标options属性
     editorOptions() {
-      this.setOptionsTitle()
-      this.setOptionsValue()
-      this.setOptionsTooltip()
-      this.setOptionsLegend()
-      this.setOptionsColor()
-      this.setOptionsData()
+      this.setOptionsTitle();
+      this.setOptionsValue();
+      this.setOptionsTooltip();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
     },
     // 标题设置
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup
-      const title = {}
-      title.show = optionsCollapse.isNoTitle
-      title.text = optionsCollapse.titleText
-      title.left = optionsCollapse.textAlign
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.show = optionsCollapse.isNoTitle;
+      title.text = optionsCollapse.titleText;
+      title.left = optionsCollapse.textAlign;
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight,
-      }
-      title.subtext = optionsCollapse.subText
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
       title.subtextStyle = {
         color: optionsCollapse.subTextColor,
         fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize,
-      }
+        fontSize: optionsCollapse.subTextFontSize
+      };
 
-      this.options.title = title
+      this.options.title = title;
     },
     // 数值设定
     setOptionsValue() {
-      const optionsCollapse = this.optionsSetup
-      const series = this.options.series
-      const numberValue = optionsCollapse.numberValue ? '{c}' : ''
-      const percentage = optionsCollapse.percentage ? '({d})%' : ''
+      const optionsCollapse = this.optionsSetup;
+      const series = this.options.series;
+      const numberValue = optionsCollapse.numberValue ? "{c}" : "";
+      const percentage = optionsCollapse.percentage ? "({d})%" : "";
       const label = {
         show: optionsCollapse.isShow,
         formatter: `{a|{b}：${numberValue} ${percentage}}`,
@@ -131,83 +131,102 @@ export default {
             padding: [-30, 15, -20, 15],
             color: optionsCollapse.subTextColor,
             fontSize: optionsCollapse.fontSize,
-            fontWeight: optionsCollapse.fontWeight,
-          },
+            fontWeight: optionsCollapse.fontWeight
+          }
         },
         fontSize: optionsCollapse.fontSize,
-        fontWeight: optionsCollapse.optionsCollapse,
-      }
+        fontWeight: optionsCollapse.optionsCollapse
+      };
 
       for (const key in series) {
-        if (series[key].type == 'pie') {
-          series[key].label = label
-          series[key].labelLine.show = optionsCollapse.isShow
+        if (series[key].type == "pie") {
+          series[key].label = label;
+          series[key].labelLine.show = optionsCollapse.isShow;
         }
       }
     },
     // 提示语设置 tooltip
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup
+      const optionsCollapse = this.optionsSetup;
       const tooltip = {
-        trigger: 'item',
+        trigger: "item",
         show: true,
         textStyle: {
           color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize,
-        },
-      }
-      this.options.tooltip = tooltip
+          fontSize: optionsCollapse.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup
-      const legend = this.options.legend
-      legend.show = optionsCollapse.isShowLegend
-      legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
-      legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
-      legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
-      legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
-      legend.orient = optionsCollapse.layoutFront
+      const optionsCollapse = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsCollapse.isShowLegend;
+      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.bottom =
+        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsCollapse.layoutFront;
       legend.textStyle = {
         color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize,
-      }
-      legend.itemWidth = optionsCollapse.lengedWidth
+        fontSize: optionsCollapse.fontSize
+      };
+      legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup
-      const customColor = optionsCollapse.customColor
-      if (!customColor) return
-      const arrColor = []
+      const optionsCollapse = this.optionsSetup;
+      const customColor = optionsCollapse.customColor;
+      if (!customColor) return;
+      const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
-        arrColor.push(customColor[i].color)
+        arrColor.push(customColor[i].color);
       }
-      this.options.color = arrColor
-      this.options = Object.assign({}, this.options)
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
     },
     setOptionsData() {
-      const optionsData = this.optionsData // 数据类型 静态 or 动态
-      optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val)
+      const staticData = JSON.parse(val);
       for (const key in this.options.series) {
-        if (this.options.series[key].type == 'pie') {
-          this.options.series[key].data = staticData
+        if (this.options.series[key].type == "pie") {
+          this.options.series[key].data = staticData;
         }
       }
     },
     dynamicDataFn(val) {
-      if (!val) return
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
       for (const key in this.options.series) {
-        if (this.options.series[key].type == 'pie') {
-          this.options.series[key].data = val
+        if (this.options.series[key].type == "pie") {
+          this.options.series[key].data = val;
         }
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue

@@ -298,7 +298,7 @@ export default {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
-        : this.dynamicDataFn(optionsData.dynamicData);
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
       const staticData = JSON.parse(val);
@@ -312,8 +312,24 @@ export default {
         }
       }
     },
-    dynamicDataFn(val) {
+    dynamicDataFn(val, refreshTime) {
       if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
       // x轴
       this.options.xAxis.data = val.xAxis;
       // series

report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue

@@ -6,118 +6,118 @@
 
 <script>
 export default {
-  name: 'WidgetPiechart',
+  name: "WidgetPiechart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
   data() {
     return {
       options: {
         title: {
-          text: '某站点用户访问来源',
-          left: 'center',
+          text: "",
+          left: "center",
           textStyle: {
-            color: '#fff',
-          },
+            color: "#fff"
+          }
         },
         legend: {
-          orient: 'vertical',
-          left: 'left',
+          orient: "vertical",
+          left: "left",
           textStyle: {
-            color: '#fff',
-          },
+            color: "#fff"
+          }
         },
         series: [
           {
-            type: 'pie',
-            radius: '50%',
+            type: "pie",
+            radius: "50%",
             data: [],
             emphasis: {
               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: {
     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: {
       handler(val) {
-        this.optionsStyle = val.position
-        this.optionsData = val.data
-        this.optionsCollapse = val.collapse
-        this.optionsSetup = val.setup
-        this.editorOptions()
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   created() {
-    this.optionsStyle = this.value.position
-    this.optionsData = this.value.data
-    this.optionsCollapse = this.value.collapse
-    this.optionsSetup = this.value.setup
-    this.editorOptions()
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
   },
   methods: {
     // 修改图标options属性
     editorOptions() {
-      this.setOptionsTitle()
-      this.setOptionsValue()
-      this.setOptionsTooltip()
-      this.setOptionsLegend()
-      this.setOptionsColor()
-      this.setOptionsData()
+      this.setOptionsTitle();
+      this.setOptionsValue();
+      this.setOptionsTooltip();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
     },
     // 标题设置
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup
-      const title = {}
-      title.show = optionsCollapse.isNoTitle
-      title.text = optionsCollapse.titleText
-      title.left = optionsCollapse.textAlign
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.show = optionsCollapse.isNoTitle;
+      title.text = optionsCollapse.titleText;
+      title.left = optionsCollapse.textAlign;
       title.textStyle = {
         color: optionsCollapse.textColor,
         fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight,
-      }
-      title.subtext = optionsCollapse.subText
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
       title.subtextStyle = {
         color: optionsCollapse.subTextColor,
         fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize,
-      }
+        fontSize: optionsCollapse.subTextFontSize
+      };
 
-      this.options.title = title
+      this.options.title = title;
     },
     // 数值设定
     setOptionsValue() {
-      const optionsCollapse = this.optionsSetup
-      const series = this.options.series
-      const numberValue = optionsCollapse.numberValue ? '{c}' : ''
-      const percentage = optionsCollapse.percentage ? '({d})%' : ''
+      const optionsCollapse = this.optionsSetup;
+      const series = this.options.series;
+      const numberValue = optionsCollapse.numberValue ? "{c}" : "";
+      const percentage = optionsCollapse.percentage ? "({d})%" : "";
       const label = {
         show: optionsCollapse.isShow,
         formatter: `{a|{b}：${numberValue} ${percentage}}`,
@@ -126,83 +126,102 @@ export default {
             padding: [-30, 15, -20, 15],
             color: optionsCollapse.subTextColor,
             fontSize: optionsCollapse.fontSize,
-            fontWeight: optionsCollapse.fontWeight,
-          },
+            fontWeight: optionsCollapse.fontWeight
+          }
         },
         fontSize: optionsCollapse.fontSize,
 
-        fontWeight: optionsCollapse.optionsCollapse,
-      }
+        fontWeight: optionsCollapse.optionsCollapse
+      };
       for (const key in series) {
-        if (series[key].type == 'pie') {
-          series[key].label = label
-          series[key].labelLine = { show: optionsCollapse.isShow }
+        if (series[key].type == "pie") {
+          series[key].label = label;
+          series[key].labelLine = { show: optionsCollapse.isShow };
         }
       }
     },
     // 提示语设置 tooltip
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup
+      const optionsCollapse = this.optionsSetup;
       const tooltip = {
-        trigger: 'item',
+        trigger: "item",
         show: true,
         textStyle: {
           color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize,
-        },
-      }
-      this.options.tooltip = tooltip
+          fontSize: optionsCollapse.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup
-      const legend = this.options.legend
-      legend.show = optionsCollapse.isShowLegend
-      legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
-      legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
-      legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
-      legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
-      legend.orient = optionsCollapse.layoutFront
+      const optionsCollapse = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsCollapse.isShowLegend;
+      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.bottom =
+        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsCollapse.layoutFront;
       legend.textStyle = {
         color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize,
-      }
-      legend.itemWidth = optionsCollapse.lengedWidth
+        fontSize: optionsCollapse.fontSize
+      };
+      legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup
-      const customColor = optionsCollapse.customColor
-      if (!customColor) return
-      const arrColor = []
+      const optionsCollapse = this.optionsSetup;
+      const customColor = optionsCollapse.customColor;
+      if (!customColor) return;
+      const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
-        arrColor.push(customColor[i].color)
+        arrColor.push(customColor[i].color);
       }
-      this.options.color = arrColor
-      this.options = Object.assign({}, this.options)
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
     },
     setOptionsData() {
-      const optionsData = this.optionsData // 数据类型 静态 or 动态
-      optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val)
+      const staticData = JSON.parse(val);
       for (const key in this.options.series) {
-        if (this.options.series[key].type == 'pie') {
-          this.options.series[key].data = staticData
+        if (this.options.series[key].type == "pie") {
+          this.options.series[key].data = staticData;
         }
       }
     },
-    dynamicDataFn(val) {
-      if (!val) return
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
       for (const key in this.options.series) {
-        if (this.options.series[key].type == 'pie') {
-          this.options.series[key].data = val
+        if (this.options.series[key].type == "pie") {
+          this.options.series[key].data = val;
         }
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">