运营数据概览选择逻辑

src/views/report/Operational.vue

@@ -144,6 +144,9 @@
               />
             </div>
           </div>
+          <div class="leftItem">
+            <a-checkbox-group style="margin-left:20px" v-model:value="checkedList" :options="plainOptions" @change="checkboxChange" />
+          </div>
         </div>
       </div>
       <div class="echarts" ref="surface1Ref"></div>
@@ -339,6 +342,9 @@ export default {
         day: [],
       },
       modalFlag: false,
+      checkedList: [],
+      limitCheckedList: [],
+      plainOptions: ['学习人数', '总学习时长', '人均学习时长'],
     });
     const surfaceRef = ref(null);
     const surface1Ref = ref(null);
@@ -350,6 +356,19 @@ export default {
 
     const datess = ref();
     const hackValues = ref();
+
+    const checkboxChange = (event) => {
+      console.log("checkboxChange event:",event);
+      if(event.length>2){
+        message.warning("最多选两个");
+        console.log("checkboxChange checkedList:",state.checkedList);
+        state.checkedList = state.limitCheckedList;
+      }else{
+        state.limitCheckedList = event;
+        modalChange();
+      }
+    };
+
     const eChartClickRight = async () => {
       state.modalFlag = true;
 
@@ -658,10 +677,27 @@ export default {
             });
             option.value.xAxis.data = xData;
             // 右侧坐标轴数据
-            option.value.series[0].data = count;
+            // option.value.series[0].data = count;
-            //左侧坐标轴数据
+            // //左侧坐标轴数据
-            option.value.series[1].data = avgDuration;
+            // option.value.series[1].data = avgDuration;
-            option.value.series[2].data = duration;
+            // option.value.series[2].data = duration;
+            option.value.series[0].data = [];
+            option.value.series[1].data = [];
+            option.value.series[2].data = [];
+            console.log("checkedList:",state.checkedList);
+            for(let i=0;i<state.checkedList.length;i++){
+              if(state.checkedList[i]=="学习人数"){
+                option.value.series[0].data = count;
+              }
+              if(state.checkedList[i]=="人均学习时长"){
+                option.value.series[1].data = avgDuration;
+                option.value.series[1].yAxisIndex = i;
+              }
+              if(state.checkedList[i]=="总学习时长"){
+                option.value.series[2].data = duration;
+                option.value.series[2].yAxisIndex = i;
+              }
+            }
             createEcharts2();
           } else {
             const xData = [];
@@ -676,10 +712,27 @@ export default {
             });
             option.value.xAxis.data = xData;
             // 右侧坐标轴数据
-            option.value.series[0].data = count;
+            // option.value.series[0].data = count;
-            //左侧坐标轴数据
+            // //左侧坐标轴数据
-            option.value.series[1].data = avgDuration;
+            // option.value.series[1].data = avgDuration;
-            option.value.series[2].data = duration;
+            // option.value.series[2].data = duration;
+            option.value.series[0].data = [];
+            option.value.series[1].data = [];
+            option.value.series[2].data = [];
+            console.log("checkedList:",state.checkedList);
+            for(let i=0;i<state.checkedList.length;i++){
+              if(state.checkedList[i]=="学习人数"){
+                option.value.series[0].data = count;
+              }
+              if(state.checkedList[i]=="人均学习时长"){
+                option.value.series[1].data = avgDuration;
+                option.value.series[1].yAxisIndex = i;
+              }
+              if(state.checkedList[i]=="总学习时长"){
+                option.value.series[2].data = duration;
+                option.value.series[2].yAxisIndex = i;
+              }
+            }
             createEcharts2();
           }
         }
@@ -715,10 +768,27 @@ export default {
             });
             option.value.xAxis.data = xData;
             // 右侧坐标轴数据
-            option.value.series[0].data = count;
+            // option.value.series[0].data = count;
-            //左侧坐标轴数据
+            // //左侧坐标轴数据
-            option.value.series[1].data = avgDuration;
+            // option.value.series[1].data = avgDuration;
-            option.value.series[2].data = duration;
+            // option.value.series[2].data = duration;
+            option.value.series[0].data = [];
+            option.value.series[1].data = [];
+            option.value.series[2].data = [];
+            console.log("checkedList:",state.checkedList);
+            for(let i=0;i<state.checkedList.length;i++){
+              if(state.checkedList[i]=="学习人数"){
+                option.value.series[0].data = count;
+              }
+              if(state.checkedList[i]=="人均学习时长"){
+                option.value.series[1].data = avgDuration;
+                option.value.series[1].yAxisIndex = i;
+              }
+              if(state.checkedList[i]=="总学习时长"){
+                option.value.series[2].data = duration;
+                option.value.series[2].yAxisIndex = i;
+              }
+            }
             createEcharts2();
           } else {
             const xData = [];
@@ -733,10 +803,27 @@ export default {
             });
             option.value.xAxis.data = xData;
             // 右侧坐标轴数据
-            option.value.series[0].data = count;
+            // option.value.series[0].data = count;
-            //左侧坐标轴数据
+            // //左侧坐标轴数据
-            option.value.series[1].data = avgDuration;
+            // option.value.series[1].data = avgDuration;
-            option.value.series[2].data = duration;
+            // option.value.series[2].data = duration;
+            option.value.series[0].data = [];
+            option.value.series[1].data = [];
+            option.value.series[2].data = [];
+            console.log("checkedList:",state.checkedList);
+            for(let i=0;i<state.checkedList.length;i++){
+              if(state.checkedList[i]=="学习人数"){
+                option.value.series[0].data = count;
+              }
+              if(state.checkedList[i]=="人均学习时长"){
+                option.value.series[1].data = avgDuration;
+                option.value.series[1].yAxisIndex = i;
+              }
+              if(state.checkedList[i]=="总学习时长"){
+                option.value.series[2].data = duration;
+                option.value.series[2].yAxisIndex = i;
+              }
+            }
             createEcharts2();
           }
         }
@@ -1425,6 +1512,7 @@ export default {
     });
     return {
       ...toRefs(state),
+      checkboxChange,
       eChartClickRight,
       rightMonthChange,
       rightChange,