bugfix--柱状图竖展示异常

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

@@ -403,6 +403,14 @@ export const widgetBarStack = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-switch',
+              label: '数值自动换行',
+              name: 'textRowsBreakAuto',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
             {
               type: 'el-input-text',
               label: '数值行数',

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

@@ -411,6 +411,14 @@ export const widgetBarchart = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-switch',
+              label: '数值自动换行',
+              name: 'textRowsBreakAuto',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
             {
               type: 'el-input-text',
               label: '数值行数',

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

@@ -309,6 +309,14 @@ export const widgetGradientBarchart = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-switch',
+              label: '数值自动换行',
+              name: 'textRowsBreakAuto',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
             {
               type: 'el-input-text',
               label: '数值行数',

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

@@ -144,6 +144,17 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
+        axisLabel: {
+          show: true,
+          interval: optionsSetup.textInterval,
+          // 文字角度
+          rotate: optionsSetup.textAngleX,
+          textStyle: {
+            // 坐标文字颜色
+            color: optionsSetup.colorX,
+            fontSize: optionsSetup.fontSizeX,
+          },
+        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -382,17 +393,6 @@ export default {
         legendName.push(yAxisList[i]);
       }
       this.options.series = series;
-      if (optionsSetup.verticalShow) {
-        this.options.xAxis.data = [];
-        this.options.yAxis.data = xAxisList;
-        this.options.xAxis.type = "value";
-        this.options.yAxis.type = "category";
-      } else {
-        this.options.xAxis.data = xAxisList;
-        this.options.yAxis.data = [];
-        this.options.xAxis.type = "category";
-        this.options.yAxis.type = "value";
-      }
       // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
       const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
       const axisLabel = {
@@ -416,7 +416,20 @@ export default {
           return str
         }
       }
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = xAxisList;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = xAxisList;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+        if (optionsSetup.textRowsBreakAuto) {
           this.options.xAxis.axisLabel = axisLabel;
+        }
+      }
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
@@ -445,18 +458,6 @@ export default {
       for (let i = 0; i < customColor.length; i++) {
         arrColor.push(customColor[i].color);
       }
-      // x轴
-      if (optionsSetup.verticalShow) {
-        this.options.xAxis.data = [];
-        this.options.yAxis.data = val.xAxis;
-        this.options.xAxis.type = "value";
-        this.options.yAxis.type = "category";
-      } else {
-        this.options.xAxis.data = val.xAxis;
-        this.options.yAxis.data = [];
-        this.options.xAxis.type = "category";
-        this.options.yAxis.type = "value";
-      }
       const series = [];
       const legendName = [];
       for (const i in val.series) {
@@ -523,7 +524,21 @@ export default {
           return str
         }
       }
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = val.xAxis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = val.xAxis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+        if (optionsSetup.textRowsBreakAuto) {
           this.options.xAxis.axisLabel = axisLabel;
+        }
+      }
       this.options.series = series;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);

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

@@ -151,7 +151,7 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel : {
+        axisLabel: {
           show: true,
           interval: optionsSetup.textInterval,
           // 文字角度
@@ -427,8 +427,10 @@ export default {
         this.options.yAxis.data = [];
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
+        if (optionsSetup.textRowsBreakAuto) {
           this.options.xAxis.axisLabel = axisLabel;
         }
+      }
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
@@ -548,8 +550,10 @@ export default {
         this.options.yAxis.data = [];
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
+        if (optionsSetup.textRowsBreakAuto) {
           this.options.xAxis.axisLabel = axisLabel;
         }
+      }
       this.options.series = series;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);

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

@@ -227,6 +227,17 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
+        axisLabel: {
+          show: true,
+          interval: optionsSetup.textInterval,
+          // 文字角度
+          rotate: optionsSetup.textAngleX,
+          textStyle: {
+            // 坐标文字颜色
+            color: optionsSetup.colorX,
+            fontSize: optionsSetup.fontSizeX,
+          },
+        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -429,21 +440,6 @@ export default {
         axis[i] = val[i].axis;
         data[i] = val[i].data;
       }
-      // x轴
-      if (optionsSetup.verticalShow) {
-        this.options.xAxis.data = [];
-        this.options.yAxis.data = axis;
-        this.options.xAxis.type = "value";
-        this.options.yAxis.type = "category";
-      } else {
-        this.options.xAxis.data = axis;
-        this.options.yAxis.data = [];
-        this.options.xAxis.type = "category";
-        this.options.yAxis.type = "value";
-      }
-      if (series[0].type == "bar") {
-        series[0].data = data;
-      }
       // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
       const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
       const axisLabel = {
@@ -467,7 +463,24 @@ export default {
           return str
         }
       }
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = axis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = axis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+        if (optionsSetup.textRowsBreakAuto) {
           this.options.xAxis.axisLabel = axisLabel;
+        }
+      }
+      if (series[0].type == "bar") {
+        series[0].data = data;
+      }
     },
     // 动态数据
     dynamicDataFn(refreshTime) {
@@ -491,22 +504,6 @@ export default {
       });
     },
     renderingFn(optionsSetup, val) {
-      // x轴
-      if (optionsSetup.verticalShow) {
-        this.options.xAxis.data = [];
-        this.options.yAxis.data = val.xAxis;
-        this.options.xAxis.type = "value";
-        this.options.yAxis.type = "category";
-      } else {
-        this.options.xAxis.data = val.xAxis;
-        this.options.yAxis.data = [];
-        this.options.xAxis.type = "category";
-        this.options.yAxis.type = "value";
-      }
-      const series = this.options.series;
-      if (series[0].type == "bar") {
-        series[0].data = val.series[0].data;
-      }
       // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
       const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
       const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
@@ -531,7 +528,25 @@ export default {
           return str
         }
       }
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = val.xAxis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = val.xAxis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+        if (optionsSetup.textRowsBreakAuto) {
           this.options.xAxis.axisLabel = axisLabel;
+        }
+      }
+      const series = this.options.series;
+      if (series[0].type == "bar") {
+        series[0].data = val.series[0].data;
+      }
     },
   },
 };