From ae1ecbfb78a4343fd500e1438ba6c6a7428ee346 Mon Sep 17 00:00:00 2001
From: qianming <isqianming@163.com>
Date: Wed, 1 Nov 2023 15:57:03 +0800
Subject: [PATCH] =?UTF-8?q?feat--=E6=9F=B1=E7=8A=B6=E5=9B=BEX=E8=BD=B4?=
 =?UTF-8?q?=E6=95=B0=E5=80=BC=E6=98=BE=E7=A4=BA=E8=87=AA=E5=8A=A8=E6=8D=A2?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../designer/widget/bar/widgetBarchart.vue    | 60 +++++++++++++++----
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
index 44873163..2b052395 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
@@ -151,18 +151,6 @@ 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: {
@@ -406,6 +394,30 @@ export default {
           series[i].data = data;
         }
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const wordNum = parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % wordNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
@@ -502,6 +514,30 @@ export default {
           series.push(obj);
         }
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const wordNum = parseInt((this.optionsStyle.width / val.xAxis.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % wordNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.series = series;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);