From a2d04f30b759723748687992ec0fed1b80b9b5a3 Mon Sep 17 00:00:00 2001
From: qianming <qianming@anji-plus.com>
Date: Fri, 3 Sep 2021 16:27:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9F=B1=E4=BD=93=E5=9C=A8=E7=AB=96=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=8B=EF=BC=8C=E6=95=B0=E5=80=BC=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=92=8C=E6=B8=90=E5=8F=98=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tools/componentsJSON/widget-barchart.js   |  30 ++-
 .../componentsJSON/widget-barlinechart.js     | 106 +++++++-
 .../widget-gradient-barchart.js               |  26 +-
 .../bar/widgetGradientColorBarchart.vue       | 245 +++++++++---------
 .../widget/pie/widgetPiePercentageChart.vue   |  25 +-
 .../designer/widget/widgetBarchart.vue        | 174 +++++++------
 .../designer/widget/widgetBarlinechart.vue    |  27 +-
 7 files changed, 378 insertions(+), 255 deletions(-)

diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barchart.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barchart.js
index da853d14..b20af1f2 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barchart.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barchart.js
@@ -111,7 +111,7 @@ export const widgetBarchart = {
               },
               {
                 type: 'el-input-number',
-                label: '字体大小',
+                label: '字体字号',
                 name: 'textFontSize',
                 required: false,
                 placeholder: '',
@@ -162,7 +162,7 @@ export const widgetBarchart = {
               },
               {
                 type: 'el-input-number',
-                label: '字体大小',
+                label: '字体字号',
                 name: 'subTextFontSize',
                 required: false,
                 placeholder: '',
@@ -203,7 +203,7 @@ export const widgetBarchart = {
                 name: 'nameFontSizeX',
                 required: false,
                 placeholder: '',
-                value: 12
+                value: 14
               },
               {
                 type: 'vue-color',
@@ -219,7 +219,7 @@ export const widgetBarchart = {
                 name: 'fontSizeX',
                 required: false,
                 placeholder: '',
-                value: 12,
+                value: 14,
               },
               {
                 type: 'el-slider',
@@ -389,11 +389,19 @@ export const widgetBarchart = {
                 name: 'isShow',
                 required: false,
                 placeholder: '',
-                value: false
+                value: true
               },
               {
                 type: 'el-input-number',
-                label: '字体大小',
+                label: '距离',
+                name: 'distance',
+                required: false,
+                placeholder: '',
+                value: 5
+              },
+              {
+                type: 'el-input-number',
+                label: '字体字号',
                 name: 'fontSize',
                 required: false,
                 placeholder: '',
@@ -428,17 +436,17 @@ export const widgetBarchart = {
             list: [
               {
                 type: 'el-input-number',
-                label: '字体大小',
-                name: 'fontSize',
+                label: '字体字号',
+                name: 'tipFontSize',
                 required: false,
-                placeholder: '',
+                placeholder: 16,
               },
               {
                 type: 'vue-color',
                 label: '字体颜色',
                 name: 'lineColor',
                 required: false,
-                placeholder: '',
+                placeholder: '#ff7f50',
               },
             ],
           },
@@ -497,7 +505,7 @@ export const widgetBarchart = {
               },
               {
                 type: 'el-input-number',
-                label: '字体大小',
+                label: '字体字号',
                 name: 'lengedFontSize',
                 required: false,
                 placeholder: '',
diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barlinechart.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barlinechart.js
index afaa2aaa..7c687d83 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barlinechart.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barlinechart.js
@@ -433,13 +433,115 @@ export const widgetBarlinechart = {
               },
             ],
           },
+          {
+            name: '折线数值设定',
+            list: [
+              {
+                type: 'el-switch',
+                label: '显示',
+                name: 'isShowLine',
+                required: false,
+                placeholder: '',
+                value: false
+              },
+              {
+                type: 'el-input-number',
+                label: '距离',
+                name: 'distanceLine',
+                required: false,
+                placeholder: '',
+                value: 5
+              },
+              {
+                type: 'el-input-number',
+                label: '字体字号',
+                name: 'fontSizeLine',
+                required: false,
+                placeholder: '',
+                value: 14
+              },
+              {
+                type: 'vue-color',
+                label: '字体颜色',
+                name: 'subTextColorLine',
+                required: false,
+                placeholder: '',
+                value: '#fff'
+              },
+              {
+                type: 'el-select',
+                label: '字体粗细',
+                name: 'fontWeightLine',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'normal', name: '正常'},
+                  {code: 'bold', name: '粗体'},
+                  {code: 'bolder', name: '特粗体'},
+                  {code: 'lighter', name: '细体'}
+                ],
+                value: 'normal'
+              },
+            ],
+          },
+          {
+            name: '柱体数值设定',
+            list: [
+              {
+                type: 'el-switch',
+                label: '显示',
+                name: 'isShowBar',
+                required: false,
+                placeholder: '',
+                value: false
+              },
+              {
+                type: 'el-input-number',
+                label: '距离',
+                name: 'distanceBar',
+                required: false,
+                placeholder: '',
+                value: 5
+              },
+              {
+                type: 'el-input-number',
+                label: '字体字号',
+                name: 'fontSizeBar',
+                required: false,
+                placeholder: '',
+                value: 14
+              },
+              {
+                type: 'vue-color',
+                label: '字体颜色',
+                name: 'subTextColorBar',
+                required: false,
+                placeholder: '',
+                value: '#fff'
+              },
+              {
+                type: 'el-select',
+                label: '字体粗细',
+                name: 'fontWeightBar',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'normal', name: '正常'},
+                  {code: 'bold', name: '粗体'},
+                  {code: 'bolder', name: '特粗体'},
+                  {code: 'lighter', name: '细体'}
+                ],
+                value: 'normal'
+              },
+            ],
+          },
           {
             name: '提示语设置',
             list: [
               {
                 type: 'el-input-number',
                 label: '字体大小',
-                name: 'fontSize',
+                name: 'tipFontSize',
                 required: false,
                 placeholder: '',
                 value: 12
@@ -450,7 +552,7 @@ export const widgetBarlinechart = {
                 name: 'lineColor',
                 required: false,
                 placeholder: '',
-                value: '#fff'
+                value: '#e68b55'
               },
             ],
           },
diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gradient-barchart.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gradient-barchart.js
index fb8855e6..c7fc447f 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gradient-barchart.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gradient-barchart.js
@@ -58,14 +58,6 @@ export const widgetGradientBarchart =  {
                 placeholder: '',
                 value: 5,
               },
-/*              {
-                type: 'el-slider',
-                label: '最小高度',
-                name: 'minHeight',
-                require: false,
-                placeholder: '',
-                value: 0,
-              },*/
             ],
           },
           {
@@ -388,7 +380,15 @@ export const widgetGradientBarchart =  {
                 name: 'isShow',
                 required: false,
                 placeholder: '',
-                value: false
+                value: true
+              },
+              {
+                type: 'el-input-number',
+                label: '距离',
+                name: 'distance',
+                required: false,
+                placeholder: '',
+                value: 5
               },
               {
                 type: 'el-input-number',
@@ -438,7 +438,7 @@ export const widgetGradientBarchart =  {
                 label: '字体颜色',
                 name: 'lineColor',
                 required: false,
-                placeholder: '',
+                placeholder: '#ff7f50',
               },
             ],
           },
