feat--柱状图增加配置项

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js

@@ -51,6 +51,75 @@ export const widgetBarCompare = {
               placeholder: '',
               value: 5,
             },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -274,6 +343,14 @@ export const widgetBarCompare = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxXLeft',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -395,6 +472,14 @@ export const widgetBarCompare = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxXRight',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js

@@ -52,6 +52,75 @@ export const widgetBarDoubleYaxis = {
               placeholder: '',
               value: 0,
             },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -392,6 +461,14 @@ export const widgetBarDoubleYaxis = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxYLeft',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',
@@ -517,6 +594,14 @@ export const widgetBarDoubleYaxis = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxYRight',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js

@@ -486,7 +486,7 @@ export const widgetBarStack = {
               name: 'maxY',
               required: false,
               placeholder: '',
-              value: '100',
+              value: '',
             },
             {
               type: 'el-input-text',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js

@@ -79,6 +79,75 @@ export const widgetBarchart = {
               ],
               value: 'leftRight'
             },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -419,6 +488,14 @@ export const widgetBarchart = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxY',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js

@@ -59,6 +59,75 @@ export const widgetGradientBarchart = {
               placeholder: '',
               value: 5,
             },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'solid', name: '实线'},
+                {code: 'dashed', name: '虚线'},
+                {code: 'dotted', name: '斑点'},
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -103,10 +172,10 @@ export const widgetGradientBarchart = {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'bold', name: '粗体' },
-                { code: 'bolder', name: '特粗体' },
-                { code: 'lighter', name: '细体' }
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
               ],
               value: 'normal'
             },
@@ -117,9 +186,9 @@ export const widgetGradientBarchart = {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'italic', name: 'italic斜体' },
-                { code: 'oblique', name: 'oblique斜体' },
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
               ],
               value: 'normal'
             },
@@ -130,9 +199,9 @@ export const widgetGradientBarchart = {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'center', name: '居中' },
-                { code: 'left', name: '左对齐' },
-                { code: 'right', name: '右对齐' },
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
               ],
               value: 'center'
             },
@@ -167,10 +236,10 @@ export const widgetGradientBarchart = {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'bold', name: '粗体' },
-                { code: 'bolder', name: '特粗体' },
-                { code: 'lighter', name: '细体' }
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
               ],
               value: 'normal'
             },
@@ -181,9 +250,9 @@ export const widgetGradientBarchart = {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'italic', name: 'italic斜体' },
-                { code: 'oblique', name: 'oblique斜体' },
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
               ],
               value: 'normal'
             },
@@ -317,6 +386,14 @@ export const widgetGradientBarchart = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxY',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',
@@ -465,10 +542,10 @@ export const widgetGradientBarchart = {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'bold', name: '粗体' },
-                { code: 'bolder', name: '特粗体' },
-                { code: 'lighter', name: '细体' }
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
               ],
               value: 'normal'
             },
