修改评价进度统计图的图表交互

src/baseComponents/MultipleBarCharts.vue

@@ -27,6 +27,9 @@ import * as echarts from 'echarts';
           return [];
         }
       },//x轴数据
+      xAxisLabelFormatter:{
+        type:Function,
+      }, //x轴标签格式（传参为 xAxis的value）
       datay:{
         type:Array,
         default:()=>[]
@@ -374,7 +377,7 @@ import * as echarts from 'echarts';
                             interval: 0, // 确保所有刻度标签都显示
                             fontWeight: 400,
                             rotate: singleSeriesWidth < 80 ? 45 : 0,
-                            formatter:function(value) {
+                            formatter:this.xAxisLabelFormatter ? this.xAxisLabelFormatter : function(value) {
                                 // console.log(value)
                                 
                                 // 文字大小设置为14px  按14算
@@ -450,7 +453,7 @@ import * as echarts from 'echarts';
                 },
                 series: [
                     {
-                        name: '阅卷进度',
+                        name: '',
                         type: 'bar',
                         // showBackground: true,
                         

src/components/ReviewManagementDetailSideBar.vue

@@ -189,10 +189,12 @@ const HandleChangeStep=(currentStep)=>{
       // 已经生成评价码，跳转到评价码生成页面
       router.push(`generateReviewCode?id=${route.query.id}`)
     }else{
-      router.push(`${currentStep.route}?id=${route.query.id}`)
+      let url = `${currentStep.route}?id=${route.query.id}`
+      router.push(url)
     }
   }else{
-    router.push(`${currentStep.route}?id=${route.query.id}`)
+    let url = `${currentStep.route}?id=${route.query.id}`
+    router.push(url)
   }
 }
 

src/views/reviewManagement/stepComponent/evaluationProgressComponent/EvaluationProgressComponent.vue

@@ -59,7 +59,7 @@ const isOpenReviewTask = computed(()=>{
 })  //评价状态 开启或关闭
 
 
-const defautTabKey = ref('reviewAccountTableData')
+const defautTabKey = ref('reviewProcessBarData')
 const HandleTabChange = (val)=>{
     defautTabKey.value = val
 }

src/views/reviewManagement/stepComponent/evaluationProgressComponent/ReviewProcessBarData.vue

@@ -3,9 +3,13 @@
     <div>
         <div class="bar_container">
             <div class="bar_title">年级评价进度</div>
-            <MultipleBarCharts :datax="gradeReviewBarData?.datax" :height="375" unit="人"
-                :datay="gradeReviewBarData?.datay" :tooltipFormater="tooltipFormater"
-                @HandleChartClick="HandleChartClick" :isClick="true" />
+            <MultipleBarCharts ref="barChartDom1"  :height="375" unit="人"
+                :datax="gradeReviewBarData?.datax" 
+                :datay="gradeReviewBarData?.datay" 
+                :isClick="true"
+                :tooltipFormater="tooltipFormater"
+                :xAxisLabelFormatter="xAxisLabelFormatter(barChartDom1)"
+                @HandleChartClick="HandleChartClick" />
         </div>
 
         <div class="page_jg_20"></div>
@@ -13,10 +17,13 @@
         <div class="bar_container">
             <div class="bar_title">
                 <span class="parent_title">年级评价进度 / </span>
-                <span>{{currentClickGrade}}</span>
+                <span>{{currentClickGrade.split('-')[0]}}</span>
             </div>
-            <MultipleBarCharts :datax="classReviewAccountData?.datax" :height="375" unit="人"
-                :datay="classReviewAccountData?.datay" :tooltipFormater="tooltipFormater" />
+            <MultipleBarCharts ref="barChartDom2" :height="375" unit="人"
+                :datax="classReviewAccountData?.datax" 
+                :datay="classReviewAccountData?.datay" 
+                :tooltipFormater="tooltipFormater"
+                :xAxisLabelFormatter="xAxisLabelFormatter(barChartDom2)"/>
         </div>
     </div>
 </template>
@@ -40,6 +47,8 @@ const gradeReviewBarData = reactive({
 })
 const classReviewBarData = reactive<Record<string,any>>({})
 
+const barChartDom1 = ref()
+const barChartDom2 = ref()
 
 // 班级评价数据
 // 班级评价进度柱状图
@@ -51,7 +60,35 @@ const classReviewAccountData = computed(()=>{
 
 const tooltipFormater = (params)=>{
     const {name,seriesName,value,marker} = params
-    return name + '<br/>' + marker + '评价进度' + `<span style=\"margin-left:10px;\">${value}</span>` ;
+    return `<span style=\"font-weight:600;color:#333;\">${name.split('-')[0]}</span>`  + '<br/>'  + '完成人数:' + `<span style=\"margin-left:10px;\">${value}</span>` ;
+}
+
+const xAxisLabelFormatter =(dom)=> (labelValue)=>{
+    // 图表宽度
+    let totalWidth = dom.clientWidth;
+    //计算每个柱的宽度 （图表宽度-左右边距）/ x轴数据长度
+    let singleSeriesWidth = Math.ceil((totalWidth - 140) / gradeReviewBarData.datax.length);
+    let value =  labelValue.split('-')[0]
+
+    // 文字大小设置为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;
+            }
+        } else {
+            let maxLength = Math.floor(singleSeriesWidth / 14) - 1;
+            return value.slice(0, maxLength) + '...';
+        }
+    } else {
+        return value;
+    }
 }
 
 // 处理柱状图的点击
@@ -89,6 +126,10 @@ const GetReviewProcessBarData = async ()=>{
 
 onMounted( async()=>{
     await GetReviewProcessBarData()
+    if(!currentClickGrade.value){
+        currentClickGrade.value = gradeReviewBarData.datax?.[0]
+
+    }
 })
 
 </script>