修改：教辅作业查看分析柱状图和题型显示问题。

src/views/analysisReport/components/dCharts/barChart.vue

@@ -141,6 +141,16 @@ import * as echarts from 'echarts';
       rotateXLabel:{
         type:Boolean,
         default:true
+      },
+      // 类目超出可视宽度时开启横向滑动，默认关闭，避免影响分析报告
+      scrollable:{
+        type:Boolean,
+        default:false
+      },
+      // x 轴名称按类目宽度换行，完整显示且不重叠
+      wrapXLabel:{
+        type:Boolean,
+        default:false
       }
     },
     watch:{
@@ -258,9 +268,15 @@ import * as echarts from 'echarts';
             // console.log("打印正确答案的",rightAnswerValue);
             // console.log("打印满分",fullMark);
 
-            const barMinWidth = 30; // 最小柱子宽度 加上两边间距的宽度
-            const dataZoomNum = Math.floor((totalWidth - 140) / (barMinWidth * 1));// 当前区域内可显示的柱子的数量
-            const dataZoomEnd = Math.floor((100 / this.datax.length) * dataZoomNum); // 当前区域内可显示柱子的占比
+            // 换行时加大类目宽度，避免名称挤成很多行
+            const barMinWidth = this.scrollable ? (this.wrapXLabel ? 140 : 72) : 30;
+            const dataZoomNum = Math.max(1, Math.floor((totalWidth - 140) / barMinWidth));// 当前区域内可显示的柱子的数量
+            const dataZoomEnd = Math.min(100, Math.floor((100 / this.datax.length) * dataZoomNum)); // 当前区域内可显示柱子的占比
+            const needZoom = this.showDataZoom && this.datax.length > 0 && singleSeriesWidth < barMinWidth;
+            const visibleCount = needZoom ? Math.min(this.datax.length, dataZoomNum) : Math.max(this.datax.length, 1);
+            const labelWidth = Math.max(56, Math.floor(Math.max(totalWidth - 48, 40) / visibleCount) - 12);
+            const axisFontSize = Number(this.fontSize) || 14;
+            const charsPerLine = Math.max(4, Math.floor(labelWidth / axisFontSize));
             let dataZoom = {
                 start: 0, //默认为0
                 end: dataZoomEnd, //  默认为100（重点）
@@ -273,20 +289,25 @@ import * as echarts from 'echarts';
                 height: 8, //组件高度
                 left: 20, //左边的距离
                 right: 20, //右边的距离
-                bottom: 0, //右边的距离
-                fillerColor: 'transparent',// 滑动条选中区域颜色
+                bottom: this.scrollable ? 4 : 0, //右边的距离
+                fillerColor: this.scrollable ? 'rgba(46,100,250,0.35)' : 'transparent',// 滑动条选中区域颜色
                 zoomLock: true,//是否锁定选择区域（或叫做数据窗口）的大小。
                 handleSize: '0',
                 handleStyle: {
                     color: '#b8b8b8',// 滑动条手柄颜色
                     borderWidth: 2
                 },
-                backgroundColor: 'transparent', //两边未选中的滑动条区域的颜色
+                backgroundColor: this.scrollable ? '#F2F3F5' : 'transparent', //两边未选中的滑动条区域的颜色
                 showDataShadow: false, //是否显示数据阴影 默认auto
                 showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                 filterMode: 'filter'
 
             };//设置滚动条的样式
+            const dataZoomOption = needZoom
+              ? (this.scrollable
+                ? [dataZoom, { type: 'inside', xAxisIndex: 0, start: 0, end: dataZoomEnd, zoomLock: true }]
+                : dataZoom)
+              : null;
           //网格线设置隔行背景色
             let option= {
                 tooltip: {
@@ -345,10 +366,10 @@ import * as echarts from 'echarts';
                     left: this.gridLeft,
                     right: this.gridRight,
                     top: this.gridTop,
-                    bottom: 0,
+                    bottom: needZoom && this.scrollable ? 24 : 0,
                     containLabel: true, //用于控制网格区域是否包含坐标轴的标签  true 可以确保所有标签都能完整显示，不会被裁剪。
                 },
-                dataZoom: this.showDataZoom?(singleSeriesWidth < barMinWidth ? dataZoom : null):null,
+                dataZoom: dataZoomOption,
                 xAxis: [
                     {
                         type: 'category',
@@ -357,21 +378,32 @@ import * as echarts from 'echarts';
                         axisPointer: {
                             type: 'shadow'
                         },
-                        axisLabel: {
+                        axisLabel: this.wrapXLabel ? {
+                            interval: 0,
+                            hideOverlap: false,
+                            fontWeight: 400,
+                            rotate: 0,
+                            lineHeight: 16,
+                            color: this.fontColor || '#666666',
+                            fontSize: axisFontSize,
+                            formatter: function (value) {
+                                const text = value == null ? '' : String(value);
+                                if (text.length <= charsPerLine) return text;
+                                const first = text.slice(0, charsPerLine);
+                                const rest = text.slice(charsPerLine);
+                                if (rest.length <= charsPerLine) return first + '\n' + rest;
+                                const keep = Math.max(1, charsPerLine - 3);
+                                return first + '\n' + rest.slice(0, keep) + '...';
+                            },
+                        } : {
                             interval: 0, // 确保所有刻度标签都显示
                             fontWeight: 400,
                             rotate: this.rotateXLabel && singleSeriesWidth < 80 ? 45 : 0,
                             formatter:function(value) {
-                                // console.log(value)
-                                
-                                // 文字大小设置为14px  按14算
                                 const valueWidth = value.length * 14;
-                                // console.log("文字宽度",valueWidth);
-                                // console.log("单系列宽度",singleSeriesWidth);
                                 if(valueWidth > singleSeriesWidth) {
                                     if (singleSeriesWidth < 100) {
                                         if(valueWidth > 80) {
-                                            // let maxLength = Math.floor(80 / 14) - 1;
                                             return value.slice(0, 2) + '...' + value.slice(-3)
                                         } else {
                                             return value;
@@ -384,24 +416,8 @@ import * as echarts from 'echarts';
                                     return value;
                                 }
                             },
-                            color: this.fontColor || '#666666',//y轴文字颜色
-                            // width: 80, // 控制每个标签最大宽度，超出则截断
-                            // overflow: 'truncate', // 超出宽度显示省略号
-                            // ellipsis: '...', // 自定义省略符号
-                            // margin: 20,
+                            color: this.fontColor || '#666666',
                             fontSize: this.fontSize?this.fontSize:14,
-                            // rich: {
-                            //     // 定义省略样式（可选）
-                            //     text: {
-                            //         whiteSpace: 'nowrap',
-                            //         overflow: 'hidden',
-                            //         textOverflow: 'ellipsis',
-                            //         display: 'inline-block',
-                            //         width: 80, // 与上面 width 一致
-                            //         fontSize:14,
-                            //     },
-                            // },
-                            // formatter: '{text|{value}}' + this.unitX, // 使用 rich 样式渲染
                         }
                        
                     }

src/views/teachingHomework/homeworkTask/analysis.vue

@@ -65,6 +65,8 @@
               :gridLeft="0"
               :gridRight="0"
               :rotateXLabel="false"
+              :scrollable="true"
+              :wrapXLabel="true"
               :isClick="true"
               @HandleChartClick="onQuestionBarClick" />
             <RadarCharts
@@ -321,7 +323,9 @@
               unit="%"
               :gridLeft="0"
               :gridRight="0"
-              :rotateXLabel="false" />
+              :rotateXLabel="false"
+              :scrollable="true"
+              :wrapXLabel="true" />
             <RadarCharts
               v-else
               :data="knowledgeRadarData"
@@ -503,7 +507,7 @@ function mapQuestionRow(item, index) {
     id: item.questionId || item.id || index,
     name: item.questionName || '-',
     type: toNumber(item.questionType),
-    typeName: QUESTION_TYPE_MAP[item.questionType] || '',
+    typeName: item.questionTypeName || QUESTION_TYPE_MAP[item.questionType] || QUESTION_TYPE_MAP[item.questionTypeId] || '',
     knowledgeTags: mapKnowledgeList(item.knowledgeList, item.knowledge),
     title: item.title || '',
     answer: item.answer || '',
@@ -633,8 +637,9 @@ export default {
       if (this.hasHtmlContent(q.answer) || this.hasHtmlContent(q.parse)) return true;
       return q.subQuestions.some(sub => this.hasHtmlContent(sub.answer) || this.hasHtmlContent(sub.parse));
     },
+    // 知识点分析图展示全部知识点
     chartKnowledge() {
-      return this.knowledgeRows.slice(0, 8);
+      return this.knowledgeRows;
     },
     selectedQuestion() {
       return this.chartQuestions[this.selectedIndex] || null;