@@ -618,11 +695,11 @@ export const widgetGradientBarchart = {
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
         value: [
-          { "axis": "苹果", "data": 1000 },
-          { "axis": "三星", "data": 2229 },
-          { "axis": "小米", "data": 3879 },
-          { "axis": "oppo", "data": 2379 },
-          { "axis": "vivo", "data": 4079 },
+          {"axis": "苹果", "data": 1000},
+          {"axis": "三星", "data": 2229},
+          {"axis": "小米", "data": 3879},
+          {"axis": "oppo", "data": 2379},
+          {"axis": "vivo", "data": 4079},
         ],
       },
       {

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

@@ -324,6 +324,7 @@ export default {
     setOptionsXLeft() {
       const optionsSetup = this.optionsSetup;
       const xAxisLeft = {
+        max: optionsSetup.maxXLeft !== "" ? optionsSetup.maxXLeft : null,
         splitNumber: optionsSetup.splitNumberLeft,
         type: "value",
         show: optionsSetup.hideXLeft,
@@ -363,6 +364,7 @@ export default {
     setOptionsXRight() {
       const optionsSetup = this.optionsSetup;
       const xAxisRight = {
+        max: optionsSetup.maxXRight !== "" ? optionsSetup.maxXRight : null,
         gridIndex: 2,
         splitNumber: optionsSetup.splitNumberRight,
         show: optionsSetup.hideXRight,
@@ -426,39 +428,48 @@ export default {
     setOptionsTop() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
+      series[0].label = {
+        normal: {
+          show: optionsSetup.isShow,
+          position: "insideLeft",
+          textStyle: {
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
+          },
+        },
+        emphasis: {
+          show: false,
+        },
+      };
+      series[1].label = {
+        normal: {
+          show: optionsSetup.isShow,
+          color: "red",
+          position: "insideRight",
+          textStyle: {
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
+          },
+        },
+        emphasis: {
+          show: false,
+        },
+      };
       for (const key in series) {
-        if (series[key].type == "bar") {
-          (series[0].label = {
-            normal: {
-              show: optionsSetup.isShow,
-              position: "insideLeft",
-              textStyle: {
-                fontSize: optionsSetup.fontSize,
-                color: optionsSetup.dataColor,
-                fontWeight: optionsSetup.fontWeight,
-              },
-            },
-            emphasis: {
-              show: false,
-            },
-          }),
-            (series[1].label = {
-              normal: {
-                show: optionsSetup.isShow,
-                color: "red",
-                position: "insideRight",
-                textStyle: {
-                  fontSize: optionsSetup.fontSize,
-                  color: optionsSetup.dataColor,
-                  fontWeight: optionsSetup.fontWeight,
-                },
-              },
-              emphasis: {
-                show: false,
-              },
-            }),
-            (series[key].barWidth = optionsSetup.maxWidth);
-        }
+        series[key].barWidth = optionsSetup.maxWidth;
+        //柱体背景属性
+        series[key].showBackground = optionsSetup.isShowBackground;
+        series[key].backgroundStyle = {
+          color: optionsSetup.backgroundStyleColor,
+          borderColor: optionsSetup.backgroundStyleBorderColor,
+          borderWidth: optionsSetup.backgroundStyleBorderWidth,
+          borderType: optionsSetup.backgroundStyleBorderType,
+          shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+          shadowColor: optionsSetup.backgroundStyleShadowColor,
+          opacity: optionsSetup.backgroundStyleOpacity / 100,
+        };
       }
       this.options.series = series;
     },

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

@@ -219,6 +219,7 @@ export default {
       const optionsSetup = this.optionsSetup;
       const yAxis = [
         {
+          max: optionsSetup.maxYLeft !== "" ? optionsSetup.maxYLeft : null,
           type: "value",
           // 均分
           splitNumber: optionsSetup.splitNumberLeft,
@@ -261,6 +262,7 @@ export default {
           },
         },
         {
+          max: optionsSetup.maxYRight !== "" ? optionsSetup.maxYRight : null,
           type: "value",
           // 均分
           splitNumber: optionsSetup.splitNumberRight,
@@ -322,6 +324,17 @@ export default {
           series[key].barWidth = optionsSetup.maxWidth;
           series[key].barMinHeight = optionsSetup.minHeight;
           series[key].itemStyle.barBorderRadius = optionsSetup.radius;
+          //柱体背景属性
+          series[key].showBackground = optionsSetup.isShowBackground;
+          series[key].backgroundStyle = {
+            color: optionsSetup.backgroundStyleColor,
+            borderColor: optionsSetup.backgroundStyleBorderColor,
+            borderWidth: optionsSetup.backgroundStyleBorderWidth,
+            borderType: optionsSetup.backgroundStyleBorderType,
+            shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+            shadowColor: optionsSetup.backgroundStyleShadowColor,
+            opacity: optionsSetup.backgroundStyleOpacity / 100,
+          };
         }
       }
       this.options.series = series;

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

@@ -173,20 +173,11 @@ export default {
       };
       this.options.xAxis = xAxis;
     },
-    //判断有无yAxis max，无返回null
-    getOptionsYMax() {
-      const optionsSetup = this.optionsSetup;
-      let max = null;
-      if (optionsSetup.maxY !== "") {
-        max = optionsSetup.maxY
-      }
-      return max
-    },
     // Y轴设置
     setOptionsY() {
       const optionsSetup = this.optionsSetup;
       const yAxis = {
-        max: this.getOptionsYMax(),
+        max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
         type: "value",
         scale: optionsSetup.scale,
         // 均分
@@ -402,7 +393,6 @@ export default {
         });
         legendName.push(yAxisList[i]);
       }
-      console.log(series)
       this.options.series = series;
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];

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

@@ -184,6 +184,7 @@ export default {
     setOptionsY() {
       const optionsSetup = this.optionsSetup;
       const yAxis = {
+        max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
         type: "value",
         scale: optionsSetup.scale,
         // 均分
@@ -391,6 +392,17 @@ export default {
               },
             };
           }
+          //柱体背景属性
+          series[i].showBackground = optionsSetup.isShowBackground;
+          series[i].backgroundStyle = {
+            color: optionsSetup.backgroundStyleColor,
+            borderColor: optionsSetup.backgroundStyleBorderColor,
+            borderWidth: optionsSetup.backgroundStyleBorderWidth,
+            borderType: optionsSetup.backgroundStyleBorderType,
+            shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+            shadowColor: optionsSetup.backgroundStyleShadowColor,
+            opacity: optionsSetup.backgroundStyleOpacity / 100,
+          };
           series[i].data = data;
         }
       }
@@ -475,6 +487,17 @@ export default {
               },
             };
           }
+          //柱体背景属性
+          obj.showBackground = optionsSetup.isShowBackground;
+          obj.backgroundStyle = {
+            color: optionsSetup.backgroundStyleColor,
+            borderColor: optionsSetup.backgroundStyleBorderColor,
+            borderWidth: optionsSetup.backgroundStyleBorderWidth,
+            borderType: optionsSetup.backgroundStyleBorderType,
+            shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+            shadowColor: optionsSetup.backgroundStyleShadowColor,
+            opacity: optionsSetup.backgroundStyleOpacity / 100,
+          }
           obj.data = val.series[i].data;
           series.push(obj);
         }

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart"  :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -10,6 +10,7 @@ import {
   targetWidgetLinkageLogic,
 } from "@/views/bigscreenDesigner/designer/linkageLogic";
 import echarts from "echarts";
+
 export default {
   name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
   components: {},
@@ -260,6 +261,7 @@ export default {
     setOptionsY() {
       const optionsSetup = this.optionsSetup;
       const yAxis = {
+        max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
         type: "value",
         scale: optionsSetup.scale,
         // 均分
@@ -328,6 +330,17 @@ export default {
           };
         }
         series[0].barWidth = optionsSetup.maxWidth;
+        //柱体背景属性
+        series[0].showBackground = optionsSetup.isShowBackground;
+        series[0].backgroundStyle = {
+          color: optionsSetup.backgroundStyleColor,
+          borderColor: optionsSetup.backgroundStyleBorderColor,
+          borderWidth: optionsSetup.backgroundStyleBorderWidth,
+          borderType: optionsSetup.backgroundStyleBorderType,
+          shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+          shadowColor: optionsSetup.backgroundStyleShadowColor,
+          opacity: optionsSetup.backgroundStyleOpacity / 100,
+        };
       }
     },
     // tooltip 提示语设置