update

src/components/pages/dataBoardNew/school/courseInfo/index.vue

@@ -1,80 +1,125 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div
-        id="charts_canvas"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
-    </div>
+      <div style="width: 100%; height: 100%">
+          <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+      </div>
   </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      chartObj: null,
-      ooption: {
-        data: [],
+  props: {
+      courseNumberArray: {
+          type: Array,
       },
-      option: {
-        tooltip: {
-          trigger: "item",
-        },
-        series: [
-          {
-            type: "pie",
-            radius: '50%',
-            avoidLabelOverlap: true,
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 16,
-                fontWeight: "bold",
+  },
+  data() {
+      return {
+          chartObj: null,
+          ooption: {
+              data: [],
+          },
+          option: {
+              // title: {
+              //     text: '课程数量',
+              //     textStyle:{
+              //         fontSize: 12,
+              //     },
+              //     padding: [5, 0, 0, 10]
+              // },
+              tooltip: {
+                  trigger: 'item'
               },
-            },
-            data: [
-              { value: 123, name: "一年级" },
-              { value: 200, name: "二年级" },
-              { value: 250, name: "三年级" },
-              { value: 450, name: "四年级" },
-              { value: 300, name: "五年级" },
-              { value: 100, name: "六年级" },
-            ],
+              series: [
+                  {
+                      avoidLabelOverlap: true,  //是否启用防止标签重叠策略
+                      labelLine: { // 设置指示线的长度
+                          length: 8,
+                          length2: 5
+                      },
+                      label: {
+                          fontSize: 12,
+                          position:'outer',
+                          // alignTo:'labelLine'
+                      },
+                      labelLayout: {
+                          hideOverlap: false
+                      },
+                      type: 'pie',
+                      // radius: ['35%', '70%'],
+                      emphasis: {
+                          label: {
+                              show: true,
+                              fontSize: 13,
+                              fontWeight: 'bold'
+                          }
+                      },
+                      data: [
+                          // { value: 1048, name: '一年级' },
+                          // { value: 735, name: '二年级' },
+                          // { value: 580, name: '三年级' },
+                          // { value: 484, name: '四年级' },
+                          // { value: 484, name: '五年级' },
+                          // { value: 300, name: '六年级' }
+                      ]
+                  }
+              ]
           },
-        ],
-      },
-    };
+      };
   },
   methods: {
-    setChart() {
-      // 雷达图显示的标签
-      let newPromise = new Promise((resolve) => {
-        resolve();
-      });
-      //然后异步执行echarts的初始化函数
-      newPromise.then(() => {
-        const chartObj = this.$echarts.init(
-          //劳动课程
-          this.$el.querySelector("#charts_canvas")
-        );
-        // 初始化雷达图
-        this.chartObj = chartObj;
-        this.chartObj.setOption(this.option);
-      });
-    },
+      setChart(option) {
+          // 雷达图显示的标签
+          let newPromise = new Promise((resolve) => {
+              resolve();
+          });
+          //然后异步执行echarts的初始化函数
+          newPromise.then(() => {
+              const chartObj = this.$echarts.init(
+                  //劳动课程
+                  this.$el.querySelector("#charts_canvas")
+              );
+              this.option.series[0].data = this.ooption.data.filter(item => item.value !== 0);
+
+              // 初始化雷达图
+              this.chartObj = chartObj;
+              this.chartObj.setOption(this.option);
+          });
+      },
+      setArray(array) {
+          this.ooption = {
+              data: [],
+          }
+          for (var i = 0; i < array.length; i++) {
+              this.ooption.data.push({ value: array[i].course, name: array[i].name })
+          }
+          if (!this.chartObj) {
+              this.setChart(this.ooption);
+          } else {
+              this.option.series[0].data = this.ooption.data;
+              this.chartObj.setOption(this.option);
+          }
+          this.$forceUpdate();
+      },
   },
   watch: {
+      courseNumberArray: {
+          immediate: true,
+          deep: true,
+          handler(newValue, oldValue) {
+              this.setArray(newValue)
+              this.$forceUpdate();
+          },
+      },
   },
   mounted() {
-    this.setChart();
-    var _this = this;
-    window.addEventListener("resize", () => {
-      if (_this.chartObj) {
-        _this.chartObj.resize();
-      }
-    });
+      this.setArray(this.courseNumberArray)
+      var _this = this;
+      window.addEventListener("resize", () => {
+          if (_this.chartObj) {
+              _this.chartObj.resize();
+          }
+      });
   },
 };
 </script>
