From 169c28c69ff76ea8f1b5b2766fe92195cfbc63a1 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Tue, 29 Jun 2021 15:47:30 +0800
Subject: [PATCH] update

---
 .../designer/widget/widgetBarchart.vue        |  21 +-
 .../designer/widget/widgetLinechart.vue       | 342 +++++++++---------
 2 files changed, 182 insertions(+), 181 deletions(-)

diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
index dd298249..4f6f0fdb 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
@@ -152,11 +152,11 @@ export default {
           }
         },
         splitLine: {
-            show: optionsCollapse.isShowSplitLineX,
-            lineStyle: {
-                color: optionsCollapse.splitLineColorX
-            },
-        },
+          show: optionsCollapse.isShowSplitLineX,
+          lineStyle: {
+            color: optionsCollapse.splitLineColorX
+          }
+        }
       };
       this.options.xAxis = xAxis;
     },
@@ -189,11 +189,11 @@ export default {
           }
         },
         splitLine: {
-            show: optionsCollapse.isShowSplitLineY,
-            lineStyle: {
-                color: optionsCollapse.splitLineColorY
-            },
-        },
+          show: optionsCollapse.isShowSplitLineY,
+          lineStyle: {
+            color: optionsCollapse.splitLineColorY
+          }
+        }
       };
 
       this.options.yAxis = yAxis;
@@ -289,7 +289,6 @@ export default {
     setOptionsData() {
       const optionsSetup = this.optionsSetup;
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
-      console.log(optionsData);
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue
index 2f9bf8e2..5a43e532 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue
@@ -1,145 +1,144 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options"
-             autoresize />
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'WidgetLinechart',
+  name: "WidgetLinechart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean,
+    ispreview: Boolean
   },
-  data () {
+  data() {
     return {
       options: {
         grid: {},
         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"
+          }
         },
         xAxis: {
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#fff',
-            },
-          },
+              color: "#fff"
+            }
+          }
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#fff',
-            },
-          },
+              color: "#fff"
+            }
+          }
         },
         series: [
           {
             data: [],
-            type: 'line',
-          },
-        ],
+            type: "line"
+          }
+        ]
       },
       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.setOptionsTooltip()
-      this.setOptionsData()
-      this.setOptionsMargin()
-      this.setOptionsLegend()
-      this.setOptionsColor()
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsTop();
+      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, // 轴反转
@@ -149,181 +148,184 @@ 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;
     },
     // 折线设置
-    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,
-          }
+            width: optionsCollapse.lineWidth
+          };
           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;
     },
     // 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
-      console.log(legend)
+        fontSize: optionsCollapse.fontSize
+      };
+      legend.itemWidth = optionsCollapse.lengedWidth;
+      console.log(legend);
     },
     // 图例颜色修改
-    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 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData);
     },
-    staticDataFn (val) {
-      const staticData = JSON.parse(val)
+    staticDataFn(val) {
+      const staticData = JSON.parse(val);
       // x轴
-      this.options.xAxis.data = staticData.categories
+      this.options.xAxis.data = staticData.categories;
       // series
-      const series = this.options.series
+      const series = this.options.series;
       for (const i in series) {
-        if (series[i].type == 'line') {
-          series[i].data = staticData.series[0].data
+        if (series[i].type == "line") {
+          series[i].data = staticData.series[0].data;
         }
       }
     },
-    dynamicDataFn (val) {
-      if (!val) return
+    dynamicDataFn(val) {
+      if (!val) return;
       // x轴
-      this.options.xAxis.data = val.xAxis
+      this.options.xAxis.data = val.xAxis;
       // series
-      const series = this.options.series
+      const series = this.options.series;
       for (const i in series) {
-        if (series[i].type == 'line') {
-          series[i].data = val.series[i].data
+        if (series[i].type == "line") {
+          series[i].data = val.series[i].data;
         }
       }
-    },
-  },
-}
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">