失访原因x轴文字显示换行

acupuncture-前台/src/views/indexCom/follow.vue

@@ -156,9 +156,9 @@ export default {
       lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => {
         return item.num;
       });
-      // lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => {
-      //   return item.reason;
-      // });
+      lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => {
+        return item.reason;
+      });
       this.$nextTick(() => {
         var myChart = echarts.init(
           document.getElementById("lossFollow"),

acupuncture-前台/src/views/indexCom/index.js

@@ -914,43 +914,29 @@ export const lossFollowEcharts = {
   },
   xAxis: {
     type: "category",
-    data: [
-      "社交人际",
-      "沟通交流",
-      "心理认知",
-      "游戏玩耍",
-      "大小运动",
-      "生活自理",
-      "执行管控",
-      "知识常识",
-    ],
+    data: [],
     axisLabel: {
-      show: true,
-      textStyle: {
-        color: "#000000",
-        fontSize: "16",
-      },
-    },
-    axisLable: {
       formatter: function (value) {
-        console.log("value", value);
-
         var ret = ""; //拼接加\n返回的类目项
         var max = 10; //每行显示的文字字数
         var val = value.length; //X轴内容的文字字数
         var rowN = Math.ceil(val / max); //需要换的行数
+        // 最后一行不加\n
+        // 根据最大字数限制进行换行处理
         if (rowN > 1) {
-          //判断 如果字数大于2就换行
+          // 如果需要换行
           for (var i = 0; i < rowN; i++) {
-            var temp = ""; //每次截取的字符串
-            var start = i * max; //开始截取的位置
-            var end = start + max; //结束截取的位置
-            temp = value.substring(start, end) + "\n";
-            ret += temp; //最终的字符串
+            // 遍历每行
+            var temp = value.substring(i * max, (i + 1) * max); // 截取当前行内容
+            ret += temp; // 添加到结果字符串
+            if (i < rowN - 1) {
+              // 如果不是最后一行
+              ret += "\n"; // 添加换行符
+            }
           }
           return ret;
         } else {
-          return value;
+          return value; // 不需要换行时直接返回原值
         }
       },
     },

acupuncture-后台/src/views/indexCom/index.js

@@ -915,6 +915,31 @@ export const lossFollowEcharts = {
   xAxis: {
     type: "category",
     data: [],
+    axisLabel: {
+      formatter: function (value) {
+        var ret = ""; //拼接加\n返回的类目项
+        var max = 10; //每行显示的文字字数
+        var val = value.length; //X轴内容的文字字数
+        var rowN = Math.ceil(val / max); //需要换的行数
+        // 最后一行不加\n
+        // 根据最大字数限制进行换行处理
+        if (rowN > 1) {
+          // 如果需要换行
+          for (var i = 0; i < rowN; i++) {
+            // 遍历每行
+            var temp = value.substring(i * max, (i + 1) * max); // 截取当前行内容
+            ret += temp; // 添加到结果字符串
+            if (i < rowN - 1) {
+              // 如果不是最后一行
+              ret += "\n"; // 添加换行符
+            }
+          }
+          return ret;
+        } else {
+          return value; // 不需要换行时直接返回原值
+        }
+      },
+    },
   },
   grid: {
     top: "12%",