@@ -92,4 +137,4 @@ export default {
   width: 95%;
   background: #fff;
 }
-</style>
+</style>

src/components/pages/dataBoardNew/school/index.vue

@@ -83,7 +83,7 @@
         </div>
         <div class="dataBox" style="height: calc(100% - 115px);">
           <toolUser style="height: calc(100%)" v-if="skType == 1" :yearArray="loginCountYearArray"></toolUser>
-          <bar style="height: calc(100%)" v-if="skType == 0" :loginArray="[teacherOnlineTime,studentOnlineTime]"></bar>
+          <bar style="height: calc(100%)" v-if="skType == 0" :loginArray="[teacherOnlineTime, studentOnlineTime]"></bar>
           <!-- <div class="otherCss">
             <div v-if="!oType">切换为柱状图</div>
             <div v-if="oType">切换为热力图</div>
@@ -116,7 +116,7 @@
               实施情况
             </div>
           </div>
-          <div style="
+          <!-- <div style="
               display: flex;
               flex-direction: row;
               flex-wrap: nowrap;
@@ -128,41 +128,47 @@
             <el-select v-model="cType2" class="selectBox" style="width: 110px">
               <el-option label="全部活动" value="全部活动"></el-option>
             </el-select>
-          </div>
+          </div> -->
         </div>
         <div class="dataBox">
-          <teacherInfo v-if="courseType == 0" style="height: calc(100%)"></teacherInfo>
+          <teacherInfo v-if="courseType == 0" style="height: calc(100%)" :courseArray="courseArray"></teacherInfo>
           <courseNum v-if="courseType == 1" style="height: calc(100%)"></courseNum>
           <div style="height: calc(100%)" v-if="courseType == 2">
             <div class="info_box" style="width: 96%;">
               <div class="info blueBG" style="width:calc(100% / 4 - 10px)">
                 <span>平台实施课程总数</span>
-                <!-- <span>{{ count }}</span> -->
-                <span>{{ 18 }}</span>
+                <span>{{ isCourseCount }}</span>
               </div>
               <div class="info blueBG" style="width:calc(100% / 4 - 10px)">
                 <span>平台实施课程占比</span>
-                <!-- <span>{{ weekCount }}</span> -->
-                <span>{{ "80%" }}</span>
+                <span>{{ isCourseCount ? (isCourseCount / allCourseCount * 100).toFixed(0) + '%' : '0%' }}</span>
               </div>
               <div class="info blueBG" style="width:calc(100% / 4 - 10px)">
                 <span>课程平均任务数量</span>
-                <!-- <span>{{ weekCount }}</span> -->
-                <span>{{ 18 }}</span>
+                <span>{{ isCourseCount ? (taskCount / isCourseCount).toFixed(0) : 0 }}</span>
               </div>
               <div class="info blueBG" style="width:calc(100% / 4 - 10px)">
                 <span>课程平均作业数量</span>
-                <!-- <span>{{ weekCount }}</span> -->
-                <span>{{ 18 }}</span>
+                <span>{{ isCourseCount ? (workCount / isCourseCount).toFixed(0) : 0 }}</span>
               </div>
             </div>
-            <workNum style="height:calc(100% - 70px)"></workNum>
+            <workNum style="height:calc(100% - 70px)" :workNumList="workNumList"></workNum>
           </div>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox" style="justify-content: space-between">
           <div class="title">平台使用概况</div>
+          <div class="tCircleC">
+            <div class="tCircleBox">
+              <span class="tCircle tt"></span>
+              <span class="tname">老师</span>
+            </div>
+            <div class="tCircleBox">
+              <span class="tCircle ts"></span>
+              <span class="tname">学生</span>
+            </div>
+          </div>
           <!-- <div class="timeDiv">
             <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
             <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