@@ -485,7 +485,7 @@ export const widgetGradientBarchart =  {
                 name: 'bar0color',
                 required: false,
                 placeholder: '',
-                value: '#00F4FF'
+                value: 'rgba(0,244,255,1)'
               },
               {
                 type: 'vue-color',
@@ -493,7 +493,7 @@ export const widgetGradientBarchart =  {
                 name: 'bar100color',
                 required: false,
                 placeholder: '',
-                value: '#004DA7'
+                value: 'rgba(0,77,167,1)'
               },
               {
                 type: 'vue-color',
@@ -501,7 +501,7 @@ export const widgetGradientBarchart =  {
                 name: 'shadowColor',
                 required: false,
                 placeholder: '',
-                value: '#00A0DD'
+                value: 'rgba(0,160,221,1)'
               },
               {
                 type: 'el-input-number',
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
index 48cfd4ca..eed79f71 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -1,11 +1,12 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 
 <script>
 import echarts from "echarts";
+
 export default {
   name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
   components: {},
@@ -16,9 +17,8 @@ export default {
   data() {
     return {
       options: {
-        // backgroundColor: '#00265f',
         title: {
-          text: "政策补贴额度",
+          text: "",
           x: "center",
           y: "4%",
           textStyle: {
@@ -49,14 +49,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: [
-            "制造业",
-            "建筑业",
-            "农林牧渔",
-            "房地产",
-            "金融业",
-            "居民服务及其他"
-          ],
+          data: [],
           axisLine: {
             lineStyle: {
               color: "rgba(255,255,255,0.12)"
@@ -71,7 +64,7 @@ export default {
           }
         },
         yAxis: {
-          name: "单位：万元",
+          name: "",
           axisLabel: {
             formatter: "{value}",
             color: "#e2e9ff"
@@ -95,11 +88,7 @@ export default {
             barWidth: "20px",
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                   [
                     {
                       offset: 0,
@@ -184,57 +173,57 @@ export default {
     },
     // 标题修改
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = {};
-      title.text = optionsCollapse.titleText;
-      title.show = optionsCollapse.isNoTitle;
-      title.left = optionsCollapse.textAlign;
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
       title.textStyle = {
-        color: optionsCollapse.textColor,
-        fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
       };
-      title.subtext = optionsCollapse.subText;
+      title.subtext = optionsSetup.subText;
       title.subtextStyle = {
-        color: optionsCollapse.subTextColor,
-        fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
       };
 
       this.options.title = title;
     },
     // X轴设置
     setOptionsX() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const xAxis = {
         type: "category",
-        show: optionsCollapse.hideX, // 坐标轴是否显示
-        name: optionsCollapse.xName, // 坐标轴名称
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
         nameTextStyle: {
-          color: optionsCollapse.nameColorX,
-          fontSize: optionsCollapse.nameFontSizeX
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
         },
-        nameRotate: optionsCollapse.textAngle, // 文字角度
-        inverse: optionsCollapse.reversalX, // 轴反转
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
         axisLabel: {
           show: true,
-          interval: optionsCollapse.textInterval, // 文字间隔
-          rotate: optionsCollapse.textAngle, // 文字角度
+          interval: optionsSetup.textInterval, // 文字间隔
+          rotate: optionsSetup.textAngle, // 文字角度
           textStyle: {
-            color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeX
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorX
+            color: optionsSetup.lineColorX
           }
         },
         splitLine: {
-          show: optionsCollapse.isShowSplitLineX,
+          show: optionsSetup.isShowSplitLineX,
           lineStyle: {
-            color: optionsCollapse.splitLineColorX
+            color: optionsSetup.splitLineColorX
           }
         }
       };
@@ -242,36 +231,36 @@ export default {
     },
     // Y轴设置
     setOptionsY() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const yAxis = {
         type: "value",
-        scale : optionsCollapse.scale,
-        splitNumber: optionsCollapse.splitNumber,// 均分
-        show: optionsCollapse.isShowY, // 坐标轴是否显示
-        name: optionsCollapse.textNameY, // 坐标轴名称
+        scale: optionsSetup.scale,
+        splitNumber: optionsSetup.splitNumber,// 均分
+        show: optionsSetup.isShowY, // 坐标轴是否显示
+        name: optionsSetup.textNameY, // 坐标轴名称
         nameTextStyle: { // 别名
-          color: optionsCollapse.nameColorY,
-          fontSize: optionsCollapse.namefontSizeY
+          color: optionsSetup.nameColorY,
+          fontSize: optionsSetup.namefontSizeY
         },
-        inverse: optionsCollapse.reversalY, // 轴反转
+        inverse: optionsSetup.reversalY, // 轴反转
         axisLabel: {
           show: true,
-          rotate: optionsCollapse.ytextAngle, // 文字角度
+          rotate: optionsSetup.ytextAngle, // 文字角度
           textStyle: {
-            color: optionsCollapse.colorY, // y轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeY
+            color: optionsSetup.colorY, // y轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeY
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorY
+            color: optionsSetup.lineColorY
           }
         },
         splitLine: {
-          show: optionsCollapse.isShowSplitLineY,
+          show: optionsSetup.isShowSplitLineY,
           lineStyle: {
-            color: optionsCollapse.splitLineColorY
+            color: optionsSetup.splitLineColorY
           }
         }
       };
@@ -279,91 +268,115 @@ export default {
     },
     // 数值设定 or 柱体设置
     setOptionsTop() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-      for (const key in series) {
-        if (series[key].type == "bar") {
-          series[key].label = {
-            show: optionsCollapse.isShow,
+      if (series[0].type == "bar") {
+        if (optionsSetup.verticalShow) {
+          series[0].label = {
+            show: optionsSetup.isShow,
+            position: "right",
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight
+          }
+        } else {
+          series[0].label = {
+            show: optionsSetup.isShow,
             position: "top",
-            distance: 10,
-            fontSize: optionsCollapse.fontSize,
-            color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight
-          };
-          series[key].barWidth = optionsCollapse.maxWidth;
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight
+          }
         }
+        series[0].barWidth = optionsSetup.maxWidth;
       }
-      this.options.series = series;
     },
     // tooltip 提示语设置
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
         show: true,
         textStyle: {
-          color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.fontSize
         }
       };
       this.options.tooltip = tooltip;
     },
     // 边距设置
     setOptionsMargin() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const grid = {
-        left: optionsCollapse.marginLeft,
-        right: optionsCollapse.marginRight,
-        bottom: optionsCollapse.marginBottom,
-        top: optionsCollapse.marginTop,
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
         containLabel: true
       };
       this.options.grid = grid;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = 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.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
       legend.bottom =
-        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
-      legend.orient = optionsCollapse.layoutFront;
+        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
-        color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.fontSize
       };
-      legend.itemWidth = optionsCollapse.lengedWidth;
+      legend.itemWidth = optionsSetup.lengedWidth;
     },
     // 渐变色
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const itemStyle = this.options.series[0]["itemStyle"];
-      const normal = {
-        color: new echarts.graphic.LinearGradient(
-          0,
-          0,
-          0,
-          1,
-          [
-            {
-              offset: 0,
-              color: optionsCollapse.bar0color // 0% 处的颜色
-            },
-            {
-              offset: 1,
-              color: optionsCollapse.bar100color // 100% 处的颜色
-            }
-          ],
-          false
-        ),
-        barBorderRadius: optionsCollapse.radius, //圆角
-        shadowColor: optionsCollapse.shadowColor, // 阴影颜色
-        shadowBlur: optionsCollapse.shadowBlur //模糊系数
-      };
+      let normal = {}
+      if (optionsSetup.verticalShow) {
+        normal = {
+          color: new echarts.graphic.LinearGradient(1, 0, 0, 0,
+            [
+              {
+                offset: 0,
+                color: optionsSetup.bar0color // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: optionsSetup.bar100color // 100% 处的颜色
+              }
+            ],
+          ),
+          barBorderRadius: optionsSetup.radius, //圆角
+          shadowColor: optionsSetup.shadowColor, // 阴影颜色
+          shadowBlur: optionsSetup.shadowBlur //模糊系数
+        }
+      } else {
+        normal = {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+            [
+              {
+                offset: 0,
+                color: optionsSetup.bar0color // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: optionsSetup.bar100color // 100% 处的颜色
+              }
+            ],
+          ),
+          barBorderRadius: optionsSetup.radius, //圆角
+          shadowColor: optionsSetup.shadowColor, // 阴影颜色
+          shadowBlur: optionsSetup.shadowBlur //模糊系数
+        }
+      }
       itemStyle["normal"] = normal;
     },
     // 数据解析
@@ -373,10 +386,10 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-            optionsData.dynamicData,
-            optionsData.refreshTime,
-            optionsSetup
-          );
+        optionsData.dynamicData,
+        optionsData.refreshTime,
+        optionsSetup
+        );
     },
     // 静态数据
     staticDataFn(val, optionsSetup) {
@@ -395,10 +408,8 @@ export default {
       }
       // 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[0].type == "bar") {
+        series[0].data = staticData.series[0].data;
       }
     },
     // 动态数据
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue
index f671a6ea..fe819189 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue
@@ -5,9 +5,7 @@
 </template>
 
 <script>
-/*import echarts from "echarts";
-var myChart = echarts.init(this.$refs.myChart)*/
-var per = 60 ;
+var per = 60;
 export default {
   name: "widgetPiePercentageChart",//百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
   components: {},
@@ -19,7 +17,6 @@ export default {
     return {
       angle: 0,
       options: {
-        //backgroundColor: '#061740',
         title: {
           text: '{nums|' + per + '}{percent|%}',
           x: 'center',
@@ -341,10 +338,10 @@ export default {
     this.editorOptions();
   },
   mounted() {
-/*        setInterval(() => {
-          this.angle = this.angle + 3
-          myChart.setOption(options,true)
-        }, 1000);*/
+    /*        setInterval(() => {
+              this.angle = this.angle + 3
+              myChart.setOption(options,true)
+            }, 1000);*/
   },
   methods: {
     //轴point设置
@@ -358,8 +355,6 @@ export default {
     },
     editorOptions() {
       this.setOptionsTitle();
-      //this.setOptionsTooltip();
-      //this.setOptionsLegend();
       this.setOptionsColor();
       this.setOptionsData();
       this.setOptionLine();
@@ -419,11 +414,11 @@ export default {
       };
       itemStyle['normal'] = normal
     },
-    setOptionSurplusColor(){
+    setOptionSurplusColor() {
       const itemStyle = this.options.series[6]['data'][1]['itemStyle']
       const normal = {
-          color: this.optionsSetup.colorsurplus,
-        };
+        color: this.optionsSetup.colorsurplus,
+      };
       itemStyle['normal'] = normal
     },
     setOptionLine() {
@@ -451,8 +446,8 @@ export default {
     staticDataFn(val) {
       const title = this.options.title;
       title.text = '{nums|' + val + '}{percent|%}';
-      this.options.series[6]['data'][0]['value'] = val ;
-      this.options.series[6]['data'][1]['value'] = 100 - val ;
+      this.options.series[6]['data'][0]['value'] = val;
+      this.options.series[6]['data'][1]['value'] = 100 - val;
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
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 e25cadcd..e02437fe 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 
@@ -104,57 +104,57 @@ export default {
     },
     // 标题修改
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = {};
-      title.text = optionsCollapse.titleText;
-      title.show = optionsCollapse.isNoTitle;
-      title.left = optionsCollapse.textAlign;
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
       title.textStyle = {
-        color: optionsCollapse.textColor,
-        fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
       };
-      title.subtext = optionsCollapse.subText;
+      title.subtext = optionsSetup.subText;
       title.subtextStyle = {
-        color: optionsCollapse.subTextColor,
-        fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
       };
 
       this.options.title = title;
     },
     // X轴设置
     setOptionsX() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const xAxis = {
         type: "category",
-        show: optionsCollapse.hideX, // 坐标轴是否显示
-        name: optionsCollapse.xName, // 坐标轴名称
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
         nameTextStyle: {
-          color: optionsCollapse.xNameColor,
-          fontSize: optionsCollapse.xNameFontSize
+          color: optionsSetup.xNameColor,
+          fontSize: optionsSetup.xNameFontSize
         },
-        nameRotate: optionsCollapse.textAngle, // 文字角度
-        inverse: optionsCollapse.reversalX, // 轴反转
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
         axisLabel: {
           show: true,
-          interval: optionsCollapse.textInterval, // 文字角度
-          rotate: optionsCollapse.textAngle, // 文字角度
+          interval: optionsSetup.textInterval, // 文字角度
+          rotate: optionsSetup.textAngle, // 文字角度
           textStyle: {
-            color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeX
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorX
+            color: optionsSetup.lineColorX
           }
         },
         splitLine: {
-          show: optionsCollapse.isShowSplitLineX,
+          show: optionsSetup.isShowSplitLineX,
           lineStyle: {
-            color: optionsCollapse.splitLineColorX
+            color: optionsSetup.splitLineColorX
           }
         }
       };
@@ -162,36 +162,36 @@ export default {
     },
     // Y轴设置
     setOptionsY() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const yAxis = {
         type: "value",
-        scale : optionsCollapse.scale,
-        splitNumber: optionsCollapse.splitNumber,// 均分
-        show: optionsCollapse.isShowY, // 坐标轴是否显示
-        name: optionsCollapse.textNameY, // 坐标轴名称
+        scale: optionsSetup.scale,
+        splitNumber: optionsSetup.splitNumber,// 均分
+        show: optionsSetup.isShowY, // 坐标轴是否显示
+        name: optionsSetup.textNameY, // 坐标轴名称
         nameTextStyle: {
-          color: optionsCollapse.nameColorY,
-          fontSize: optionsCollapse.nameFontSizeY
+          color: optionsSetup.nameColorY,
+          fontSize: optionsSetup.nameFontSizeY
         },
-        inverse: optionsCollapse.reversalY, // 轴反转
+        inverse: optionsSetup.reversalY, // 轴反转
         axisLabel: {
           show: true,
-          rotate: optionsCollapse.ytextAngle, // 文字角度
+          rotate: optionsSetup.ytextAngle, // 文字角度
           textStyle: {
-            color: optionsCollapse.colorY, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeY
+            color: optionsSetup.colorY, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeY
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorY
+            color: optionsSetup.lineColorY
           }
         },
         splitLine: {
-          show: optionsCollapse.isShowSplitLineY,
+          show: optionsSetup.isShowSplitLineY,
           lineStyle: {
-            color: optionsCollapse.splitLineColorY
+            color: optionsSetup.splitLineColorY
           }
         }
       };
@@ -200,71 +200,80 @@ export default {
     },
     // 数值设定 or 柱体设置
     setOptionsTop() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-
-      for (const key in series) {
-        if (series[key].type == "bar") {
-          series[key].label = {
-            show: optionsCollapse.isShow,
+      if (series[0].type == "bar") {
+        if (optionsSetup.verticalShow) {
+          series[0].label = {
+            show: optionsSetup.isShow,
+            position: 'right',
+            distance: optionsSetup.distance,
+            textStyle: {
+              fontSize: optionsSetup.fontSize,
+              color: optionsSetup.subTextColor,
+              fontWeight: optionsSetup.fontWeight
+            }
+          }
+        } else {
+          series[0].label = {
+            show: optionsSetup.isShow,
             position: "top",
-            distance: 10,
-            fontSize: optionsCollapse.fontSize,
-            color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight
-          };
-          series[key].barWidth = optionsCollapse.maxWidth;
-          series[key].barMinHeight = optionsCollapse.minHeight;
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight
+          }
         }
       }
-      this.options.series = series;
+      series[0].barWidth = optionsSetup.maxWidth;
+      series[0].barMinHeight = optionsSetup.minHeight;
     },
     // tooltip 设置
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
         show: true,
         textStyle: {
-          color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipFontSize
         }
       };
       this.options.tooltip = tooltip;
     },
     // 边距设置
     setOptionsMargin() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const grid = {
-        left: optionsCollapse.marginLeft,
-        right: optionsCollapse.marginRight,
-        bottom: optionsCollapse.marginBottom,
-        top: optionsCollapse.marginTop,
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
         containLabel: true
       };
       this.options.grid = grid;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = 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.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
       legend.bottom =
-        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
-      legend.orient = optionsCollapse.layoutFront;
+        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
-        color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.fontSize
       };
-      legend.itemWidth = optionsCollapse.lengedWidth;
+      legend.itemWidth = optionsSetup.lengedWidth;
     },
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup;
-      const customColor = optionsCollapse.customColor;
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
       if (!customColor) return;
       const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
@@ -275,7 +284,7 @@ export default {
           color: params => {
             return arrColor[params.dataIndex];
           },
-          barBorderRadius: optionsCollapse.radius
+          barBorderRadius: optionsSetup.radius
         }
       };
       for (const key in this.options.series) {
@@ -292,10 +301,10 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-            optionsData.dynamicData,
-            optionsData.refreshTime,
-            optionsSetup
-          );
+        optionsData.dynamicData,
+        optionsData.refreshTime,
+        optionsSetup
+        );
     },
     // 静态数据
     staticDataFn(val, optionsSetup) {
@@ -314,10 +323,8 @@ export default {
       }
       // 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[0].type == "bar") {
+        series[0].data = staticData.series[0].data;
       }
     },
     // 动态数据
@@ -351,7 +358,6 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
-
       // series
       const series = this.options.series;
       for (const i in series) {
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
index 38ea4f25..a45bb19a 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 
@@ -261,7 +261,7 @@ export default {
       ];
       this.options.yAxis = yAxis;
     },
-    // 折线设置
+    // 折线设置 数值设置
     setOptionsTop() {
       const optionsCollapse = this.optionsSetup;
       const series = this.options.series;
@@ -284,29 +284,30 @@ export default {
           };
           series[key].itemStyle.borderRadius = optionsCollapse.radius;
           series[key].label = {
-            show: optionsCollapse.isShow,
+            show: optionsCollapse.isShowLine,
             position: "top",
-            distance: 10,
-            fontSize: optionsCollapse.fontSize,
-            color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight
+            distance: optionsCollapse.distanceLine,
+            fontSize: optionsCollapse.fontSizeLine,
+            color: optionsCollapse.subTextColorLine,
+            fontWeight: optionsCollapse.fontWeightLine
           };
         }
       }
       this.options.series = series;
     },
+    // 柱体设置 数值设置
     setOptionsBar() {
       const optionsCollapse = this.optionsSetup;
       const series = this.options.series;
       for (const key in series) {
         if (series[key].type == "bar") {
           series[key].label = {
-            show: optionsCollapse.isShow,
+            show: optionsCollapse.isShowBar,
             position: "top",
-            distance: 10,
-            fontSize: optionsCollapse.fontSize,
-            color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight
+            distance: optionsCollapse.distanceBar,
+            fontSize: optionsCollapse.fontSizeBar,
+            color: optionsCollapse.subTextColorBar,
+            fontWeight: optionsCollapse.fontWeightBar
           };
           series[key].barWidth = optionsCollapse.maxWidth;
           series[key].barMinHeight = optionsCollapse.minHeight;
@@ -323,7 +324,7 @@ export default {
         show: true,
         textStyle: {
           color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize
+          fontSize: optionsCollapse.tipFontSize
         }
       };
       this.options.tooltip = tooltip;