diff --git a/acupuncture-前台/src/views/indexCom/follow.vue b/acupuncture-前台/src/views/indexCom/follow.vue index ad7bc7a6..3b16cc97 100644 --- a/acupuncture-前台/src/views/indexCom/follow.vue +++ b/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"), diff --git a/acupuncture-前台/src/views/indexCom/index.js b/acupuncture-前台/src/views/indexCom/index.js index be75aed5..c784e6a7 100644 --- a/acupuncture-前台/src/views/indexCom/index.js +++ b/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; // 不需要换行时直接返回原值 } }, }, diff --git a/acupuncture-后台/src/views/indexCom/index.js b/acupuncture-后台/src/views/indexCom/index.js index 23c8aa9f..c784e6a7 100644 --- a/acupuncture-后台/src/views/indexCom/index.js +++ b/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%",