@@ -172,38 +178,43 @@
         <div class="dataBox">
           <div class="depth_box" style="height: calc(100%)">
             <div class="depth">
-              <span>参与课程</span>
+              <span>上传课程</span>
               <div>
-                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="5" :format="format"
-                  color="#106BFF"></el-progress>
+                <el-progress :width="80" type="circle"
+                  :percentage="this.lightJson.upCourseTeachers ? (this.lightJson.upCourseTeachers / this.lightJson.teachers * 100).toFixed(0) : 0"
+                  :stroke-width="5" :format="format" color="rgb(64, 149, 229)"></el-progress>
               </div>
             </div>
             <div class="depth">
-              <span>参与项目</span>
+              <span>上传项目</span>
               <div>
-                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="5" :format="format"
-                  color="#106BFF"></el-progress>
+                <el-progress :width="80" type="circle"
+                  :percentage="this.lightJson.upSCourseTeachers ? (this.lightJson.upSCourseTeachers / this.lightJson.teachers * 100).toFixed(0) : 0"
+                  :stroke-width="5" :format="format" color="rgb(64, 149, 229)"></el-progress>
               </div>
             </div>
             <div class="depth">
               <span>使用工具</span>
               <div>
-                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="5" :format="format"
-                  color="#106BFF"></el-progress>
+                <el-progress :width="80" type="circle"
+                  :percentage="this.lightJson.toolTeachers ? (this.lightJson.toolTeachers / this.lightJson.teachers * 100).toFixed(0) : 0"
+                  :stroke-width="5" :format="format" color="rgb(64, 149, 229)"></el-progress>
               </div>
             </div>
             <div class="depth">
               <span>协同合作</span>
               <div>
-                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="5" :format="format"
-                  color="#106BFF"></el-progress>
+                <el-progress :width="80" type="circle"
+                  :percentage="this.lightJson.gCourseTeachers ? (this.lightJson.gCourseTeachers / this.lightJson.teachers * 100).toFixed(0) : 0"
+                  :stroke-width="5" :format="format" color="rgb(64, 149, 229)"></el-progress>
               </div>
             </div>
             <div class="depth">
               <span>互动交流</span>
               <div>
-                <el-progress :width="80" type="circle" :percentage="80" :stroke-width="5" :format="format"
-                  color="#106BFF"></el-progress>
+                <el-progress :width="80" type="circle"
+                  :percentage="this.lightJson.commentTeachers ? (this.lightJson.commentTeachers / this.lightJson.teachers * 100).toFixed(0) : 0"
+                  :stroke-width="5" :format="format" color="rgb(64, 149, 229)"></el-progress>
               </div>
             </div>
             <div class="depth">
@@ -262,16 +273,22 @@
               flex-wrap: nowrap;
               align-items: center;
             ">
-            <el-select v-model="cType4" class="selectBox" style="width: 110px">
+            <el-select v-model="cType" @change="typeChange" class="selectBox">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="年级" value="grade"></el-option>
+              <el-option label="主题" value="theme"></el-option>
+              <el-option label="学科" value="subject"></el-option>
+            </el-select>
+            <!-- <el-select v-model="cType4" class="selectBox" style="width: 110px">
               <el-option label="全部" value="全部"></el-option>
             </el-select>
             <el-select v-model="cType5" class="selectBox" style="width: 110px">
               <el-option label="总量占比" value="总量占比"></el-option>
-            </el-select>
+            </el-select> -->
           </div>
         </div>
         <div class="dataBox">
-          <courseInfo style="height: calc(100% - 40px)"></courseInfo>
+          <courseInfo style="height: calc(100% - 40px)" :courseNumberArray="courseNumberArray"></courseInfo>
         </div>
       </div>
       <div class="bottom">
