feat--柱状堆叠图优化

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

@@ -71,6 +71,75 @@ export const widgetBarStack = {
               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,
+            },
           ],
         },
         {
@@ -419,14 +488,6 @@ export const widgetBarStack = {
               placeholder: '',
               value: '100',
             },
-            {
-              type: 'el-switch',
-              label: '阴影显示',
-              name: 'isShowBackground',
-              require: false,
-              placeholder: '',
-              value: true,
-            },
             {
               type: 'el-input-text',
               label: '坐标名',

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

@@ -367,7 +367,6 @@ export default {
         }
         series.push({
           name: yAxisList[i],
-          showBackground: optionsSetup.isShowBackground,
           type: "bar",
           data: data,
           barGap: "0%",
@@ -389,9 +388,21 @@ export default {
               barBorderRadius: optionsSetup.radius,
             },
           },
+          //柱体背景属性
+          showBackground: optionsSetup.isShowBackground,
+          backgroundStyle: {
+            color: optionsSetup.backgroundStyleColor,
+            borderColor: optionsSetup.backgroundStyleBorderColor,
+            borderWidth: optionsSetup.backgroundStyleBorderWidth,
+            borderType: optionsSetup.backgroundStyleBorderType,
+            shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+            shadowColor: optionsSetup.backgroundStyleShadowColor,
+            opacity: optionsSetup.backgroundStyleOpacity / 100,
+          }
         });
         legendName.push(yAxisList[i]);
       }
+      console.log(series)
       this.options.series = series;
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];
@@ -471,6 +482,17 @@ export default {
                 barBorderRadius: optionsSetup.radius,
               },
             },
+            //柱体背景属性
+            showBackground: optionsSetup.isShowBackground,
+            backgroundStyle: {
+              color: optionsSetup.backgroundStyleColor,
+              borderColor: optionsSetup.backgroundStyleBorderColor,
+              borderWidth: optionsSetup.backgroundStyleBorderWidth,
+              borderType: optionsSetup.backgroundStyleBorderType,
+              shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+              shadowColor: optionsSetup.backgroundStyleShadowColor,
+              opacity: optionsSetup.backgroundStyleOpacity / 100,
+            }
           });
         }
         legendName.push(val.series[i].name);