柱状对比图功能更新

report-ui/src/views/report/bigscreen/designer/tools.js

@@ -7151,6 +7151,14 @@ const widgetTools = [
                 placeholder: '',
                 value: 14,
               },
+              {
+                type: 'el-switch',
+                label: 'X轴线',
+                name: 'xLineLeft',
+                require: false,
+                placeholder: '',
+                value: false,
+              },
               {
                 type: 'vue-color',
                 label: '轴颜色',
@@ -7161,24 +7169,32 @@ const widgetTools = [
               },
               {
                 type: 'el-switch',
-                label: 'X轴线',
-                name: 'downSplitLineXLeft',
+                label: '竖分割线',
+                name: 'SplitLineLeft',
                 require: false,
                 placeholder: '',
                 value: false,
               },
               {
-                type: 'el-switch',
-                label: '竖分割线',
-                name: 'SplitLineXLeft',
-                require: false,
+                type: 'vue-color',
+                label: '分割线颜色',
+                name: 'SplitLineColorLeft',
+                required: false,
                 placeholder: '',
-                value: false,
+                value: '#fff',
+              },
+              {
+                type: 'el-input-number',
+                label: '分割线宽度',
+                name: 'SplitLinefontSizeLeft',
+                required: false,
+                placeholder: '',
+                value: 1,
               },
               {
                 type: 'el-switch',
                 label: '边框线',
-                name: 'upSplitLineXLeft',
+                name: 'frameLineLeft',
                 require: false,
                 placeholder: '',
                 value: false,
@@ -7191,100 +7207,83 @@ const widgetTools = [
               {
                 type: 'el-switch',
                 label: '显示',
-                name: 'hideX',
+                name: 'hideXRight',
                 required: false,
                 placeholder: '',
                 value: true,
               },
               {
-                type: 'el-input-text',
-                label: 'X轴别名',
-                name: 'xName',
+                type: 'el-input-number',
+                label: '数值间隔',
+                name: 'splitNumberRight',
                 required: false,
                 placeholder: '',
                 value: ''
               },
               {
                 type: 'vue-color',
-                label: '别名颜色',
-                name: 'xNameColor',
+                label: '数值颜色',
+                name: 'XcolorRight',
                 required: false,
                 placeholder: '',
-                value: '#fff'
+                value: '#fff',
               },
               {
                 type: 'el-input-number',
-                label: '别名字号',
-                name: 'xNameFontSize',
+                label: '数值字号',
+                name: 'fontSizeXRight',
                 required: false,
                 placeholder: '',
-                value: 14
+                value: 14,
               },
               {
                 type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalX',
-                required: false,
+                label: 'X轴线',
+                name: 'xLineRight',
+                require: false,
                 placeholder: '',
-                value: false
+                value: false,
               },
               {
-                type: 'el-slider',
-                label: '文字角度',
-                name: 'textAngleX',
+                type: 'vue-color',
+                label: '轴颜色',
+                name: 'lineColorXRight',
                 required: false,
                 placeholder: '',
-                value: 0
+                value: '#fff',
               },
               {
-                type: 'el-input-number',
-                label: '文字间隔',
-                name: 'textInterval',
-                required: false,
+                type: 'el-switch',
+                label: '竖分割线',
+                name: 'SplitLineRight',
+                require: false,
                 placeholder: '',
-                value: ''
+                value: false,
               },
               {
                 type: 'vue-color',
-                label: '文字颜色',
-                name: 'Xcolor',
+                label: '分割线颜色',
+                name: 'SplitLineColorRight',
                 required: false,
                 placeholder: '',
                 value: '#fff',
               },
               {
                 type: 'el-input-number',
-                label: '文字字号',
-                name: 'fontSizeX',
+                label: '分割线宽度',
+                name: 'SplitLinefontSizeRight',
                 required: false,
                 placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
+                value: 1,
               },
               {
                 type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineX',
+                label: '边框线',
+                name: 'frameLineRight',
                 require: false,
                 placeholder: '',
                 value: false,
               },
-              {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-
-              }
             ],
           },
           {

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

@@ -276,6 +276,7 @@ export default {
     editorOptions() {
       this.setOptionsTitle();
       this.setOptionsXLeft();
+      this.setOptionsXRight();
       this.setOptionsTop();
       this.setOptionsTooltip();
       this.setOptionsGrid();
@@ -305,7 +306,10 @@ export default {
         type: 'value',
         inverse: true,
         axisLine: {//X轴线
-          show: false,
+          show: optionsSetup.xLineLeft,
+          lineStyle: {
+            color: optionsSetup.lineColorXLeft,
+          },
         },
         axisTick: {
           show: false,
@@ -314,21 +318,56 @@ export default {
         axisLabel: { // x轴
           show: optionsSetup.hideXLeft,
           textStyle: {
-            color : optionsSetup.lineColorXLeft,
+            color : optionsSetup.XcolorLeft,
             fontSize: optionsSetup.fontSizeXLeft
           }
         },
         splitLine: { // 分割线
-          show: false,
+          show: optionsSetup.SplitLineLeft,
           lineStyle: {
-            color: '#57617f',
-            width: 1,
+            color: optionsSetup.SplitLineColorLeft,
+            width: optionsSetup.SplitLinefontSizeLeft,
             type: 'solid'
           }
         }
       }
       this.options.xAxis[0] = xAxisLeft;
     },
+    // 右X轴设置
+    setOptionsXRight() {
+      const optionsSetup = this.optionsSetup;
+      const xAxisRight = {
+        gridIndex: 2,
+        splitNumber: optionsSetup.splitNumberRight,
+        type: 'value',
+        axisLine: {//X轴线
+          show: optionsSetup.xLineRight,
+          lineStyle: {
+            color: optionsSetup.lineColorXRight,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        position: 'bottom',
+        axisLabel: { // x轴
+          show: optionsSetup.hideXRight,
+          textStyle: {
+            color : optionsSetup.XcolorRight,
+            fontSize: optionsSetup.fontSizeXRight
+          }
+        },
+        splitLine: { // 分割线
+          show: optionsSetup.SplitLineRight,
+          lineStyle: {
+            color: optionsSetup.SplitLineColorRight,
+            width: optionsSetup.SplitLinefontSizeRight,
+            type: 'solid'
+          }
+        }
+      }
+      this.options.xAxis[2] = xAxisRight;
+    },
     // 数值设定、柱体设置
     setOptionsTop() {
       const optionsSetup = this.optionsSetup;
@@ -388,7 +427,7 @@ export default {
       const optionsSetup = this.optionsSetup;
       const grid = [
         {//左
-          show: false,
+          show: optionsSetup.frameLineLeft,
           left: optionsSetup.marginLeftRight,
           top: optionsSetup.marginTop,
           bottom: optionsSetup.marginBottom,
@@ -403,7 +442,7 @@ export default {
           width: '0%'
         },
         {//右
-          show: false,
+          show: optionsSetup.frameLineRight,
           right: optionsSetup.marginLeftRight,
           top: optionsSetup.marginTop,
           bottom: optionsSetup.marginBottom,