@@ -323,7 +340,7 @@ export default {
   data() {
     return {
       isLoading: false,
-      cType: "全部",
+      cType: "",
       cType1: "全部年级",
       cType2: "全部活动",
       cType3: "按年级",
@@ -342,6 +359,26 @@ export default {
       userOnlineTime: [],
       teacherOnlineTime: [],
       studentOnlineTime: [],
+      courseArray: [],
+      workNumList: [],
+      taskCount: 0,
+      workCount: 0,
+      isCourseCount: 0,
+      allCourseCount: 0,
+      allArray: [],
+      gradeArray: [],
+      themeArray: [],
+      subjectArray: [],
+      courseNumberArray: [],
+      lightJson: {
+        teachers: 0,
+        students: 0,
+        upCourseTeachers: 0,//上传课程
+        upSCourseTeachers: 0,//上传项目
+        gCourseTeachers: 0,//协同课程
+        toolTeachers: 0,//使用工具
+        commentTeachers: 0,//协同交流
+      },
     };
   },
   mounted() {
@@ -371,7 +408,7 @@ export default {
           this.isLoading = false;
           let _grade = res.data[0]; //年级
           let _subject = res.data[1]; //学科
-          let _course = res.data[2]; //课程
+          let _theme = res.data[2]; //主题
 
           this.allUser = res.data[3][0].count; //总人数
           let _loginCount = res.data[4]; //统计半年的登录用户
@@ -467,6 +504,177 @@ export default {
           this.userOnlineTime = _userOnlineTime
           this.teacherOnlineTime = _teacherOnlineTime
           this.studentOnlineTime = _studentOnlineTime
+
+
+          let _course = res.data[10] //课程
+          let _gradeCourse = 0 //各年级上传课程
+          let _subjectCourse = 0 //各学科上传课程
+          let _courseArray = []
+          _subject.push({ name: '其他' })
+
+          for (var i = 0; i < _grade.length; i++) {
+            _courseArray.push({
+              name: _grade[i].name,
+              id: _grade[i].id,
+              courseid: [],
+              subject: [],
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _grade[i].id) {
+                _gradeCourse++
+                if (_courseArray[i].courseid.indexOf(_course[z].courseid) === -1) {
+                  _courseArray[i].courseid.push(_course[z].courseid)
+                }
+              }
+
+            }
+            for (var j = 0; j < _subject.length; j++) {
+              _courseArray[i].subject.push({
+                name: _subject[j].name,
+                id: _subject[j].id,
+                course: 0
+              })
+              for (var z = 0; z < _course.length; z++) {
+                if (_course[z].typeid == _subject[j].id && _courseArray[i].courseid.indexOf(_course[z].courseid) !== -1) {
+                  _courseArray[i].subject[j].course++
+                }
+              }
+            }
+            let sum = 0
+            for (var j = 0; j < _courseArray[i].subject.length - 1; j++) {
+              sum += _courseArray[i].subject[j].course
+            }
+            _courseArray[i].subject[_courseArray[i].subject.length - 1].course = (_courseArray[i].courseid.length - sum) < 0 ? 0 : _courseArray[i].courseid.length - sum
+          }
+          for (var j = 0; j < _subject.length; j++) {
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _subject[j].id) {
+                _subjectCourse++
+              }
+            }
+          }
+          console.log(_courseArray);
+          // this.gradeCourse = _gradeCourse / _grade.length
+          // this.subjectCourse = _subjectCourse / _subject.length
+          this.courseArray = _courseArray
+
+
+          let _workCourse = res.data[11]; //带作业的课程
+          let _taskCount = 0 //任务数量
+
+          var wList = [];
+          for (var i = 0; i < _workCourse.length; i++) {
+            if (!wList[_workCourse[i].courseId]) {
+              wList[_workCourse[i].courseId] = {
+                cid: _workCourse[i].courseId,
+                title: _workCourse[i].title,
+                task: 0,
+                work: 0,
+              };
+              let chapters = JSON.parse(_workCourse[i].chapters);
+              for (var j = 0; j < chapters.length; j++) {
+                if (wList[_workCourse[i].courseId].task == 0) {
+                  wList[_workCourse[i].courseId].task =
+                    chapters[j].chapterInfo[0].taskJson.length;
+                } else {
+                  wList[_workCourse[i].courseId].task +=
+                    chapters[j].chapterInfo[0].taskJson.length;
+                }
+                _taskCount += chapters[j].chapterInfo[0].taskJson.length;
+              }
+            }
+          }
+          for (var i = 0; i < _workCourse.length; i++) {
+            let a = Object.keys(wList);
+            for (var j = 0; j < Object.keys(wList).length; j++) {
+              if (_workCourse[i].courseId == wList[a[j]].cid && _workCourse[i].id) {
+                wList[a[j]].work++;
+              }
+            }
+          }
+          var workNumList = Object.values(wList).map((item) => [
+            item.task,
+            item.work,
+            item.title,
+            item.cid,
+          ]);
+          this.workNumList = workNumList;
+          this.taskCount = _taskCount
+          this.workCount = _workCourse.length
+          this.isCourseCount = res.data[12][0].count; //课程开展总数
+          this.allCourseCount = res.data[13][0].count; //课程总数
+
+          let _gradeArray = []
+          let _subjectArray = []
+          let _themeArray = []
+
+          for (var i = 0; i < _grade.length; i++) {
+            _gradeArray.push({
+              name: _grade[i].name,
+              typeid: _grade[i].id,
+              course: 0,
+              array: []
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _grade[i].id) {
+                _gradeArray[i].course++
+                _gradeArray[i].array.push(_course[z].courseid)
+              }
+            }
+          }
+
+          for (var i = 0; i < _subject.length; i++) {
+            _subjectArray.push({
+              name: _subject[i].name,
+              typeid: _subject[i].id,
+              course: 0,
+              array: []
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _subject[i].id) {
+                _subjectArray[i].course++
+                _subjectArray[i].array.push(_course[z].courseid)
+              }
+            }
+          }
+
+
+          for (var i = 0; i < _theme.length; i++) {
+            _themeArray.push({
+              name: _theme[i].name,
+              typeid: _theme[i].id,
+              course: 0,
+              array: []
+            })
+            for (var z = 0; z < _course.length; z++) {
+              if (_course[z].typeid == _theme[i].id) {
+                _themeArray[i].course++
+                _themeArray[i].array.push(_course[z].courseid)
+              }
+            }
+          }
+
+          this.gradeArray = _gradeArray
+          this.subjectArray = _subjectArray
+          this.themeArray = _themeArray
+          this.allArray = [..._gradeArray, ..._subjectArray, ..._themeArray]
+          this.typeChange();
+          //     lightJson: {
+          //   teachers: 0,
+          //   students: 0,
+          //   upCourseTeachers: 0,//上传课程
+          //   upSCourseTeachers: 0,//上传项目
+          //   gCourseTeachers: 0,//协同课程
+          //   toolUsers: 0,//使用工具
+          //   commentTeachers: 0,//协同交流
+          // },
+          this.lightJson.teachers = res.data[14][0].count; //教师总数
+          this.lightJson.students = res.data[15][0].count; //学生总数
+          this.lightJson.upCourseTeachers = res.data[16][0].count; //上传课程老师数量
+          this.lightJson.upSCourseTeachers = res.data[17][0].count; //上传项目老师数量
+          this.lightJson.toolTeachers = res.data[18][0].count; //使用工具老师数量
+          this.lightJson.gCourseTeachers = res.data[19][0].count; //协同课程老师数量
+          this.lightJson.commentTeachers = res.data[20][0].count; //协同交流老师数量
           this.$forceUpdate();
         })
         .catch((err) => {
@@ -474,6 +682,18 @@ export default {
           console.error(err);
         });
     },
+    typeChange() {
+      if (this.cType === '') {
+        this.courseNumberArray = this.allArray
+      } else if (this.cType === 'grade') {
+        this.courseNumberArray = this.gradeArray
+      } else if (this.cType === 'theme') {
+        this.courseNumberArray = this.themeArray
+      } else if (this.cType === 'subject') {
+        this.courseNumberArray = this.subjectArray
+      }
+      this.$forceUpdate();
+    },
   },
 };
 </script>
@@ -747,4 +967,37 @@ export default {
   background: rgb(243, 248, 253);
   border: 2px solid rgb(234, 246, 255);
 }
+
+.tCircleC {
+  display: flex;
+  align-items: center;
+}
+
+.tCircleBox {
+  display: flex;
+  align-items: center;
+}
+
+.tCircleBox>span+span {
+  margin-left: 5px;
+}
+
+.tCircleBox+.tCircleBox {
+  margin-left: 10px;
+}
+
+.tCircleBox .tCircle {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.tCircleBox .tt {
+  background: rgb(64, 149, 229);
+}
+
+.tCircleBox .ts {
+  background: #106BFF;
+}
 </style>

src/components/pages/dataBoardNew/school/teacherInfo/index.vue

@@ -37,94 +37,6 @@ export default {
         };
     },
     methods: {
-        // setChart(option) {
-        //     // 雷达图显示的标签
-        //     let newPromise = new Promise((resolve) => {
-        //         resolve();
-        //     });
-        //     //然后异步执行echarts的初始化函数
-        //     newPromise.then(() => {
-        //         const chartObj = this.$echarts.init(
-        //             //劳动课程
-        //             this.$el.querySelector("#charts_canvas")
-        //         );
-        //         const hours = option.hours
-        //         // [
-        //         //     // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
-        //         //     // '劳动', '其他',
-        //         // ];
-        //         // prettier-ignore
-        //         const days = option.days
-        //         // [
-        //         //     // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
-        //         // ];
-        //         // prettier-ignore
-        //         const data = option.data
-        //         // [
-        //         //     // [0, 0, 2], [0, 1, 1], [0, 2, 3], [0, 3, 0], [0, 4, 5], [0, 5, 5], [0, 6, 7], [0, 7, 8], [0, 8, 1],
-        //         //     // [1, 0, 5], [1, 1, 1], [1, 2, 2], [1, 3, 0], [1, 4, 5], [1, 5, 7], [1, 6, 7], [1, 7, 8], [1, 8, 6],
-        //         //     // [2, 0, 5], [2, 1, 2], [2, 2, 0], [2, 3, 2], [2, 4, 1], [2, 5, 5], [2, 6, 4], [2, 7, 4], [2, 8, 1],
-        //         //     // [3, 0, 1], [3, 1, 1], [3, 2, 1], [3, 3, 0], [3, 4, 5], [3, 5, 2], [3, 6, 7], [3, 7, 8], [3, 8, 5],
-        //         //     // [4, 0, 5], [4, 1, 3], [4, 2, 0], [4, 3, 3], [4, 4, 4], [4, 5, 2], [4, 6, 3], [4, 7, 5], [4, 8, 1],
-        //         //     // [5, 0, 5], [5, 1, 1], [5, 2, 0], [5, 3, 0], [5, 4, 5], [5, 5, 5], [5, 6, 7], [5, 7, 8], [5, 8, 3],
-        //         // ];
-        //         const title = [];
-        //         const singleAxis = [];
-        //         const series = [];
-        //         days.forEach(function (day, idx) {
-        //             title.push({
-        //                 textBaseline: 'middle',
-        //                 top: ((idx + 0.5) * 90) / days.length + '%',
-        //                 text: day,
-        //                 textStyle: {
-        //                     fontSize: 12,
-        //                 },
-        //             });
-        //             singleAxis.push({
-        //                 left: 70,
-        //                 type: 'category',
-        //                 boundaryGap: false,
-        //                 data: hours,
-        //                 top: (idx * 90) / days.length + 5 + '%',
-        //                 height: 90 / days.length - 10 + '%'
-        //             });
-        //             series.push({
-        //                 singleAxisIndex: idx,
-        //                 coordinateSystem: 'singleAxis',
-        //                 type: 'scatter',
-        //                 data: [],
-        //                 symbolSize: function (dataItem) {
-        //                     return dataItem[1] * 3;
-        //                 }
-        //             });
-        //         });
-        //         data.forEach(function (dataItem) {
-        //             series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
-        //         });
-        //         chartObj.off('click')
-        //         let _this = this
-        //         chartObj.on('click', function (param) {  
-        //             //param参数包含的内容有： 
-        //             //param.name：X轴的值 
-        //             //param.data：Y轴的值 
-        //             //param.value：Y轴的值 
-        //             //param.type：点击事件均为click 
-        //             //param.seriesName：legend的名称 
-        //             //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
-        //             //param.dataIndex：数值序列（X轴上当前点是第几个点）
-        //             //alert(param.seriesName);  //legend的名称
-        //             console.log(param);  //X轴的值
-        //             _this.$emit('openCourse',param.componentIndex,param.data[0])
-        //         });
-
-        //         this.option.title = title
-        //         this.option.singleAxis = singleAxis
-        //         this.option.series = series
-        //         // 初始化雷达图
-        //         this.chartObj = chartObj;
-        //         this.chartObj.setOption(this.option);
-        //     });
-        // },
         setChart(option) {
             // 雷达图显示的标签
             let newPromise = new Promise((resolve) => {
@@ -136,25 +48,26 @@ export default {
                     //劳动课程
                     this.$el.querySelector("#charts_canvas")
                 );
-                const hours = 
-                [
-                    '1班', '2班', '3班', '4班', '5班', '6班'
-                ];
+                const hours = option.hours
+                // [
+                //     // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
+                //     // '劳动', '其他',
+                // ];
                 // prettier-ignore
-                const days = 
-                [
-                    '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
-                ];
+                const days = option.days
+                // [
+                //     // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
+                // ];
                 // prettier-ignore
-                const data = 
-                [
-                    [0, 0, 34], [0, 1, 35], [0, 2, 40], [0, 3, 33], [0, 4, 35], [0, 5, 35], 
-                    [1, 0, 34], [1, 1, 30], [1, 2, 35], [1, 3, 41], [1, 4, 42], [1, 5, 37], 
-                    [2, 0, 45], [2, 1, 35], [2, 2, 44], [2, 3, 45], [2, 4, 41], [2, 5, 35], 
-                    [3, 0, 41], [3, 1, 44], [3, 2, 43], [3, 3, 39], [3, 4, 42], [3, 5, 42], 
-                    [4, 0, 34], [4, 1, 36], [4, 2, 40], [4, 3, 0], [4, 4, 0], [4, 5, 0], 
-                    [5, 0, 44], [5, 1, 44], [5, 2, 34], [5, 3, 0], [5, 4, 0], [5, 5, 0],
-                ];
+                const data = option.data
+                // [
+                //     // [0, 0, 2], [0, 1, 1], [0, 2, 3], [0, 3, 0], [0, 4, 5], [0, 5, 5], [0, 6, 7], [0, 7, 8], [0, 8, 1],
+                //     // [1, 0, 5], [1, 1, 1], [1, 2, 2], [1, 3, 0], [1, 4, 5], [1, 5, 7], [1, 6, 7], [1, 7, 8], [1, 8, 6],
+                //     // [2, 0, 5], [2, 1, 2], [2, 2, 0], [2, 3, 2], [2, 4, 1], [2, 5, 5], [2, 6, 4], [2, 7, 4], [2, 8, 1],
+                //     // [3, 0, 1], [3, 1, 1], [3, 2, 1], [3, 3, 0], [3, 4, 5], [3, 5, 2], [3, 6, 7], [3, 7, 8], [3, 8, 5],
+                //     // [4, 0, 5], [4, 1, 3], [4, 2, 0], [4, 3, 3], [4, 4, 4], [4, 5, 2], [4, 6, 3], [4, 7, 5], [4, 8, 1],
+                //     // [5, 0, 5], [5, 1, 1], [5, 2, 0], [5, 3, 0], [5, 4, 5], [5, 5, 5], [5, 6, 7], [5, 7, 8], [5, 8, 3],
+                // ];
                 const title = [];
                 const singleAxis = [];
                 const series = [];
@@ -181,7 +94,7 @@ export default {
                         type: 'scatter',
                         data: [],
                         symbolSize: function (dataItem) {
-                            return dataItem[1];
+                            return dataItem[1] * 3;
                         }
                     });
                 });
@@ -197,7 +110,6 @@ export default {
             });
         },
         setJson(array) {
-            this.setChart(this.ooption);
             if (array != undefined && array.length > 0) {
                 this.ooption = {
                     hours: [],
@@ -290,7 +202,6 @@ export default {
         // this.courseArray = this.courseArray.filter(item => {
         //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
         // })
-
         this.setJson(this.courseArray)
         var _this = this;
         window.addEventListener("resize", () => {

src/components/pages/dataBoardNew/school/workNum/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="data_body" style="height: calc(100% - 170px)">
+  <div class="data_body">
     <div style="width: 100%; height: 100%">
       <div
         id="charts_canvas"
@@ -12,6 +12,11 @@
 
 <script>
 export default {
+  props: {
+    workNumList: {
+      type: Array,
+    },
+  },
   data() {
     return {
       chartObj: null,
@@ -19,38 +24,43 @@ export default {
         data: [],
       },
       option: {
+        xAxis: {
+          name: "任务数量",
+          nameTextStyle: {
+            padding: [25, 0, 0, 0],
+            verticalAlign:'top'
+          },
+          nameGap: -45
+        },
+        grid: {
+          top: "10%",
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        yAxis: {
+          name: "作业提交数量",
+        },
+        color: ["#3681FC"],
         tooltip: {
-          trigger: "item",
+          formatter: function (params) {
+            return (
+              params.marker +
+              params.data[2] +
+              "<br/>" +
+              "任务数量：" +
+              params.data[0] +
+              "<br/>" +
+              "作业提交数量：" +
+              params.data[1]
+            );
+          },
         },
-        xAxis: {},
-        yAxis: {},
         series: [
           {
-            symbolSize: 20,
-            data: [
-              [10.0, 8.04],
-              [8.07, 6.95],
-              [13.0, 7.58],
-              [9.05, 8.81],
-              [11.0, 8.33],
-              [14.0, 7.66],
-              [13.4, 6.81],
-              [10.0, 6.33],
-              [14.0, 8.96],
-              [12.5, 6.82],
-              [9.15, 7.2],
-              [11.5, 7.2],
-              [3.03, 4.23],
-              [12.2, 7.83],
-              [2.02, 4.47],
-              [1.05, 3.33],
-              [4.05, 4.96],
-              [6.03, 7.24],
-              [12.0, 6.26],
-              [12.0, 8.84],
-              [7.08, 5.82],
-              [5.02, 5.68],
-            ],
+            symbolSize: 8,
+            data: [],
             type: "scatter",
           },
         ],
@@ -58,7 +68,7 @@ export default {
     };
   },
   methods: {
-    setChart() {
+    setChart(option) {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -69,23 +79,47 @@ export default {
           //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
+        this.option.series[0].data = this.ooption.data;
 
-        chartObj.off("click");
-        let _this = this;
-        chartObj.on("click", function (param) {
-          console.log(param); //X轴的值
-          _this.$emit("openCourse", param.data[3]);
+        chartObj.off('click')
+        let _this = this
+        chartObj.on('click', function (param) {
+          console.log(param);  //X轴的值
+          _this.$emit('openCourse', param.data[3])
         });
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
+    setArray(array) {
+      this.ooption = {
+        data: [],
+      };
+      for (var i = 0; i < array.length; i++) {
+        this.ooption.data.push(array[i]);
+      }
+      if (!this.chartObj) {
+        this.setChart(this.ooption);
+      } else {
+        this.option.series[0].data = this.ooption.data;
+        this.chartObj.setOption(this.option);
+      }
+      this.$forceUpdate();
+    },
   },
   watch: {
+    workNumList: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.setArray(newValue);
+        this.$forceUpdate();
+      },
+    },
   },
   mounted() {
-    this.setChart();
+    this.setArray(this.workNumList);
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {