新增数据看板静态数据页面

src/components/pages/dataBoardNew/course/chartList/bar.vue

@@ -0,0 +1,86 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "value",
+          data: [0, 50, 100, 150, 200, 250],
+        },
+        yAxis: {
+          type: "category",
+          data: ["五年级", "四年级", "三年级", "二年级", "一年级"],
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/cateRank.vue

@@ -1,109 +1,317 @@
 <template>
-  <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <el-table
-        :data="tableData"
-        style="width: 100%"
-        :header-cell-style="{ background: '#E0EAFB', color: '#000' }"
-        :row-class-name="tableRowClassName"
-        class="tableClass"
-      >
-        <el-table-column prop="rank" label="排行" min-width="50" align="center">
-          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
-        </el-table-column>
-        <el-table-column
-          prop="name"
-          label="类别名称"
-          min-width="80"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="sum"
-          label="课程数量"
-          min-width="80"
-          align="center"
-        >
-        </el-table-column>
-      </el-table>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
     </div>
-  </div>
 </template>
-
+  
 <script>
 export default {
-  props: {
-    courseNumberArray: {
-      type: Array,
+    props: {
+        courseArray: {
+            type: Array,
+        },
     },
-  },
-  data() {
-    return {
-      tableData: [
-        // { rank: "1", name: "一年级", sum: "2356" },
-        // { rank: "2", name: "二年级", sum: "2256" },
-        // { rank: "3", name: "三年级", sum: "2156" },
-        // { rank: "4", name: "四年级", sum: "1356" },
-        // { rank: "5", name: "五年级", sum: "1256" },
-        // { rank: "6", name: "六年级", sum: "1056" },
-      ],
-    };
-  },
-  methods: {
-    tableRowClassName({ row, rowIndex }) {
-      if ((rowIndex + 1) % 2 === 0) {
-        return "even_row";
-      } else {
-        return "";
-      }
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                hours: [],
+                days: [],
+                data: [],
+            },
+            option: {
+                tooltip: {
+                    position: 'top',
+                    formatter: function (params) {
+                        // console.log(params);
+                        return params.marker + params.name + ' ' + params.data[1];//params.seriesName + '<br>' + params.
+
+                    }
+                },
+                title: [],
+                singleAxis: [],
+                series: []
+            },
+        };
     },
-    setArray(array) {
-      this.tableData = [];
-      for (var i = 0; i < array.length; i++) {
-        this.tableData.push({
-          sum: array[i].course,
-          name: array[i].name,
-        });
-      }
-      this.tableData = this.tableData.sort(function (a, b) {
-        return b.sum - a.sum;
-      });
+    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) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+                const hours = 
+                [
+                    '1班', '2班', '3班', '4班', '5班', '6班'
+                ];
+                // prettier-ignore
+                const 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 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];
+                        }
+                    });
+                });
+                data.forEach(function (dataItem) {
+                    series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+                });
+                this.option.title = title
+                this.option.singleAxis = singleAxis
+                this.option.series = series
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+        setJson(array) {
+            this.setChart(this.ooption);
+            if (array != undefined && array.length > 0) {
+                this.ooption = {
+                    hours: [],
+                    days: [],
+                    data: [],
+                }
+                let _grade = []
+                let _subject = []
+                let data = []
+
+                array.forEach(function (item, idx) {
+                    _grade.push(item.name)
+                })
+
+                array[0].subject.forEach(function (item, idx) {
+                    _subject.push(item.name)
+                })
+                array.forEach(function (item, idx) {
+                    item.subject.forEach(function (item2, idx2) {
+                        data.push([idx, idx2, item2.course])
+                    })
+                })
+                this.ooption.hours = _subject
+                this.ooption.days = _grade
+                this.ooption.data = data
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    const hours = this.ooption.hours;
+                    // prettier-ignore
+                    const days = this.ooption.days;
+                    // prettier-ignore
+                    const data = this.ooption.data;
+                    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]]);
+                    });
+
+                    this.option.title = title
+                    this.option.singleAxis = singleAxis
+                    this.option.series = series
+                    this.chartObj.setOption(this.option);
+                }
+            }
+        }
     },
-  },
-  watch: {
-    courseNumberArray: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.setArray(newValue);
-        this.$forceUpdate();
-      },
+    watch: {
+        courseArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                // newValue = newValue.filter(item => {
+                //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+                // })
+                this.setJson(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        // this.courseArray = this.courseArray.filter(item => {
+        //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+        // })
+
+        this.setJson(this.courseArray)
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
     },
-  },
-  mounted() {
-    this.setArray(this.courseNumberArray);
-  },
 };
 </script>
-
+  
 <style scoped>
-.el-table >>> .even_row {
-  background-color: #f2f7ff !important;
-}
 .data_body {
-  height: 100%;
-  /* display: flex; */
-  position: relative;
-  border-radius: 5px;
-  /* border: 1px solid #eee; */
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
-  background: #fff;
-}
-
-.tableClass >>> td, .tableClass >>> th{
-  padding: 5px 0;
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
 }
-</style>
+</style>
+  

src/components/pages/dataBoardNew/course/chartList/courseAna.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    courseNumberArray: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
@@ -26,22 +25,21 @@ export default {
         series: [
           {
             type: "pie",
-            radius: '50%',
-            avoidLabelOverlap: true,
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 16,
-                fontWeight: "bold",
-              },
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+            },
+            labelLine: {
+              show: true,
             },
             data: [
-              // { value: 123, name: "一年级" },
-              // { value: 200, name: "二年级" },
-              // { value: 250, name: "三年级" },
-              // { value: 450, name: "四年级" },
-              // { value: 300, name: "五年级" },
-              // { value: 100, name: "六年级" },
+              { value: 100, name: "一年级" },
+              { value: 150, name: "二年级" },
+              { value: 223, name: "三年级" },
+              { value: 216, name: "四年级" },
+              { value: 130, name: "五年级" },
+              { value: 208, name: "六年级" },
             ],
           },
         ],
@@ -49,7 +47,7 @@ export default {
     };
   },
   methods: {
-    setChart(option) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -60,46 +58,16 @@ export default {
           //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
-        this.option.series[0].data = this.ooption.data.filter(item => item.value !== 0);
-        chartObj.off('click')
-        let _this = this
-        chartObj.on('click', function (param) {
-          console.log(param);  //X轴的值
-          _this.$emit('openCourse', param.dataIndex)
-        });
         // 初始化雷达图
         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.setArray(this.courseNumberArray);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

src/components/pages/dataBoardNew/course/chartList/courseNum.vue

@@ -0,0 +1,85 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/courseTime.vue

@@ -16,169 +16,46 @@ export default {
     return {
       chartObj: null,
       option: {
-        singleAxis: {
-          top: 50,
-          bottom: 50,
-          axisTick: {},
-          axisLabel: {},
-          grid: {
-            top: "5%",
-            left: "5%",
-            right: "5%",
-            bottom: "5%",
-            containLabel: true,
-          },
-          type: "time",
-          axisPointer: {
-            animation: true,
-            label: {
-              show: true,
-            },
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: "dashed",
-              opacity: 0.2,
-            },
-          },
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c}%",
+        },
+        legend: {
+          data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
         },
         series: [
           {
-            type: "themeRiver",
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 20,
-                shadowColor: "rgba(0, 0, 0, 0.8)",
+            type: "funnel",
+            left: "10%",
+            top: 60,
+            bottom: 20,
+            width: "95%",
+            min: 0,
+            max: 100,
+            minSize: "0%",
+            maxSize: "100%",
+            sort: "descending",
+            label: {
+              show: true,
+              position: "inside",
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: "solid",
               },
             },
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 1,
+            },
             data: [
-              ["2015/11/08", 10, "DQ"],
-              ["2015/11/09", 15, "DQ"],
-              ["2015/11/10", 35, "DQ"],
-              ["2015/11/11", 38, "DQ"],
-              ["2015/11/12", 22, "DQ"],
-              ["2015/11/13", 16, "DQ"],
-              ["2015/11/14", 7, "DQ"],
-              ["2015/11/15", 2, "DQ"],
-              ["2015/11/16", 17, "DQ"],
-              ["2015/11/17", 33, "DQ"],
-              ["2015/11/18", 40, "DQ"],
-              ["2015/11/19", 32, "DQ"],
-              ["2015/11/20", 26, "DQ"],
-              ["2015/11/21", 35, "DQ"],
-              ["2015/11/22", 40, "DQ"],
-              ["2015/11/23", 32, "DQ"],
-              ["2015/11/24", 26, "DQ"],
-              ["2015/11/25", 22, "DQ"],
-              ["2015/11/26", 16, "DQ"],
-              ["2015/11/27", 22, "DQ"],
-              ["2015/11/28", 10, "DQ"],
-              ["2015/11/08", 35, "TY"],
-              ["2015/11/09", 36, "TY"],
-              ["2015/11/10", 37, "TY"],
-              ["2015/11/11", 22, "TY"],
-              ["2015/11/12", 24, "TY"],
-              ["2015/11/13", 26, "TY"],
-              ["2015/11/14", 34, "TY"],
-              ["2015/11/15", 21, "TY"],
-              ["2015/11/16", 18, "TY"],
-              ["2015/11/17", 45, "TY"],
-              ["2015/11/18", 32, "TY"],
-              ["2015/11/19", 35, "TY"],
-              ["2015/11/20", 30, "TY"],
-              ["2015/11/21", 28, "TY"],
-              ["2015/11/22", 27, "TY"],
-              ["2015/11/23", 26, "TY"],
-              ["2015/11/24", 15, "TY"],
-              ["2015/11/25", 30, "TY"],
-              ["2015/11/26", 35, "TY"],
-              ["2015/11/27", 42, "TY"],
-              ["2015/11/28", 42, "TY"],
-              ["2015/11/08", 21, "SS"],
-              ["2015/11/09", 25, "SS"],
-              ["2015/11/10", 27, "SS"],
-              ["2015/11/11", 23, "SS"],
-              ["2015/11/12", 24, "SS"],
-              ["2015/11/13", 21, "SS"],
-              ["2015/11/14", 35, "SS"],
-              ["2015/11/15", 39, "SS"],
-              ["2015/11/16", 40, "SS"],
-              ["2015/11/17", 36, "SS"],
-              ["2015/11/18", 33, "SS"],
-              ["2015/11/19", 43, "SS"],
-              ["2015/11/20", 40, "SS"],
-              ["2015/11/21", 34, "SS"],
-              ["2015/11/22", 28, "SS"],
-              ["2015/11/23", 26, "SS"],
-              ["2015/11/24", 37, "SS"],
-              ["2015/11/25", 41, "SS"],
-              ["2015/11/26", 46, "SS"],
-              ["2015/11/27", 47, "SS"],
-              ["2015/11/28", 41, "SS"],
-              ["2015/11/08", 10, "QG"],
-              ["2015/11/09", 15, "QG"],
-              ["2015/11/10", 35, "QG"],
-              ["2015/11/11", 38, "QG"],
-              ["2015/11/12", 22, "QG"],
-              ["2015/11/13", 16, "QG"],
-              ["2015/11/14", 7, "QG"],
-              ["2015/11/15", 2, "QG"],
-              ["2015/11/16", 17, "QG"],
-              ["2015/11/17", 33, "QG"],
-              ["2015/11/18", 40, "QG"],
-              ["2015/11/19", 32, "QG"],
-              ["2015/11/20", 26, "QG"],
-              ["2015/11/21", 35, "QG"],
-              ["2015/11/22", 40, "QG"],
-              ["2015/11/23", 32, "QG"],
-              ["2015/11/24", 26, "QG"],
-              ["2015/11/25", 22, "QG"],
-              ["2015/11/26", 16, "QG"],
-              ["2015/11/27", 22, "QG"],
-              ["2015/11/28", 10, "QG"],
-              ["2015/11/08", 10, "SY"],
-              ["2015/11/09", 15, "SY"],
-              ["2015/11/10", 35, "SY"],
-              ["2015/11/11", 38, "SY"],
-              ["2015/11/12", 22, "SY"],
-              ["2015/11/13", 16, "SY"],
-              ["2015/11/14", 7, "SY"],
-              ["2015/11/15", 2, "SY"],
-              ["2015/11/16", 17, "SY"],
-              ["2015/11/17", 33, "SY"],
-              ["2015/11/18", 40, "SY"],
-              ["2015/11/19", 32, "SY"],
-              ["2015/11/20", 26, "SY"],
-              ["2015/11/21", 35, "SY"],
-              ["2015/11/22", 4, "SY"],
-              ["2015/11/23", 32, "SY"],
-              ["2015/11/24", 26, "SY"],
-              ["2015/11/25", 22, "SY"],
-              ["2015/11/26", 16, "SY"],
-              ["2015/11/27", 22, "SY"],
-              ["2015/11/28", 10, "SY"],
-              ["2015/11/08", 10, "DD"],
-              ["2015/11/09", 15, "DD"],
-              ["2015/11/10", 35, "DD"],
-              ["2015/11/11", 38, "DD"],
-              ["2015/11/12", 22, "DD"],
-              ["2015/11/13", 16, "DD"],
-              ["2015/11/14", 7, "DD"],
-              ["2015/11/15", 2, "DD"],
-              ["2015/11/16", 17, "DD"],
-              ["2015/11/17", 33, "DD"],
-              ["2015/11/18", 4, "DD"],
-              ["2015/11/19", 32, "DD"],
-              ["2015/11/20", 26, "DD"],
-              ["2015/11/21", 35, "DD"],
-              ["2015/11/22", 40, "DD"],
-              ["2015/11/23", 32, "DD"],
-              ["2015/11/24", 26, "DD"],
-              ["2015/11/25", 22, "DD"],
-              ["2015/11/26", 16, "DD"],
-              ["2015/11/27", 22, "DD"],
-              ["2015/11/28", 10, "DD"],
+              { value: 20, name: "教学评一体化课程" },
+              { value: 40, name: "已评价课程" },
+              { value: 60, name: "已提交作业课程" },
+              { value: 80, name: "设置评价课程" },
+              { value: 100, name: "课程总数" },
             ],
           },
         ],
@@ -201,9 +78,12 @@ export default {
         this.chartObj.setOption(this.option);
       });
     },
+  },
+  watch: {
+    
   },
   mounted() {
-    this.setChart(this.option);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
@@ -211,9 +91,6 @@ export default {
       }
     });
   },
-  created() {
-    this.setChart();
-  },
 };
 </script>
 

src/components/pages/dataBoardNew/course/chartList/teaFre.vue

@@ -12,11 +12,6 @@
 
 <script>
 export default {
-  props: {
-    monthArray: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
@@ -25,21 +20,13 @@ export default {
         course: [],
       },
       option: {
-        title: {
-          text: '授课频次',
-          textStyle: {
-            fontSize: 12,
-          },
-          padding: [10, 0, 0, 10]
-        },
         tooltip: {
-          trigger: "axis",
+          trigger: "item",
         },
         xAxis: {
           type: "category",
-          boundaryGap: true,
-          // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
-          data: [],
+          boundaryGap: false,
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         },
         yAxis: {
           type: "value",
@@ -53,22 +40,16 @@ export default {
         },
         series: [
           {
-            data:[],
-            // data: [400, 510, 510, 350, 320, 510],
-            symbolSize: 10,
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
             type: "line",
-            lineStyle: {
-              width: 3, // 设置线宽度
-              color: "#0E65F7", // 设置线颜色
-            },
-            areaStyle: {}
+            areaStyle: {},
           },
         ],
       },
     };
   },
   methods: {
-    setChart(option) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -78,51 +59,15 @@ export default {
         const chartObj = this.$echarts.init(
           this.$el.querySelector("#charts_canvas")
         );
-        this.option.xAxis.data = option.xdata;
-        this.option.series[0].data = option.course;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
   },
-  watch: {
-    monthArray: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.ooption = {
-          xdata: [],
-          course: [],
-        };
-        let _array = newValue;
-        for (var i = 0; i < _array.length; i++) {
-          this.ooption.xdata.push(_array[i].Month + "月");
-          this.ooption.course.push(_array[i].course);
-        }
-
-        if (!this.chartObj) {
-          this.setChart(this.ooption);
-        } else {
-          this.option.xAxis.data = this.ooption.xdata;
-          this.option.series[0].data = this.ooption.course;
-          this.chartObj.setOption(this.option);
-        }
-        this.$forceUpdate();
-      },
-    },
-  },
+  watch: {},
   mounted() {
-    this.ooption = {
-      xdata: [],
-      course: [],
-    };
-    let _array = this.monthArray;
-    for (var i = 0; i < _array.length; i++) {
-      this.ooption.xdata.push(_array[i].Month + "月");
-      this.ooption.course.push(_array[i].course);
-    }
-    this.setChart(this.ooption);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

src/components/pages/dataBoardNew/course/chartList/toolChart.vue

@@ -0,0 +1,91 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+            },
+            labelLine: {
+              show: true,
+            },
+            data: [
+              { value: 100, name: "思维类" },
+              { value: 150, name: "学科类" },
+              { value: 223, 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);
+      });
+    },
+  },
+  watch: {
+  },
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/course/chartList/toolUse.vue

@@ -12,54 +12,264 @@
 
 <script>
 export default {
-  props: {
-    toolArray: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
       option: {
         tooltip: {
-          trigger: "item",
+          position: "top",
         },
         grid: {
-          left: 0,
-          right: 0,
-          bottom: 0,
-          containLabel: true,
+          height: "50%",
+          top: "10%",
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "12a",
+            "1a",
+            "2a",
+            "3a",
+            "4a",
+            "5a",
+            "6a",
+            "7a",
+            "8a",
+            "9a",
+            "10a",
+            "11a",
+            "12p",
+            "1p",
+            "2p",
+            "3p",
+            "4p",
+            "5p",
+            "6p",
+            "7p",
+            "8p",
+            "9p",
+            "10p",
+            "11p",
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "星期一",
+            "星期二",
+            "星期三",
+            "星期四",
+            "星期五",
+            "星期六",
+            "星期日",
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        visualMap: {
+          min: 0,
+          max: 10,
+          calculable: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: "15%",
         },
         series: [
           {
-            type: "pie",
-            radius: ["40%", "70%"],
+            name: "Punch Card",
+            type: "heatmap",
+            data: [
+              [0, 0, 5],
+              [0, 1, 1],
+              [0, 2, 0],
+              [0, 3, 0],
+              [0, 4, 0],
+              [0, 5, 0],
+              [0, 6, 0],
+              [0, 7, 0],
+              [0, 8, 0],
+              [0, 9, 0],
+              [0, 10, 0],
+              [0, 11, 2],
+              [0, 12, 4],
+              [0, 13, 1],
+              [0, 14, 1],
+              [0, 15, 3],
+              [0, 16, 4],
+              [0, 17, 6],
+              [0, 18, 4],
+              [0, 19, 4],
+              [0, 20, 3],
+              [0, 21, 3],
+              [0, 22, 2],
+              [0, 23, 5],
+              [1, 0, 7],
+              [1, 1, 0],
+              [1, 2, 0],
+              [1, 3, 0],
+              [1, 4, 0],
+              [1, 5, 0],
+              [1, 6, 0],
+              [1, 7, 0],
+              [1, 8, 0],
+              [1, 9, 0],
+              [1, 10, 5],
+              [1, 11, 2],
+              [1, 12, 2],
+              [1, 13, 6],
+              [1, 14, 9],
+              [1, 15, 11],
+              [1, 16, 6],
+              [1, 17, 7],
+              [1, 18, 8],
+              [1, 19, 12],
+              [1, 20, 5],
+              [1, 21, 5],
+              [1, 22, 7],
+              [1, 23, 2],
+              [2, 0, 1],
+              [2, 1, 1],
+              [2, 2, 0],
+              [2, 3, 0],
+              [2, 4, 0],
+              [2, 5, 0],
+              [2, 6, 0],
+              [2, 7, 0],
+              [2, 8, 0],
+              [2, 9, 0],
+              [2, 10, 3],
+              [2, 11, 2],
+              [2, 12, 1],
+              [2, 13, 9],
+              [2, 14, 8],
+              [2, 15, 10],
+              [2, 16, 6],
+              [2, 17, 5],
+              [2, 18, 5],
+              [2, 19, 5],
+              [2, 20, 7],
+              [2, 21, 4],
+              [2, 22, 2],
+              [2, 23, 4],
+              [3, 0, 7],
+              [3, 1, 3],
+              [3, 2, 0],
+              [3, 3, 0],
+              [3, 4, 0],
+              [3, 5, 0],
+              [3, 6, 0],
+              [3, 7, 0],
+              [3, 8, 1],
+              [3, 9, 0],
+              [3, 10, 5],
+              [3, 11, 4],
+              [3, 12, 7],
+              [3, 13, 14],
+              [3, 14, 13],
+              [3, 15, 12],
+              [3, 16, 9],
+              [3, 17, 5],
+              [3, 18, 5],
+              [3, 19, 10],
+              [3, 20, 6],
+              [3, 21, 4],
+              [3, 22, 4],
+              [3, 23, 1],
+              [4, 0, 1],
+              [4, 1, 3],
+              [4, 2, 0],
+              [4, 3, 0],
+              [4, 4, 0],
+              [4, 5, 1],
+              [4, 6, 0],
+              [4, 7, 0],
+              [4, 8, 0],
+              [4, 9, 2],
+              [4, 10, 4],
+              [4, 11, 4],
+              [4, 12, 2],
+              [4, 13, 4],
+              [4, 14, 4],
+              [4, 15, 14],
+              [4, 16, 12],
+              [4, 17, 1],
+              [4, 18, 8],
+              [4, 19, 5],
+              [4, 20, 3],
+              [4, 21, 7],
+              [4, 22, 3],
+              [4, 23, 0],
+              [5, 0, 2],
+              [5, 1, 1],
+              [5, 2, 0],
+              [5, 3, 3],
+              [5, 4, 0],
+              [5, 5, 0],
+              [5, 6, 0],
+              [5, 7, 0],
+              [5, 8, 2],
+              [5, 9, 0],
+              [5, 10, 4],
+              [5, 11, 1],
+              [5, 12, 5],
+              [5, 13, 10],
+              [5, 14, 5],
+              [5, 15, 7],
+              [5, 16, 11],
+              [5, 17, 6],
+              [5, 18, 0],
+              [5, 19, 5],
+              [5, 20, 3],
+              [5, 21, 4],
+              [5, 22, 2],
+              [5, 23, 0],
+              [6, 0, 1],
+              [6, 1, 0],
+              [6, 2, 0],
+              [6, 3, 0],
+              [6, 4, 0],
+              [6, 5, 0],
+              [6, 6, 0],
+              [6, 7, 0],
+              [6, 8, 0],
+              [6, 9, 0],
+              [6, 10, 1],
+              [6, 11, 0],
+              [6, 12, 2],
+              [6, 13, 1],
+              [6, 14, 3],
+              [6, 15, 4],
+              [6, 16, 0],
+              [6, 17, 0],
+              [6, 18, 0],
+              [6, 19, 0],
+              [6, 20, 1],
+              [6, 21, 2],
+              [6, 22, 2],
+              [6, 23, 6],
+            ].map(function (item) {
+              return [item[1], item[0], item[2] || "-"];
+            }),
+            label: {
+              show: true,
+            },
             emphasis: {
-              label: {
-                show: true,
-                fontSize: 14,
-                fontWeight: "bold",
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
               },
             },
-            labelLine: {
-              show: true,
-            },
-            // data: [
-            //   { value: 123, name: "思维类" },
-            //   { value: 200, name: "评价类" },
-            //   { value: 250, name: "学科类" },
-            //   { value: 450, name: "其他类" },
-            //   { value: 300, name: "逻辑类" },
-            //   { value: 100, name: "动作类" },
-            // ],
-            data: [],
           },
         ],
       },
     };
   },
   methods: {
-    setChart(arrArray) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -69,33 +279,15 @@ export default {
         const chartObj = this.$echarts.init(
           this.$el.querySelector("#charts_canvas")
         );
-        this.option.series[0].data = arrArray;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
   },
-  watch: {
-    toolArray: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        let _array = newValue;
-
-        if (!this.chartObj) {
-          this.setChart(_array);
-        } else {
-          this.option.series[0].data = _array;
-          this.chartObj.setOption(this.option);
-        }
-        this.$forceUpdate();
-      },
-    },
-  },
+  watch: {},
   mounted() {
-    let _array = this.toolArray;
-    this.setChart(_array);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

src/components/pages/dataBoardNew/course/chartList/workNum.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="data_body">
+  <div class="data_body" style="height: calc(100% - 100px)">
     <div style="width: 100%; height: 100%">
       <div
         id="charts_canvas"
@@ -12,11 +12,6 @@
 
 <script>
 export default {
-  props: {
-    workNumList: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
@@ -24,43 +19,38 @@ export default {
         data: [],
       },
       option: {
-        xAxis: {
-          name: "任务数量",
-          nameTextStyle: {
-            padding: [25, 0, 0, 0],
-            verticalAlign:'top'
-          },
-          nameGap: -45
-        },
-        grid: {
-          top: "10%",
-          left: "5%",
-          right: "5%",
-          bottom: "6%",
-          containLabel: true,
-        },
-        yAxis: {
-          name: "作业提交数量",
-        },
-        color: ["#3681FC"],
         tooltip: {
-          formatter: function (params) {
-            return (
-              params.marker +
-              params.data[2] +
-              "<br/>" +
-              "任务数量：" +
-              params.data[0] +
-              "<br/>" +
-              "作业提交数量：" +
-              params.data[1]
-            );
-          },
+          trigger: "item",
         },
+        xAxis: {},
+        yAxis: {},
         series: [
           {
-            symbolSize: 8,
-            data: [],
+            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],
+            ],
             type: "scatter",
           },
         ],
@@ -68,7 +58,7 @@ export default {
     };
   },
   methods: {
-    setChart(option) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -79,47 +69,23 @@ 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.setArray(this.workNumList);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

src/components/pages/dataBoardNew/course/chartList/workTime.vue

@@ -1,75 +1,51 @@
 <template>
   <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    workList: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
       ooption: {
-        xdata: [],
-        type: [],
+        data: [],
       },
       option: {
-        title: {
-          text: '授课时长',
-          textStyle: {
-            fontSize: 12,
-          },
-          padding: [10, 0, 0, 10]
-        },
         tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          top: "10%",
-          left: "5%",
-          right: "5%",
-          bottom: "5%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          boundaryGap: [0, 0.01],
-        },
-        yAxis: {
-          type: "category",
-          // data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
-          data: [],
+          trigger: "item",
         },
         series: [
           {
-            name: "授课时长（时）",
-            type: "bar",
-            // data: [60, 110, 25, 130, 65, 80],
-            data: [],
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
             itemStyle: {
-              normal: {
-                color: function (params) {
-                  return "#106bff";
-                },
-              },
+              borderRadius: 10,
+            },
+            labelLine: {
+              show: true,
             },
+            data: [
+              { value: 100, name: "2人以下" },
+              { value: 150, name: "3-4人" },
+              { value: 223, name: "5-6人" },
+              { value: 216, name: "7人以上" }
+            ],
           },
         ],
       },
     };
   },
   methods: {
-    setChart(option) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -77,10 +53,9 @@ export default {
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
         const chartObj = this.$echarts.init(
+          //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
-        this.option.yAxis.data = option.xdata;
-        this.option.series[0].data = option.type;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
@@ -88,42 +63,9 @@ export default {
     },
   },
   watch: {
-    workList: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.ooption = {
-          xdata: [],
-          type: [],
-        };
-        let _array = newValue;
-        for (var i = 0; i < _array.length; i++) {
-          this.ooption.xdata.push(_array[i].name);
-          this.ooption.type.push(_array[i].time);
-        }
-
-        if (!this.chartObj) {
-          this.setChart(this.ooption);
-        } else {
-          this.option.yAxis.data = this.ooption.xdata;
-          this.option.series[0].data = this.ooption.type;
-          this.chartObj.setOption(this.option);
-        }
-        this.$forceUpdate();
-      },
-    },
   },
   mounted() {
-    this.ooption = {
-      xdata: [],
-      type: [],
-    };
-    let _array = this.workList;
-    for (var i = 0; i < _array.length; i++) {
-      this.ooption.xdata.push(_array[i].name);
-      this.ooption.type.push(_array[i].time);
-    }
-    this.setChart(this.ooption);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

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

@@ -1,131 +1,350 @@
 <template>
-  <div class="body1" v-loading="isLoading">
+  <div class="body1">
     <!-- 课程数据 -->
     <div class="left">
       <div class="top">
-        <div class="titleBox">
-          <div class="title">授课频次</div>
+        <div class="titleBox" style="justify-content: space-between">
+          <div class="title">基础概况</div>
+          <el-select v-model="cType7" class="selectBox" style="width: 110px">
+            <el-option label="全部课程" value="全部课程"></el-option>
+          </el-select>
         </div>
         <div class="dataBox">
           <div class="teafre">
             <div class="teaLeft">
-              <div>累计授课次数</div>
-              <div>{{ wCount }}</div>
+              <div>课程总数</div>
+              <div>15310</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>本月新增课程环比</div>
+              <div>0.9%</div>
+            </div>
+          </div>
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>模板课程总数</div>
+              <div>1138</div>
             </div>
             <div class="teaLeft teaRigth">
-              <div>相对增幅百分比</div>
-              <div>{{ reInc }}%</div>
+              <div>本月新增课程总数</div>
+              <div>18</div>
             </div>
           </div>
-          <TeaFre
-            style="height: calc(100% - 62px)"
-            :monthArray="groupedArrayByMonth"
-          ></TeaFre>
+          <TeaFre style="height: calc(100% - 140px)"></TeaFre>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
-          <div class="title">工具使用</div>
+          <div
+            class="title"
+            :class="{ isClick: skType == 0 }"
+            @click="skType = 0"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            授课时长
+          </div>
+          <div
+            class="title"
+            :class="{ isClick: skType == 1 }"
+            @click="skType = 1"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            授课频次
+          </div>
+          <el-select v-model="cType" class="selectBox" style="width: 110px">
+            <el-option label="全部年级" value="全部年级"></el-option>
+            <el-option label="一年级" value="一年级"></el-option>
+            <el-option label="二年级" value="二年级"></el-option>
+            <el-option label="三年级" value="三年级"></el-option>
+          </el-select>
+          <div class="timeDiv">
+            <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
+            <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
+            <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
+          </div>
+        </div>
+        <div class="teafre" v-if="!oType">
+          <div class="teaLeft">
+            <div>授课频次</div>
+            <div>153</div>
+          </div>
+          <div class="teaLeft">
+            <div>课程开展总数</div>
+            <div>4</div>
+          </div>
+          <div class="teaLeft teaRigth">
+            <div>课程评价授课次数</div>
+            <div>4</div>
+          </div>
+        </div>
+        <div class="teafre" v-if="oType">
+          <div class="teaLeft">
+            <div>累计时长</div>
+            <div>110</div>
+          </div>
+          <div class="teaLeft">
+            <div>课程实施总数</div>
+            <div>4</div>
+          </div>
+          <div class="teaLeft teaRigth">
+            <div>课程评价时长</div>
+            <div>4</div>
+          </div>
         </div>
         <div class="dataBox">
-          <ToolUse
-            style="height: calc(100% - 40px)"
-            :toolArray="toolList"
-          ></ToolUse>
+          <ToolUse style="height: calc(100% - 120px)" v-if="!oType"></ToolUse>
+          <Bar style="height: calc(100% - 120px)" v-if="oType"></Bar>
+          <div class="otherCss">
+            <div v-if="!oType">切换为柱状图</div>
+            <div v-if="oType">切换为热力图</div>
+            <div class="otherImg" @click="otherEchart">
+              <img src="../../../../assets/icon/other.png" alt="" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <div class="center">
       <div class="top">
         <div class="titleBox">
-          <div class="title">课程数量</div>
-        </div>
-        <div class="dataBox middleBox">
-          <div class="halfBox">
-            <div class="teafre">
-              <div class="teaMiddle cNum">
-                <div>课程总数</div>
-                <div>{{ typeCourseCount }}</div>
-              </div>
-              <div class="teaMiddle tNum">
-                <div>类别总数</div>
-                <div>{{ typeCount }}</div>
-              </div>
-              <div class="teaMiddle tSum">
-                <div>类别平均</div>
-                <div>{{ (typeCourseCount / typeCount).toFixed(0) }}</div>
-              </div>
-            </div>
-            <CateRank
-              style="
-                height: calc(100% - 72px);
-                margin-top: 10px;
-                overflow: auto;
-              "
-              :courseNumberArray="courseNumberArray2"
-            ></CateRank>
+          <div
+            class="title"
+            :class="{ isClick: courseType == 0 }"
+            @click="courseType = 0"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            课程分布
           </div>
-          <div class="halfBox middleBox" style="align-items: flex-start">
-            <WorkNum
-              style="height: calc(100% - 40px)"
-              :workNumList="workNumList"
-              @openCourse="openCourse"
-            ></WorkNum>
+          <div
+            class="title"
+            :class="{ isClick: courseType == 1 }"
+            @click="courseType = 1"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            课程总数变化
           </div>
         </div>
+        <div class="dataBox">
+          <CateRank
+            v-if="courseType == 0"
+            style="height: calc(100%)"
+          ></CateRank>
+          <CourseNum
+            v-if="courseType == 1"
+            style="height: calc(100%)"
+          ></CourseNum>
+        </div>
       </div>
       <div class="bottom">
-        <div class="titleBox">
-          <div class="title">课程时间分布</div>
+        <div class="titleBox" style="justify-content: space-between">
+          <div class="title">课程实施程度</div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <div v-if="shType">
+              <el-select
+                v-model="cType1"
+                class="selectBox"
+                style="width: 110px"
+              >
+                <el-option label="全部年级" value="全部年级"></el-option>
+                <el-option label="一年级" value="一年级"></el-option>
+                <el-option label="二年级" value="二年级"></el-option>
+                <el-option label="三年级" value="三年级"></el-option>
+              </el-select>
+              <el-select
+                v-model="cType2"
+                class="selectBox"
+                style="width: 110px"
+              >
+                <el-option label="全部学科" value="全部学科"></el-option>
+                <el-option label="语文" value="语文"></el-option>
+                <el-option label="数学" value="数学"></el-option>
+                <el-option label="英语" value="英语"></el-option>
+              </el-select>
+              <el-select
+                v-model="cType3"
+                class="selectBox"
+                style="width: 110px"
+              >
+                <el-option label="全部主题" value="全部主题"></el-option>
+                <el-option label="社会" value="社会"></el-option>
+                <el-option label="人文" value="人文"></el-option>
+                <el-option label="自然" value="自然"></el-option>
+              </el-select>
+            </div>
+            <div class="timeDiv">
+              <div @click="sType = 0" :class="{ isClick: sType == 0 }">周</div>
+              <div @click="sType = 1" :class="{ isClick: sType == 1 }">月</div>
+              <div @click="sType = 2" :class="{ isClick: sType == 2 }">
+                学期
+              </div>
+            </div>
+          </div>
         </div>
         <div class="dataBox">
-          <CourseTime style="height: calc(100% - 40px)"></CourseTime>
+          <div class="allBox" v-if="!shType" style="height: calc(100% - 30px)">
+            <div class="allBox_left">
+              <CourseTime v-if="!shType"></CourseTime>
+            </div>
+            <div class="allBox_right">
+              <div class="depth">
+                <span>设置评价</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="80"
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>已提交作业</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="80"
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>已评价课程</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="80"
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+              <div class="depth">
+                <span>教学评一体化</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="80"
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="teafre" v-if="shType">
+            <div class="teaLeft">
+              <div>平台实施课程总数</div>
+              <div>18</div>
+            </div>
+            <div class="teaLeft">
+              <div>平台实施课程占比</div>
+              <div>80%</div>
+            </div>
+            <div class="teaLeft">
+              <div>课程平均任务数量</div>
+              <div>18</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>课程平均作业数量</div>
+              <div>18</div>
+            </div>
+          </div>
+          <WorkNum v-if="shType"></WorkNum>
+          <div class="otherCss">
+            <div v-if="!shType">转换为散点图</div>
+            <div v-if="shType">转换为漏斗图</div>
+            <div class="otherImg" @click="shEchart">
+              <img src="../../../../assets/icon/other.png" alt="" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <div class="right">
       <div class="top" style="border-radius: 5px">
-        <div class="titleBox">
-          <div class="title">课程分析</div>
-          <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>
+        <div class="titleBox" style="justify-content: space-between">
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <div
+              class="title"
+              :class="{ isClick: toolType == 0 }"
+              @click="toolType = 0"
+              style="cursor: pointer; padding: 0 0 5px 0"
+            >
+              课程占比
+            </div>
+            <div
+              class="title"
+              :class="{ isClick: toolType == 1 }"
+              @click="toolType = 1"
+              style="cursor: pointer; padding: 0 0 5px 0"
+            >
+              工具使用
+            </div>
+          </div>
+          <el-select v-model="cType4" class="selectBox" style="width: 110px" v-if="toolType == 0">
+            <el-option label="按年级" value="按年级"></el-option>
+            <el-option label="按学科" value="按学科"></el-option>
+            <el-option label="按主题" value="按主题"></el-option>
           </el-select>
+          <div v-if="toolType == 1" style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            ">
+            <el-select v-model="cType5" class="selectBox" style="width: 110px">
+            <el-option label="全部学科" value="全部学科"></el-option>
+            <el-option label="语文" value="语文"></el-option>
+            <el-option label="数学" value="数学"></el-option>
+          </el-select>
+          <el-select v-model="cType6" class="selectBox" style="width: 110px">
+            <el-option label="全部年级" value="全部年级"></el-option>
+            <el-option label="一年级" value="一年级"></el-option>
+            <el-option label="二年级" value="二年级"></el-option>
+          </el-select>
+          </div>
         </div>
         <div class="dataBox">
-          <CourseAna
-            style="height: calc(100% - 40px)"
-            :courseNumberArray="courseNumberArray"
-            @openCourse="openCourse2"
-          ></CourseAna>
+          <CourseAna style="height: calc(100% - 40px)" v-if="toolType == 0"></CourseAna>
+          <ToolChart style="height: calc(100% - 40px)" v-if="toolType == 1"></ToolChart>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
-          <div class="title">授课时长</div>
-          <el-select v-model="lType" @change="typeChange1" class="selectBox">
-            <el-option label="年级" value="grade"></el-option>
-            <el-option label="主题" value="theme"></el-option>
-            <el-option label="学科" value="subject"></el-option>
-          </el-select>
+          <div class="title">课程协同情况</div>
         </div>
         <div class="dataBox">
-          <div class="teafre" style="margin: 10px 0 0 0">
-            <div class="teaLeft">
-              <div>累计时长</div>
-              <div>{{ allTime }}小时</div>
-            </div>
-            <div class="teaLeft teaRigth">
-              <div>学生在线平均时长</div>
-              <div>{{ sumTime }}小时</div>
+          <WorkTime style="height: calc(100% - 72px)" v-if="xtType"></WorkTime>
+          <div class="otherCss">
+            <div v-if="!xtType">转换为人员协同</div>
+            <div v-if="xtType">转换为学科协同</div>
+            <div class="otherImg" @click="xtEchart">
+              <img src="../../../../assets/icon/other.png" alt="" />
             </div>
           </div>
-          <WorkTime
-            style="height: calc(100% - 72px)"
-            :workList="tedurArray"
-          ></WorkTime>
         </div>
       </div>
     </div>
@@ -140,6 +359,9 @@ import WorkNum from "./chartList/workNum.vue";
 import CourseTime from "./chartList/courseTime.vue";
 import CourseAna from "./chartList/courseAna.vue";
 import WorkTime from "./chartList/workTime.vue";
+import Bar from "./chartList/bar.vue";
+import CourseNum from "./chartList/courseNum.vue";
+import ToolChart from "./chartList/toolChart.vue";
 export default {
   components: {
     TeaFre,
@@ -149,6 +371,9 @@ export default {
     CourseTime,
     CourseAna,
     WorkTime,
+    Bar,
+    CourseNum,
+    ToolChart,
   },
   props: {
     oid: {
@@ -160,432 +385,35 @@ export default {
   },
   data() {
     return {
-      isLoading: false,
-      wCount: 0,
-      cCount: 0,
-      groupedArrayByMonth: [],
-      toolList: [],
-      reInc: 0,
-      cType: "",
-      lType: "grade",
-      tedurArray: [],
-      classList: [],
-      subjectList: [],
-      themeList: [],
-      typeCount: 0,
-      typeCourseCount: 0,
-      courseNumberArray: [],
-      courseNumberArray2: [],
-      gradeArray: [],
-      subjectArray: [],
-      themeArray: [],
-      allArray: [],
-      workNumList: [],
-      allTime: 0,
-      sumTime: 0,
-      studentNum: 0,
+      cType: "全部年级",
+      cType1: "全部年级",
+      cType2: "全部学科",
+      cType3: "全部主题",
+      cType4: "按年级",
+      cType5: "全部学科",
+      cType6: "全部年级",
+      cType7: "全部课程",
+      toolType: 0,
+      tType: 0,
+      skType: 0,
+      courseType: 0,
+      sType: 0,
+      oType: false,
+      shType: false,
+      xtType: false,
     };
   },
-  mounted() {
-    this.getData();
-  },
+  mounted() {},
   methods: {
-    openCourse(cid) {
-      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
-    },
-    openCourse2(index) {
-      console.log(index);
-      // console.log(this.courseNumberArray);
-      let id = this.courseNumberArray[index].typeid;
-      let typea = "";
-      let typeb = "";
-      let typed = "";
-      // console.log(this.gradeArray);
-      // console.log(this.subjectArray);
-      // console.log(this.themeArray);
-      let key = 0;
-      for (key in this.gradeArray) {
-        if (this.gradeArray.hasOwnProperty.call(this.gradeArray, key)) {
-          const element = this.gradeArray[key];
-          if (element.typeid == id) {
-            typea = id;
-          }
-        }
-      }
-      for (key in this.subjectArray) {
-        if (this.subjectArray.hasOwnProperty.call(this.subjectArray, key)) {
-          const element = this.subjectArray[key];
-          if (element.typeid == id) {
-            typed = id;
-          }
-        }
-      }
-      for (key in this.themeArray) {
-        if (this.themeArray.hasOwnProperty.call(this.themeArray, key)) {
-          const element = this.themeArray[key];
-          if (element.typeid == id) {
-            typeb = id;
-          }
-        }
-      }
-      window.parent.postMessage(
-        {
-          tools: "openCourse",
-          typea: typea || "",
-          typeb: typeb || "",
-          typed: typed || "",
-        },
-        "*"
-      );
-    },
-    typeCourseCountCalu() {
-      this.courseNumberArray2 = this.allArray;
-      this.typeCount = this.courseNumberArray2.length;
-      let course = [];
-      for (var i = 0; i < this.courseNumberArray2.length; i++) {
-        let _array = this.courseNumberArray2[i].array;
-        for (var j = 0; j < _array.length; j++) {
-          console.log(_array[j]);
-          if (course.indexOf(_array[j]) == -1) {
-            course.push(_array[j]);
-          }
-        }
-      }
-      this.typeCourseCount = course.length;
-    },
-    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();
+    otherEchart() {
+      this.oType = !this.oType;
     },
-    typeChange1() {
-      var a = []
-      if (this.lType == "grade") {
-        a = this.classList;
-      } else if (this.lType == "subject") {
-        a = this.subjectList;
-      } else {
-        a = this.themeList;
-      }
-      this.tedurArray = a;
-      var time = 0;
-      for(var i =0;i<a.length;i++){
-        if(a[i].time){
-          time += a[i].time;
-        }
-      }
-      this.allTime = time;
-      this.sumTime = Math.ceil(time / this.studentNum);
-      this.$forceUpdate();
+    shEchart() {
+      this.shType = !this.shType;
     },
-    getData() {
-      this.isLoading = true;
-      let params = [
-        {
-          oid: this.oid,
-          org: this.org,
-        },
-      ];
-      this.ajax
-        .post(this.$store.state.api + "selectDataBoardCourse", params)
-        .then((res) => {
-          this.isLoading = false;
-          this.wCount = res.data[0].length;
-          this.cCount = res.data[1].length;
-          var workArray = res.data[0];
-          var courseList = res.data[1];
-          var tList = res.data[2];
-          var classList = res.data[3]; //年级数组
-          var subjectList = res.data[4]; //学科数组
-          var themeList = res.data[5]; //主题数组
-          let _course = res.data[6]; //课程
-          let _grade = res.data[3]; //年级
-          let _subject = res.data[4]; //学科
-          var _workCourse = res.data[7]; //带作业的课程
-          this.studentNum = res.data[8].length; //学生总数
-          _subject.push({ name: "其他" });
-          var cList = [];
-          //将数据根据time里面的月份分成多个数组
-          var groupedArrayByMonth = [];
-          const date = new Date();
-          var Month = date.getMonth() + 1;
-          var Year = date.getFullYear();
-          for (var i = Month; i > Month - 6; i--) {
-            if (i <= 0) {
-              groupedArrayByMonth.push({
-                Year: Year - 1,
-                Month: 12 + i,
-                course: 0,
-              });
-            } else {
-              groupedArrayByMonth.push({
-                Month: i,
-                Year: Year,
-                course: 0,
-              });
-            }
-          }
-          groupedArrayByMonth = groupedArrayByMonth.reverse();
-
-          for (var i = 0; i < workArray.length; i++) {
-            let _date = new Date(workArray[i].time);
-            var _month = _date.getMonth() + 1;
-            var _year = _date.getFullYear();
-            for (var j = 0; j < groupedArrayByMonth.length; j++) {
-              if (
-                _month == groupedArrayByMonth[j].Month &&
-                _year == groupedArrayByMonth[j].Year
-              ) {
-                groupedArrayByMonth[j].course++;
-                break;
-              }
-            }
-          }
-          if (
-            groupedArrayByMonth[groupedArrayByMonth.length - 1].course == 0 ||
-            groupedArrayByMonth[groupedArrayByMonth.length - 2].course == 0
-          ) {
-            this.reInc = 0;
-          } else {
-            this.reInc = (
-              (groupedArrayByMonth[groupedArrayByMonth.length - 1].course /
-                groupedArrayByMonth[groupedArrayByMonth.length - 2].course) *
-              100
-            ).toFixed(1);
-          }
-          this.groupedArrayByMonth = groupedArrayByMonth;
-          for (var i = 0; i < courseList.length; i++) {
-            cList.push(JSON.parse(courseList[i].chapters));
-          }
-          var toolList = [
-            [10, 65], //互动类
-            [7, 1, 52, 3, 48], //思维类
-            [49], //协作类
-            [4, 45, 15, 16, 50, 41, 47], //测评类
-            [40], //评价类
-            [18, 21, 22, 23, 24, 32, 57, 63], //编程类
-            [28, 31, 39, 66, 67, 68], //学科类
-          ];
-          var toolAllArray = [
-            { name: "互动类", value: 0 },
-            { name: "思维类", value: 0 },
-            { name: "协作类", value: 0 },
-            { name: "测评类", value: 0 },
-            { name: "评价类", value: 0 },
-            { name: "编程类", value: 0 },
-            { name: "学科类", value: 0 },
-          ];
-          for (var p = 0; p < toolList.length; p++) {
-            for (var i = 0; i < cList.length; i++) {
-              for (var j = 0; j < cList[i].length; j++) {
-                for (
-                  var k = 0;
-                  k < cList[i][j].chapterInfo[0].taskJson.length;
-                  k++
-                ) {
-                  for (
-                    var q = 0;
-                    q <
-                    cList[i][j].chapterInfo[0].taskJson[k].toolChoose.length;
-                    q++
-                  ) {
-                    if (
-                      toolList[p].indexOf(
-                        cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
-                          .tool[0]
-                      ) != -1
-                    ) {
-                      toolAllArray[p].value++;
-                    }
-                  }
-                }
-              }
-            }
-          }
-          for(var i = 0;i<toolAllArray.length;i++){
-            if(toolAllArray[i].value == 0){
-              toolAllArray.splice(i,1)
-            }
-          }
-          this.toolList = toolAllArray;
-          var courseJson = Object.values(
-            tList.reduce(function (acc, obj) {
-              if (!acc[obj.courseid]) {
-                acc[obj.courseid] = { ...obj };
-                acc[obj.courseid].typeid = [acc[obj.courseid].typeid];
-              } else {
-                if (!acc[obj.courseid].typeid.includes(obj.typeid)) {
-                  acc[obj.courseid].typeid.push(obj.typeid);
-                }
-                acc[obj.courseid].text =
-                  parseInt(acc[obj.courseid].text) + parseInt(obj.text);
-              }
-              return acc;
-            }, {})
-          ).map(function (obj) {
-            var totalTime = parseInt(obj.text);
-            obj.text = (totalTime / (60 * 60)).toFixed(2);
-            return obj;
-          });
-
-          for (var i = 0; i < courseJson.length; i++) {
-            for (var j = 0; j < classList.length; j++) {
-              if (courseJson[i].typeid.indexOf(classList[j].id) != -1) {
-                if (classList[j].time && courseJson[i].text) {
-                  classList[j].time += parseInt(courseJson[i].text);
-                } else if (courseJson[i].text) {
-                  classList[j].time = parseInt(courseJson[i].text);
-                }
-              }
-            }
-            for (var k = 0; k < subjectList.length; k++) {
-              if (courseJson[i].typeid.indexOf(subjectList[k].id) != -1) {
-                if (subjectList[k].time && courseJson[i].text) {
-                  subjectList[k].time += parseInt(courseJson[i].text);
-                } else if (courseJson[i].text) {
-                  subjectList[k].time = parseInt(courseJson[i].text);
-                }
-              }
-            }
-            for (var l = 0; l < themeList.length; l++) {
-              if (courseJson[i].typeid.indexOf(themeList[l].id) != -1) {
-                if (themeList[l].time && courseJson[i].text) {
-                  themeList[l].time += parseInt(courseJson[i].text);
-                } else if (courseJson[i].text) {
-                  themeList[l].time = parseInt(courseJson[i].text);
-                }
-              }
-            }
-          }
-          this.classList = classList;
-          this.subjectList = subjectList;
-          this.themeList = themeList;
-          var a = [];
-          if (this.lType == "grade") {
-            this.tedurArray = classList;
-          } else if (this.lType == "subject") {
-            this.tedurArray = subjectList;
-          } else {
-            this.tedurArray = themeList;
-          }
-          var time = 0;
-          a = this.tedurArray;
-          for(var i =0;i<a.length;i++){
-            if(a[i].time){
-              time += a[i].time;
-            }
-          }
-          this.allTime = time;
-          this.sumTime = Math.ceil(time / this.studentNum);
-
-          this.typeCount =
-            classList.length + subjectList.length + themeList.length;
-          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 < themeList.length; i++) {
-            _themeArray.push({
-              name: themeList[i].name,
-              typeid: themeList[i].id,
-              course: 0,
-              array: [],
-            });
-            for (var z = 0; z < _course.length; z++) {
-              if (_course[z].typeid == themeList[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.typeCourseCountCalu();
-          this.typeChange();
-          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;
-                }
-              }
-            }
-          }
-          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) {
-                wList[a[j]].work++;
-              }
-            }
-          }
-          var workNumList = Object.values(wList).map((item) => [
-            item.task,
-            item.work,
-            item.title,
-            item.cid,
-          ]);
-          this.workNumList = workNumList;
-        })
-        .catch((err) => {
-          this.isLoading = false;
-          console.error(err);
-        });
+    xtEchart(){
+      this.xtType = !this.xtType;
     },
-    // format(percentage) {
-    //   return percentage;
-    // },
   },
 };
 </script>
@@ -666,6 +494,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 0 15px;
+  box-sizing: border-box;
   width: 100%;
 }
 
@@ -682,12 +511,12 @@ export default {
 }
 
 .title {
-  font-weight: bold;
   color: #060e17;
-  font-size: 18px;
+  margin-right: 10px;
 }
 
 .teafre {
+  margin: 5px 0;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -714,18 +543,10 @@ export default {
 }
 .teaLeft {
   width: 95%;
-  background: linear-gradient(
-    180deg,
-    rgba(224, 234, 251, 0.2) 0%,
-    rgba(54, 130, 252, 0.3) 100%
-  );
+  background: #f3f8fd;
 }
 .teaRigth {
-  background: linear-gradient(
-    180deg,
-    rgb(211, 246, 228, 0.2) 0%,
-    rgb(23, 196, 105, 0.3) 100%
-  ) !important;
+  background: #f3f8fd;
 }
 
 .cNum {
@@ -783,4 +604,78 @@ export default {
 .selectBox >>> .el-input__icon {
   line-height: 30px;
 }
+
+.timeDiv {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 0 0 15px;
+}
+
+.timeDiv > div {
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.isClick {
+  color: #1684fc;
+  border-bottom: 2px solid #1684fc;
+  box-sizing: border-box;
+}
+
+.otherCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+.otherImg {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+.otherImg > img {
+  width: 100%;
+  height: 100%;
+}
+.allBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.allBox_left {
+  width: 30%;
+  height: 100%;
+}
+.allBox_right {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 70%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.depth {
+  width: calc(100% / 4 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.depth > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+.depth > div:nth-child(1) {
+}
 </style>

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

@@ -0,0 +1,86 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "value",
+          data: [0, 50, 100, 150, 200, 250],
+        },
+        yAxis: {
+          type: "category",
+          data: ["五年级", "四年级", "三年级", "二年级", "一年级"],
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

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

@@ -1,81 +1,82 @@
 <template>
   <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#E0EAFB',color: '#000' }"
-        :row-class-name="tableRowClassName" class="tableClass">
-        <el-table-column label="排行" min-width="50" align="center">
-          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
-        </el-table-column>
-        <el-table-column prop="name" label="类别名称" min-width="80" align="center">
-        </el-table-column>
-        <el-table-column prop="sum" label="课程数量" min-width="80" align="center">
-        </el-table-column>
-      </el-table>
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    courseNumberArray: {
-      type: Array,
-    },
-  },
   data() {
     return {
-      tableData: [
-        // { rank: "1", name: "一年级", sum: "2356" },
-        // { rank: "2", name: "二年级", sum: "2256" },
-        // { rank: "3", name: "三年级", sum: "2156" },
-        // { rank: "4", name: "四年级", sum: "1356" },
-        // { rank: "5", name: "五年级", sum: "1256" },
-        // { rank: "6", name: "六年级", sum: "1056" },
-      ],
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+            },
+            labelLine: {
+              show: true,
+            },
+            data: [
+              { value: 100, name: "2人以下" },
+              { value: 150, name: "3-4人" },
+              { value: 223, name: "5-6人" },
+              { value: 216, name: "7人以上" }
+            ],
+          },
+        ],
+      },
     };
   },
   methods: {
-    tableRowClassName({ row, rowIndex }) {
-      if ((rowIndex + 1) % 2 === 0) {
-        return "even_row";
-      } else {
-        return "";
-      }
+    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);
+      });
     },
-    setArray(array){
-      this.tableData = []
-      for(var i = 0;i<array.length;i++){
-        this.tableData.push({
-          sum:array[i].course,
-          name:array[i].name
-        })
-      }
-      this.tableData = this.tableData.sort(function(a,b){
-        return b.sum - a.sum;
-      })
-    }
   },
   watch: {
-    courseNumberArray: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.setArray(newValue)
-        this.$forceUpdate();
-      },
-    },
   },
   mounted() {
-    this.setArray(this.courseNumberArray)
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
   },
 };
 </script>
 
 <style scoped>
-.el-table>>>.even_row {
-  background-color: #f2f7ff !important;
-}
-
 .data_body {
   height: 100%;
   /* display: flex; */
@@ -88,8 +89,4 @@ export default {
   width: 95%;
   background: #fff;
 }
-
-.tableClass >>> td, .tableClass >>> th{
-  padding: 5px 0;
-}
 </style>

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

@@ -1,155 +1,94 @@
 <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 class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
+  </div>
 </template>
-  
+
 <script>
 export default {
-    props: {
-        courseNumberArray: {
-            type: Array,
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
         },
-    },
-    data() {
-        return {
-            chartObj: null,
-            ooption: {
-                data: [],
-            },
-            option: {
-                title: {
-                    text: '课程数量',
-                    textStyle:{
-                        fontSize: 12,
-                    },
-                    padding: [5, 0, 0, 10]
-                },
-                tooltip: {
-                    trigger: 'item'
-                },
-                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: '六年级' }
-                        ]
-                    }
-                ]
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
             },
-        };
-    },
-    methods: {
-        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);
-                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.dataIndex)
-                });
-                // 初始化雷达图
-                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();
+            labelLine: {
+              show: true,
             },
-        },
-    },
-    mounted() {
-        this.setArray(this.courseNumberArray)
-        var _this = this;
-        window.addEventListener("resize", () => {
-            if (_this.chartObj) {
-                _this.chartObj.resize();
-            }
-        });
+            data: [
+              { value: 100, name: "一年级" },
+              { value: 150, name: "二年级" },
+              { value: 223, name: "三年级" },
+              { value: 216, name: "四年级" },
+              { value: 130, name: "五年级" },
+              { value: 208, 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);
+      });
     },
+  },
+  watch: {
+  },
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
 };
 </script>
-  
+
 <style scoped>
 .data_body {
-    height: 100%;
-    /* display: flex; */
-    position: relative;
-    border-radius: 5px;
-    /* border: 1px solid #eee; */
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 0;
-    width: 95%;
-    background: #fff;
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
 }
-</style>
-  
+</style>

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

@@ -0,0 +1,85 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

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

@@ -1,169 +1,94 @@
 <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 class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
+  </div>
 </template>
-  
+
 <script>
 export default {
-    props: {
-        monthArray: {
-            type: Array,
-            default:[]
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        course: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
         },
-    },
-    data() {
-        return {
-            chartObj: null,
-            ooption: {
-                xdata: [],
-                teacher: [],
-                student: [],
-            },
-            option: {
-                title: {
-                    text: '登录频次',
-                    textStyle:{
-                        fontSize: 12,
-                    },
-                    padding: [0, 0, 0, 10]
-                },
-                tooltip: {
-                    trigger: 'axis'
-                },
-                legend: {
-                    data: ['老师', '学生'],
-                    right: '10'
-                },
-                grid: {
-                    top: '30',
-                    left: '5%',
-                    right: '5%',
-                    bottom: '5%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: true,
-                    // data: ['1月', '2月', '3月', '4月', '5月', '6月']
-                    data: []
-                },
-                yAxis: {
-                    type: 'value'
-                },
-                series: [
-                    {
-                        name: '老师',
-                        type: 'line',
-                        // data: [120, 50, 101, 130, 110, 120]
-                        areaStyle: {},
-                        data: [],
-                        itemStyle: {
-                            normal: {
-                                color: function (params) {
-                                    return "#106bff";
-                                    },
-                                }, 
-                        },
-                    },
-                    {
-                        name: '学生',
-                        type: 'line',
-                        areaStyle: {},
-                        // data: [220, 182, 191, 234, 290, 330]
-                        data: []
-                    },
-                ]
-            },
-        };
-    },
-    methods: {
-        setChart(option) {
-            // 雷达图显示的标签
-            let newPromise = new Promise((resolve) => {
-                resolve();
-            });
-            //然后异步执行echarts的初始化函数
-            newPromise.then(() => {
-                const chartObj = this.$echarts.init(
-                    //劳动课程
-                    this.$el.querySelector("#charts_canvas")
-                );
-                this.option.xAxis.data = option.xdata;
-                this.option.series[0].data = option.teacher;
-                this.option.series[1].data = option.student;
-                // 初始化雷达图
-                this.chartObj = chartObj;
-                this.chartObj.setOption(this.option);
-            });
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         },
-    },
-    watch: {
-        monthArray: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.ooption = {
-                    xdata: [],
-                    teacher: [],
-                    student: [],
-                }
-                let _array = newValue
-                for (var i = 0; i < _array.length; i++) {
-                    this.ooption.xdata.push(_array[i].Month + '月')
-                    this.ooption.teacher.push(_array[i].teacher)
-                    this.ooption.student.push(_array[i].student)
-                }
-
-                if (!this.chartObj) {
-                    this.setChart(this.ooption);
-                } else {
-                    this.option.xAxis.data = this.ooption.xdata;
-                    this.option.series[0].data = this.ooption.teacher;
-                    this.option.series[1].data = this.ooption.student;
-                    this.chartObj.setOption(this.option);
-                }
-                this.$forceUpdate();
-            },
+        yAxis: {
+          type: "value",
         },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: "line",
+            areaStyle: {},
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
     },
-    mounted() {
-        this.ooption = {
-            xdata: [],
-            teacher: [],
-            student: [],
-        }
-        let _array = this.monthArray
-        for (var i = 0; i < _array.length; i++) {
-            this.ooption.xdata.push(_array[i].Month + '月')
-            this.ooption.teacher.push(_array[i].teacher)
-            this.ooption.student.push(_array[i].student)
-        }
-        this.setChart(this.ooption);
-        var _this = this;
-        window.addEventListener("resize", () => {
-            if (_this.chartObj) {
-                _this.chartObj.resize();
-            }
-        });
-    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
 };
 </script>
-  
+
 <style scoped>
 .data_body {
-    height: 100%;
-    /* display: flex; */
-    position: relative;
-    border-radius: 5px;
-    /* border: 1px solid #eee; */
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 0;
-    width: 95%;
-    background: #fff;
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
 }
-</style>
-  
+</style>

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

@@ -1,209 +0,0 @@
-<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>
-</template>
-  
-<script>
-export default {
-    props: {
-        yearArray: {
-            type: Array,
-        },
-    },
-    data() {
-        return {
-            chartObj: null,
-            ooption: {
-                xdata: [],
-                sdata: [],
-            },
-            option: {
-                title: {
-                    text: '在线时长',
-                    textStyle:{
-                        fontSize: 12,
-                    },
-                    padding: [10, 0, 0, 10]
-                },
-                tooltip: {
-                    position: 'top'
-                },
-                grid: {
-                    top: '50',
-                    left: '5%',
-                    right: '5%',
-                    bottom: '5%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category',
-                    // data: [
-                    //     '1月', '2月', '3月', '4月', '5月', '6月', '7月',
-                    //     '8月', '9月', '10月', '11月', '12月'
-                    // ],
-                    data: [],
-                    splitArea: {
-                        show: true
-                    }
-                },
-                yAxis: {
-                    type: 'category',
-                    data: [
-                        '星期天', '星期一', '星期二', '星期三',
-                        '星期四', '星期五', '星期六',
-                    ],
-                    splitArea: {
-                        show: true
-                    },
-                },
-                visualMap: {
-                    min: 0,
-                    max: 10,
-                    calculable: true,
-                    orient: 'horizontal',
-                    right: '10',
-                    top: '0%'
-                },
-                series: [
-                    {
-                        name: '',
-                        type: 'heatmap',
-                        data: [],
-                        label: {
-                            show: true
-                        },
-                        emphasis: {
-                            itemStyle: {
-                                shadowBlur: 10,
-                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                            }
-                        }
-                    }
-                ]
-            },
-        };
-    },
-    methods: {
-        setChart(option) {
-            // 雷达图显示的标签
-            let newPromise = new Promise((resolve) => {
-                resolve();
-            });
-            //然后异步执行echarts的初始化函数
-            newPromise.then(() => {
-                const chartObj = this.$echarts.init(
-                    //劳动课程
-                    this.$el.querySelector("#charts_canvas")
-                );
-
-                this.option.xAxis.data = option.xdata;
-                this.option.series[0].data = option.sdata;
-                this.option.visualMap.max = option.max ? option.max : 0;
-                // 初始化雷达图
-                this.chartObj = chartObj;
-                this.chartObj.setOption(this.option);
-            });
-        },
-    },
-    watch: {
-        yearArray: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.ooption = {
-                    xdata: [],
-                    sdata: [],
-                    max:0
-                }
-                let _array = newValue
-                let max = []
-                for (var i = 0; i < _array.length; i++) {
-                    this.ooption.xdata.push(_array[i].Month + '月')
-                    this.ooption.sdata.push([i, 0, _array[i].sun])
-                    this.ooption.sdata.push([i, 1, _array[i].mon])
-                    this.ooption.sdata.push([i, 2, _array[i].tue])
-                    this.ooption.sdata.push([i, 3, _array[i].wed])
-                    this.ooption.sdata.push([i, 4, _array[i].thur])
-                    this.ooption.sdata.push([i, 5, _array[i].fri])
-                    this.ooption.sdata.push([i, 6, _array[i].sat])
-                    // let _data = [_array[i].Month-1,] //[月份，星期，值]
-                    max.push(_array[i].sun)
-                    max.push(_array[i].mon)
-                    max.push(_array[i].tue)
-                    max.push(_array[i].wed)
-                    max.push(_array[i].thur)
-                    max.push(_array[i].fri)
-                    max.push(_array[i].sat)
-                }
-                this.ooption.max = max.sort(function(a,b){
-                    return b-a;
-                })[0];
-                if (!this.chartObj) {
-                    this.setChart(this.ooption);
-                } else {
-                    this.option.xAxis.data = this.ooption.xdata;
-                    this.option.series[0].data = this.ooption.sdata;
-                    this.option.visualMap.max = this.ooption.max ? this.ooption.max : 0;
-                    this.chartObj.setOption(this.option);
-                }
-                this.$forceUpdate();
-            },
-        },
-    },
-    mounted() {
-        this.ooption = {
-            xdata: [],
-            sdata: [],
-            max:0
-        }
-        let _array = this.yearArray
-        let max = []
-        for (var i = 0; i < _array.length; i++) {
-            this.ooption.xdata.push(_array[i].Month + '月')
-            this.ooption.sdata.push([i, 0, _array[i].sun])
-            this.ooption.sdata.push([i, 1, _array[i].mon])
-            this.ooption.sdata.push([i, 2, _array[i].tue])
-            this.ooption.sdata.push([i, 3, _array[i].wed])
-            this.ooption.sdata.push([i, 4, _array[i].thur])
-            this.ooption.sdata.push([i, 5, _array[i].fri])
-            this.ooption.sdata.push([i, 6, _array[i].sat])
-            // let _data = [_array[i].Month-1,] //[月份，星期，值]
-            max.push(_array[i].sun)
-            max.push(_array[i].mon)
-            max.push(_array[i].tue)
-            max.push(_array[i].wed)
-            max.push(_array[i].thur)
-            max.push(_array[i].fri)
-            max.push(_array[i].sat)
-        }
-        this.ooption.max = max.sort(function(a,b){
-                    return b-a;
-                })[0];
-                
-        this.setChart(this.ooption);
-        var _this = this;
-        window.addEventListener("resize", () => {
-            if (_this.chartObj) {
-                _this.chartObj.resize();
-            }
-        });
-    },
-};
-</script>
-  
-<style scoped>
-.data_body {
-    height: 100%;
-    position: relative;
-    border-radius: 5px;
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 0;
-    width: 95%;
-    background: #fff;
-}
-</style>
-  

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

@@ -1,159 +0,0 @@
-<template>
-    <div class="data_body">
-        <div style="width: 100%; height: 100%" v-if="this.ooption.xdata.length">
-            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-        </div>
-        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;"
-            v-show="!this.ooption.xdata.length">暂无数据</div>
-    </div>
-</template>
-  
-<script>
-export default {
-    props: {
-        evCourseArray: {
-            type: Array,
-            default: []
-        },
-        eva: {
-            type: String,
-            default: ''
-        }
-    },
-    data() {
-        return {
-            chartObj: null,
-            ooption: {
-                xdata: [],
-                sdata: [],
-            },
-            option: {
-                tooltip: {},
-                radar: {
-                    axisName: {
-                        color: "#000"
-                    },
-                    // shape: 'circle',
-                    indicator: [
-                        // { name: '目标一', max: 5 },
-                        // { name: '目标二', max: 5 },
-                        // { name: '目标三', max: 5 },
-                        // { name: '目标四', max: 5 },
-                        // { name: '目标五', max: 5 }
-                    ]
-                },
-                series: [
-                    {
-                        name: '学生综合评价',
-                        type: 'radar',
-                        data: [
-                            {
-                                areaStyle: {
-                                    opacity: 0.2,
-                                    color: '#0061FF'
-                                },
-                                itemStyle: {
-                                    color: '#0061FF',
-                                    lineStyle: {
-                                    color: '#0061FF'
-                                    }
-                                },
-                                // 5, 4, 3, 5, 5, 2
-                                value: [],
-                                name: ''
-                            }
-                        ]
-                    }
-                ]
-            },
-        };
-    },
-    methods: {
-        setChart(option) {
-            // 雷达图显示的标签
-            let newPromise = new Promise((resolve) => {
-                resolve();
-            });
-            //然后异步执行echarts的初始化函数
-            newPromise.then(() => {
-                const chartObj = this.$echarts.init(
-                    //劳动课程
-                    this.$el.querySelector("#charts_canvas")
-                );
-                this.option.radar.indicator = option.xdata;
-                this.option.series[0].data[0].value = option.sdata;
-                // 初始化雷达图
-                this.chartObj = chartObj;
-                this.chartObj.setOption(this.option);
-            });
-        },
-        setArray(array) {
-            this.ooption = {
-                xdata: [],
-                sdata: [],
-            }
-            for (var i = 0; i < array.length; i++) {
-                if (array[i].evid == this.eva) {
-                    this.ooption.xdata = array[i].indicator
-                    this.ooption.sdata = array[i].value
-                    break;
-                }
-            }
-            setTimeout(() => {
-                // if (!this.chartObj) {
-                this.setChart(this.ooption);
-                // } else {
-                //     this.option.radar.indicator = this.ooption.xdata;
-                //     this.option.series[0].data[0].value = this.ooption.sdata;
-                //     this.chartObj.setOption(this.option);
-                // }
-            }, 100);
-            this.$forceUpdate();
-        },
-    },
-    watch: {
-        evCourseArray: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.setArray(newValue)
-                this.$forceUpdate();
-            },
-        },
-        eva: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.setArray(this.evCourseArray)
-                this.$forceUpdate();
-            },
-        },
-    },
-    mounted() {
-        this.setArray(this.evCourseArray)
-        // this.setChart(this.ooption);
-        var _this = this;
-        window.addEventListener("resize", () => {
-            if (_this.chartObj) {
-                _this.chartObj.resize();
-            }
-        });
-    },
-};
-</script>
-  
-<style scoped>
-.data_body {
-    height: 100%;
-    /* display: flex; */
-    position: relative;
-    border-radius: 5px;
-    /* border: 1px solid #eee; */
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 0;
-    width: 95%;
-    background: #fff;
-}
-</style>
-  

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

@@ -37,6 +37,94 @@ 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) => {
@@ -48,26 +136,25 @@ export default {
                     //劳动课程
                     this.$el.querySelector("#charts_canvas")
                 );
-                const hours = option.hours
-                // [
-                //     // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
-                //     // '劳动', '其他',
-                // ];
+                const hours = 
+                [
+                    '1班', '2班', '3班', '4班', '5班', '6班'
+                ];
                 // prettier-ignore
-                const days = option.days
-                // [
-                //     // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
-                // ];
+                const 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 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 title = [];
                 const singleAxis = [];
                 const series = [];
@@ -94,29 +181,13 @@ export default {
                         type: 'scatter',
                         data: [],
                         symbolSize: function (dataItem) {
-                            return dataItem[1] * 3;
+                            return dataItem[1];
                         }
                     });
                 });
                 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
@@ -126,6 +197,7 @@ export default {
             });
         },
         setJson(array) {
+            this.setChart(this.ooption);
             if (array != undefined && array.length > 0) {
                 this.ooption = {
                     hours: [],
@@ -206,12 +278,19 @@ export default {
             immediate: true,
             deep: true,
             handler(newValue, oldValue) {
+                // newValue = newValue.filter(item => {
+                //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+                // })
                 this.setJson(newValue)
                 this.$forceUpdate();
             },
         },
     },
     mounted() {
+        // 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/toolUser/index.vue

@@ -0,0 +1,314 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          position: "top",
+        },
+        grid: {
+          height: "50%",
+          top: "10%",
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "12a",
+            "1a",
+            "2a",
+            "3a",
+            "4a",
+            "5a",
+            "6a",
+            "7a",
+            "8a",
+            "9a",
+            "10a",
+            "11a",
+            "12p",
+            "1p",
+            "2p",
+            "3p",
+            "4p",
+            "5p",
+            "6p",
+            "7p",
+            "8p",
+            "9p",
+            "10p",
+            "11p",
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "星期一",
+            "星期二",
+            "星期三",
+            "星期四",
+            "星期五",
+            "星期六",
+            "星期日",
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        visualMap: {
+          min: 0,
+          max: 10,
+          calculable: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: "15%",
+        },
+        series: [
+          {
+            name: "Punch Card",
+            type: "heatmap",
+            data: [
+              [0, 0, 5],
+              [0, 1, 1],
+              [0, 2, 0],
+              [0, 3, 0],
+              [0, 4, 0],
+              [0, 5, 0],
+              [0, 6, 0],
+              [0, 7, 0],
+              [0, 8, 0],
+              [0, 9, 0],
+              [0, 10, 0],
+              [0, 11, 2],
+              [0, 12, 4],
+              [0, 13, 1],
+              [0, 14, 1],
+              [0, 15, 3],
+              [0, 16, 4],
+              [0, 17, 6],
+              [0, 18, 4],
+              [0, 19, 4],
+              [0, 20, 3],
+              [0, 21, 3],
+              [0, 22, 2],
+              [0, 23, 5],
+              [1, 0, 7],
+              [1, 1, 0],
+              [1, 2, 0],
+              [1, 3, 0],
+              [1, 4, 0],
+              [1, 5, 0],
+              [1, 6, 0],
+              [1, 7, 0],
+              [1, 8, 0],
+              [1, 9, 0],
+              [1, 10, 5],
+              [1, 11, 2],
+              [1, 12, 2],
+              [1, 13, 6],
+              [1, 14, 9],
+              [1, 15, 11],
+              [1, 16, 6],
+              [1, 17, 7],
+              [1, 18, 8],
+              [1, 19, 12],
+              [1, 20, 5],
+              [1, 21, 5],
+              [1, 22, 7],
+              [1, 23, 2],
+              [2, 0, 1],
+              [2, 1, 1],
+              [2, 2, 0],
+              [2, 3, 0],
+              [2, 4, 0],
+              [2, 5, 0],
+              [2, 6, 0],
+              [2, 7, 0],
+              [2, 8, 0],
+              [2, 9, 0],
+              [2, 10, 3],
+              [2, 11, 2],
+              [2, 12, 1],
+              [2, 13, 9],
+              [2, 14, 8],
+              [2, 15, 10],
+              [2, 16, 6],
+              [2, 17, 5],
+              [2, 18, 5],
+              [2, 19, 5],
+              [2, 20, 7],
+              [2, 21, 4],
+              [2, 22, 2],
+              [2, 23, 4],
+              [3, 0, 7],
+              [3, 1, 3],
+              [3, 2, 0],
+              [3, 3, 0],
+              [3, 4, 0],
+              [3, 5, 0],
+              [3, 6, 0],
+              [3, 7, 0],
+              [3, 8, 1],
+              [3, 9, 0],
+              [3, 10, 5],
+              [3, 11, 4],
+              [3, 12, 7],
+              [3, 13, 14],
+              [3, 14, 13],
+              [3, 15, 12],
+              [3, 16, 9],
+              [3, 17, 5],
+              [3, 18, 5],
+              [3, 19, 10],
+              [3, 20, 6],
+              [3, 21, 4],
+              [3, 22, 4],
+              [3, 23, 1],
+              [4, 0, 1],
+              [4, 1, 3],
+              [4, 2, 0],
+              [4, 3, 0],
+              [4, 4, 0],
+              [4, 5, 1],
+              [4, 6, 0],
+              [4, 7, 0],
+              [4, 8, 0],
+              [4, 9, 2],
+              [4, 10, 4],
+              [4, 11, 4],
+              [4, 12, 2],
+              [4, 13, 4],
+              [4, 14, 4],
+              [4, 15, 14],
+              [4, 16, 12],
+              [4, 17, 1],
+              [4, 18, 8],
+              [4, 19, 5],
+              [4, 20, 3],
+              [4, 21, 7],
+              [4, 22, 3],
+              [4, 23, 0],
+              [5, 0, 2],
+              [5, 1, 1],
+              [5, 2, 0],
+              [5, 3, 3],
+              [5, 4, 0],
+              [5, 5, 0],
+              [5, 6, 0],
+              [5, 7, 0],
+              [5, 8, 2],
+              [5, 9, 0],
+              [5, 10, 4],
+              [5, 11, 1],
+              [5, 12, 5],
+              [5, 13, 10],
+              [5, 14, 5],
+              [5, 15, 7],
+              [5, 16, 11],
+              [5, 17, 6],
+              [5, 18, 0],
+              [5, 19, 5],
+              [5, 20, 3],
+              [5, 21, 4],
+              [5, 22, 2],
+              [5, 23, 0],
+              [6, 0, 1],
+              [6, 1, 0],
+              [6, 2, 0],
+              [6, 3, 0],
+              [6, 4, 0],
+              [6, 5, 0],
+              [6, 6, 0],
+              [6, 7, 0],
+              [6, 8, 0],
+              [6, 9, 0],
+              [6, 10, 1],
+              [6, 11, 0],
+              [6, 12, 2],
+              [6, 13, 1],
+              [6, 14, 3],
+              [6, 15, 4],
+              [6, 16, 0],
+              [6, 17, 0],
+              [6, 18, 0],
+              [6, 19, 0],
+              [6, 20, 1],
+              [6, 21, 2],
+              [6, 22, 2],
+              [6, 23, 6],
+            ].map(function (item) {
+              return [item[1], item[0], item[2] || "-"];
+            }),
+            label: {
+              show: true,
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="data_body" style="height: calc(100% - 100px)">
+    <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: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        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],
+            ],
+            type: "scatter",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+
+        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);
+      });
+    },
+  },
+  watch: {
+  },
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/student/bar/index.vue

@@ -0,0 +1,86 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "value",
+          data: [0, 50, 100, 150, 200, 250],
+        },
+        yAxis: {
+          type: "category",
+          data: ["五年级", "四年级", "三年级", "二年级", "一年级"],
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/student/courseNum/index.vue

@@ -0,0 +1,85 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="body1" v-loading="isLoading">
+  <div class="body1">
     <!-- 学生数据 -->
     <div class="left">
       <div class="top">
@@ -7,128 +7,264 @@
           <div class="title">基础概况</div>
         </div>
         <div class="dataBox">
-          <div class="info_box">
-            <div class="info blueBG">
-              <span>学生总数</span>
-              <span>{{ count }}</span>
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>教师总数</div>
+              <div>310</div>
             </div>
-            <div class="info greenBG">
-              <span>周使用频次</span>
-              <span>{{weekCount}}</span>
+            <div class="teaLeft teaRigth">
+              <div>本月登录学生用户环比</div>
+              <div>0.9%</div>
             </div>
-            <div class="info blueBG">
-              <span>登录频次</span>
-              <span>{{ loginCount }}</span>
+          </div>
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>本月登录学生用户总数</div>
+              <div>138</div>
             </div>
-            <div class="info greenBG">
-              <span>人均使用频次</span>
-              <span>{{ (loginCount / count).toFixed(0) }}</span>
+            <div class="teaLeft teaRigth">
+              <div>本月新增登录学生用户</div>
+              <div>18</div>
             </div>
           </div>
-          <loginCount :monthArray="loginCountMonthArray" style="height: calc(100% - 140px)"></loginCount>
+          <loginCount style="height: calc(100% - 140px)"></loginCount>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
-          <div class="title">学生行为数据</div>
+          <div
+            class="title"
+            :class="{ isClick: skType == 0 }"
+            @click="skType = 0"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            在线时长
+          </div>
+          <div
+            class="title"
+            :class="{ isClick: skType == 1 }"
+            @click="skType = 1"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            登录频次
+          </div>
+          <el-select v-model="cType" class="selectBox" style="width: 110px">
+            <el-option label="全部" value="全部"></el-option>
+            <el-option label="一年级" value="一年级"></el-option>
+            <el-option label="二年级" value="二年级"></el-option>
+            <el-option label="三年级" value="三年级"></el-option>
+          </el-select>
+          <div class="timeDiv">
+            <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
+            <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
+            <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
+          </div>
+        </div>
+        <div class="teafre" v-if="!oType">
+          <div class="teaLeft">
+            <div>开展频次</div>
+            <div>153</div>
+          </div>
+          <div class="teaLeft teaRigth">
+            <div>人均频次</div>
+            <div>4</div>
+          </div>
+        </div>
+        <div class="teafre" v-if="oType">
+          <div class="teaLeft">
+            <div>累计时长</div>
+            <div>15310</div>
+          </div>
+          <div class="teaLeft teaRigth">
+            <div>人均在线时长</div>
+            <div>4</div>
+          </div>
         </div>
         <div class="dataBox">
-          <stuAct style="height: calc(100% - 20px)" :courseClass="courseClass"></stuAct>
+          <toolUser style="height: calc(100% - 120px)" v-if="!oType"></toolUser>
+          <bar style="height: calc(100% - 120px)" v-if="oType"></bar>
+          <div class="otherCss">
+            <div v-if="!oType">切换为柱状图</div>
+            <div v-if="oType">切换为热力图</div>
+            <div class="otherImg" @click="otherEchart">
+              <img src="../../../../assets/icon/other.png" alt="" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <div class="center">
       <div class="top">
-        <div class="titleBox">
-          <div class="title">学生综合评价</div>
-        </div>
-        <div class="dataBox">
-          <div class="info_box" style="width: 95%; justify-content: flex-start">
-            <div class="info2 blueBG">
-              <span>学生总数</span>
-              <span>{{ count }}</span>
+        <div class="titleBox" style="justify-content: space-between">
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <div
+              class="title"
+              :class="{ isClick: courseType == 0 }"
+              @click="courseType = 0"
+              style="cursor: pointer; padding: 0 0 5px 0"
+            >
+              学生行为分布
             </div>
-            <div class="info2 greenBG">
-              <span>班级总数</span>
-              <span>{{classList.length}}</span>
+            <div
+              class="title"
+              :class="{ isClick: courseType == 1 }"
+              @click="courseType = 1"
+              style="cursor: pointer; padding: 0 0 5px 0"
+            >
+              学生协同情况
             </div>
-            <div class="info2 blueBG">
-              <span>平均得分</span>
-              <span>{{scoreJun}}</span>
+          </div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+            v-if="courseType == 0"
+          >
+            <el-select v-model="cType1" class="selectBox" style="width: 110px">
+              <el-option label="全部" value="全部"></el-option>
+            </el-select>
+            <el-select v-model="cType2" class="selectBox" style="width: 110px">
+              <el-option label="在线时长" value="在线时长"></el-option>
+            </el-select>
+          </div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+            v-if="courseType == 1"
+          >
+            <el-select v-model="cType3" class="selectBox" style="width: 110px">
+              <el-option label="全部" value="全部"></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>
+          </div>
+          <div class="timeDiv">
+            <div @click="tType1 = 0" :class="{ isClick: tType1 == 0 }">周</div>
+            <div @click="tType1 = 1" :class="{ isClick: tType1 == 1 }">月</div>
+            <div @click="tType1 = 2" :class="{ isClick: tType1 == 2 }">
+              学期
             </div>
           </div>
-          <studentInfo style="height: calc(100% - 70px)" :EscoreArray2="EscoreArray2" @openDataClass="openDataClass"></studentInfo>
+        </div>
+        <div class="dataBox">
+          <studentInfo
+            v-if="courseType == 0"
+            style="height: calc(100%)"
+          ></studentInfo>
+          <courseNum
+            v-if="courseType == 1"
+            style="height: calc(100%)"
+          ></courseNum>
         </div>
       </div>
       <div class="bottom">
-        <div class="titleBox">
-          <div class="title">平台使用深度</div>
+        <div class="titleBox" style="justify-content: space-between">
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <div
+              class="title"
+              :class="{ isClick: bType == 0 }"
+              @click="bType = 0"
+              style="cursor: pointer; padding: 0 0 5px 0"
+            >
+              课程参与情况
+            </div>
+            <div
+              class="title"
+              :class="{ isClick: bType == 1 }"
+              @click="bType = 1"
+              style="cursor: pointer; padding: 0 0 5px 0"
+            >
+              项目参与情况
+            </div>
+          </div>
+          <div class="timeDiv">
+            <div @click="sType = 0" :class="{ isClick: sType == 0 }">周</div>
+            <div @click="sType = 1" :class="{ isClick: sType == 1 }">月</div>
+            <div @click="sType = 2" :class="{ isClick: sType == 2 }">学期</div>
+          </div>
         </div>
         <div class="dataBox">
-          <div class="depth_box">
-            <div class="depth">
-              <span>参与课程</span>
-              <div>
-                <el-progress
-                  :width="90"
-                  type="circle"
-                  :percentage="lightJson.course ? ((lightJson.course / count) * 100).toFixed(0) : 0"
-                  :stroke-width="15"
-                  :format="format"
-                  color="#106BFF"
-                ></el-progress>
-              </div>
+          <div class="allBox" style="height: calc(100% - 30px)">
+            <div class="allBox_left">
+              <stuAct></stuAct>
             </div>
-            <div class="depth">
-              <span>参与项目</span>
-              <div>
-                <el-progress
-                  :width="90"
-                  type="circle"
-                  :percentage="lightJson.scourse ? ((lightJson.scourse / count) * 100).toFixed(0) : 0"
-                  :stroke-width="15"
-                  :format="format"
-                  color="#106BFF"
-                ></el-progress>
+            <div class="allBox_right">
+              <div class="depth">
+                <span>参与项目</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="80"
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
               </div>
-            </div>
-            <div class="depth">
-              <span>使用工具</span>
-              <div>
-                <el-progress
-                  :width="90"
-                  type="circle"
-                  :percentage="lightJson.tools ? ((lightJson.tools / count) * 100).toFixed(0) : 0"
-                  :stroke-width="15"
-                  :format="format"
-                  color="#106BFF"
-                ></el-progress>
+              <div class="depth">
+                <span>使用工具</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="80"
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
               </div>
-            </div>
-            <div class="depth">
-              <span>协同合作</span>
-              <div>
-                <el-progress
-                  :width="90"
-                  type="circle"
-                  :percentage="lightJson.xcourse ? ((lightJson.xcourse / count) * 100).toFixed(0) : 0"
-                  :stroke-width="15"
-                  :format="format"
-                  color="#106BFF"
-                ></el-progress>
+              <div class="depth">
+                <span>协同合作</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="80"
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
               </div>
-            </div>
-            <div class="depth">
-              <span>互动交流</span>
-              <div>
-                <el-progress
-                  :width="90"
-                  type="circle"
-                  :percentage="lightJson.exchange ? ((lightJson.exchange / count) * 100).toFixed(0) : 0"
-                  :stroke-width="15"
-                  :format="format"
-                  color="#106BFF"
-                ></el-progress>
+              <div class="depth">
+                <span>互动交流</span>
+                <div>
+                  <el-progress
+                    :width="80"
+                    type="circle"
+                    :percentage="80"
+                    :stroke-width="15"
+                    :format="format"
+                    color="#106BFF"
+                  ></el-progress>
+                </div>
               </div>
             </div>
           </div>
@@ -136,33 +272,60 @@
       </div>
     </div>
     <div class="right">
-      <div class="top">
-        <div class="titleBox">
-          <div class="title">学生综合评价</div>
-          <el-select v-model="eva" @focus="setMinWidth" class="selectBox" style="width: 150px;">
-            <el-option v-for="item in evArray" :key="item.id" :label="item.title" :value="item.id" :style="{'width': minWidth + 2 + 'px'}"></el-option>
-          </el-select>
+      <div class="top" style="border-radius: 5px">
+        <div class="titleBox" style="justify-content: space-between">
+          <div class="title">整体分布</div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <el-select v-model="cType6" class="selectBox" style="width: 110px">
+              <el-option label="全部" value="全部"></el-option>
+            </el-select>
+            <el-select v-model="cType7" class="selectBox" style="width: 110px">
+              <el-option label="在线时长" value="在线时长"></el-option>
+            </el-select>
+          </div>
         </div>
         <div class="dataBox">
-          <studentInfo2 :evCourseArray="evCourseArray" :eva="eva"></studentInfo2>
+          <studentInfo2 style="height: calc(100% - 40px)"></studentInfo2>
         </div>
       </div>
       <div class="bottom">
-        <div class="titleBox">
-          <div class="title">在线时长</div>
+        <div class="titleBox" style="justify-content: space-between">
+          <div class="title">活动参与</div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <el-select v-model="cType8" class="selectBox" style="width: 110px">
+              <el-option label="全部年级" value="全部年级"></el-option>
+            </el-select>
+            <el-select v-model="cType9" class="selectBox" style="width: 110px">
+              <el-option label="全部班级" value="全部班级"></el-option>
+            </el-select>
+          </div>
         </div>
         <div class="dataBox">
-          <div class="info_box">
-            <div class="info blueBG">
-              <span>累计在线时长</span>
-              <span>{{ loginTime.toFixed(0) }}小时</span>
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>人均参与课程数</div>
+              <div>18</div>
             </div>
-            <div class="info greenBG">
-              <span>学生在线平均时长</span>
-              <span>{{ (loginTime / count).toFixed(0) }}小时</span>
+            <div class="teaLeft teaRigth">
+              <div>人均参与项目数</div>
+              <div>18</div>
             </div>
           </div>
-          <loginTime style="height: calc(100% - 70px)" :EloginTimeArray="EloginTimeArray"></loginTime>
+          <loginTime style="height: calc(100% - 72px)"></loginTime>
         </div>
       </div>
     </div>
@@ -175,6 +338,9 @@ import studentInfo from "./studentInfo";
 import studentInfo2 from "./studentInfo2";
 import loginTime from "./loginTime";
 import stuAct from "./stuAct";
+import toolUser from "./toolUser";
+import bar from "./bar";
+import courseNum from "./courseNum";
 export default {
   props: {
     oid: {
@@ -190,270 +356,35 @@ export default {
     studentInfo2,
     loginTime,
     stuAct,
+    toolUser,
+    bar,
+    courseNum,
   },
   data() {
     return {
-      isLoading: false,
-      count: 0,
-      loginCount: 0,
-      loginTime: 0,
-      loginCountMonthArray:[],
-      weekCount:0,
-      classList:[],
-      scoreJun:0,
-      evArray:[],
-      eva:'',
-      evCourseArray:[],
-      minWidth:0,
-      courseClass:[],
-      lightJson: {
-        course:0,
-        scourse:0,
-        tools:0,
-        xcourse:0,
-        exchange:0,
-      },
-      EloginTimeArray:[],
-      EscoreArray2:[],
+      skType: 0,
+      tType: 0,
+      courseType: 0,
+      tType1: 0,
+      sType: 0,
+      bType: 0,
+      cType: "全部",
+      cType1: "全部",
+      cType2: "在线时长",
+      cType3: "全部",
+      cType4: "师生",
+      cType5: "全部年级",
+      cType6: "全部",
+      cType7: "在线时长",
+      cType8: "全部年级",
+      cType9: "全部班级",
+      oType: false,
     };
   },
-  mounted() {
-    this.getData();
-  },
+  mounted() {},
   methods: {
-    openDataClass(classIndex){
-      console.log(classIndex);
-      console.log(this.EscoreArray2[classIndex]);
-      window.parent.postMessage(
-        { 
-          tools: "openDataClass",
-          classid: this.EscoreArray2[classIndex].id,
-        }, 
-        "*"
-      );
-    },
-    setMinWidth (val) {
-      this.minWidth = val.srcElement.clientWidth
-    },
-    getData() {
-      this.isLoading = true;
-      let params = [
-        {
-          oid: this.oid,
-          org: this.org,
-        },
-      ];
-      this.ajax
-        .post(this.$store.state.api + "selectDataBoardStudent", params)
-        .then((res) => {
-          this.isLoading = false;
-          this.count = res.data[0][0].count;
-          this.loginCount = res.data[1][0].loginCount;
-          this.loginTime = parseInt(res.data[2][0].time) / 60 / 60;
-
-
-
-          let loginCountMonthArray = []
-          const date = new Date()
-          var Month = date.getMonth() + 1
-          var Year = date.getFullYear()
-          for (var i = Month; i > Month - 6; i--) {
-            if (i <= 0) {
-              loginCountMonthArray.push({
-                Year: Year - 1,
-                Month: 12 + i,
-                student: 0,
-              })
-            } else {
-              loginCountMonthArray.push({
-                Month: i,
-                Year: Year,
-                student: 0,
-              })
-            }
-          }
-
-          loginCountMonthArray = loginCountMonthArray.reverse()
-          let studentLoginCountYear = res.data[3] // 学生半年登录次数统计
-
-          for (var i = 0; i < studentLoginCountYear.length; i++) {
-            let _date = new Date(studentLoginCountYear[i].create_at)
-            var _month = _date.getMonth() + 1
-            var _year = _date.getFullYear()
-            for (var j = 0; j < loginCountMonthArray.length; j++) {
-              if (_month == loginCountMonthArray[j].Month && _year == loginCountMonthArray[j].Year) {
-                loginCountMonthArray[j].student++
-                break;
-              }
-            }
-          }
-          this.loginCountMonthArray = loginCountMonthArray;
-          console.log(loginCountMonthArray);
-
-          this.weekCount = res.data[4][0].count
-          let _classList = res.data[5]
-          this.classList = _classList
-          let _scoreArray = res.data[6]
-          let _sumScore = 0
-          for(var i = 0; i< _scoreArray.length;i++){
-            let _score = JSON.parse(_scoreArray[i].score)
-            _sumScore += _score.wScore
-          }
-          this.scoreJun = (_sumScore / _scoreArray.length).toFixed(0)
-
-
-          let _evArray = res.data[7] //目标数组
-          let _evWorkArray = res.data[8] //目标课程的作业
-          let _evCourseArray = [] //计算总分 
-          let _evCourse = [] //筛选有目标的数组 
-          for(var i = 0;i<_evWorkArray.length;i++){
-              let courseJson = JSON.parse(_evWorkArray[i].chapters)
-              let _rate = JSON.parse(_evWorkArray[i].rate)
-              delete _rate.content
-              if(courseJson[_evWorkArray[i].stage] && 
-                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task] && 
-                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList &&
-                courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList.length){
-                let _elist = courseJson[_evWorkArray[i].stage].chapterInfo[0].taskJson[_evWorkArray[i].task].eList
-                let _rateC = Object.keys(_rate)
-                let json = {}
-                for(var j = 0;j<_rateC.length;j++){
-                  for(var k = 0;k<_elist.length;k++){
-                    if(_elist[k].value == _rateC[j] && _elist[k].target){
-                      json[_elist[k].target[0]] = _rate[_rateC[j]]
-                      break;
-                    }
-                  }
-                }
-                if(Object.keys(json).length){
-                  _evCourse.push({
-                    evid:_evWorkArray[i].evaId,
-                    rateJson:json
-                  })
-                }
-              }
-          }
-          for(var i = 0;i<_evArray.length;i++){
-            _evCourseArray.push({
-              title:_evArray[i].title,
-              evid:_evArray[i].id,
-              evJson:{}
-            })
-            for(var j = 0;j<_evCourse.length;j++){
-              if(_evArray[i].id == _evCourse[j].evid){
-                let _rate = Object.keys(_evCourse[j].rateJson)
-                for(var k = 0;k<_rate.length;k++){
-                  if(_evCourseArray[i].evJson[_rate[k]]){
-                    _evCourseArray[i].evJson[_rate[k]].push(_evCourse[j].rateJson[_rate[k]])
-                  }else{
-                    _evCourseArray[i].evJson[_rate[k]] = [_evCourse[j].rateJson[_rate[k]]]
-                  }
-                }
-              }
-            }
-          }
-          for(var i = 0;i < _evCourseArray.length; i++){
-            _evCourseArray[i].indicator = []
-            _evCourseArray[i].value = []
-            let evJson = Object.keys(_evCourseArray[i].evJson)
-            for(var j = 0;j < evJson.length;j++){
-              _evCourseArray[i].indicator.push({
-                name:evJson[j],
-                max: 5 
-              })
-              let sum = 0
-              _evCourseArray[i].evJson[evJson[j]].forEach((value)=>{
-                sum+=value
-              })
-              _evCourseArray[i].value.push((sum / _evCourseArray[i].evJson[evJson[j]].length).toFixed(1))
-            }
-          }
-          this.evArray = _evArray
-          this.eva = _evArray[0].id
-          this.evCourseArray = _evCourseArray
-
-          let _courseClassArray = res.data[9] //作业带课程
-          let _courseClass = []
-          for(var i = 0;i<_classList.length;i++){
-            _courseClass.push({
-              name:_classList[i].name,
-              works:0,
-              id:_classList[i].id
-            })
-            for(var j = 0;j<_courseClassArray.length;j++){
-              if(_courseClassArray[j].classid.indexOf(_classList[i].id) != -1){
-                _courseClass[i].works++
-              }
-            }
-          }
-          this.courseClass = _courseClass
-
-          let _lcourse = res.data[10][0].num //参与课程数量
-          let _lscourse = res.data[11][0].num //参与项目
-          let _ltools = res.data[12][0].num //使用工具
-          let _lxcourse = res.data[13][0].num //协同合作
-          let _lexchange = res.data[14][0].num //互动交流
-
-          this.lightJson = {
-            course:_lcourse,
-            scourse:_lscourse,
-            tools:_ltools,
-            xcourse:_lxcourse,
-            exchange:_lexchange,
-          }
-
-          let _loginTimeArray = res.data[15] //在线时间
-          let _scoreArray2 = res.data[16] //得分
-
-
-          let _EloginTimeArray = []
-          for (let i = 0; i < _classList.length; i++) {
-            _EloginTimeArray.push({
-              id:_classList[i].id,
-              name:_classList[i].name,
-              loginTime:0
-            })
-            for (let j = 0; j < _loginTimeArray.length; j++) {
-              const _user = _loginTimeArray[j];
-              if(_user.classid.indexOf(_classList[i].id) != -1){
-                _EloginTimeArray[i].loginTime += _user.time
-              }
-            }
-            _EloginTimeArray[i].loginTime = (_EloginTimeArray[i].loginTime / 60).toFixed(2) //换算成小时
-          }
-          this.EloginTimeArray = _EloginTimeArray
-          let _EscoreArray2 = []
-          for (let i = 0; i < _classList.length; i++) {
-            _EscoreArray2.push({
-              id:_classList[i].id,
-              name:_classList[i].name,
-              max:0,
-              min:0,
-              score:[]
-            })
-            for (let j = 0; j < _scoreArray2.length; j++) {
-              const _user = _scoreArray2[j];
-              if(_user.classid.indexOf(_classList[i].id) != -1){
-                _EscoreArray2[i].score.push(_user.score)
-              }
-            }
-            if(_EscoreArray2[i].score.length){
-              _EscoreArray2[i].score = _EscoreArray2[i].score.sort((i, j) => {
-                return i-j; 
-              })
-              _EscoreArray2[i].max = _EscoreArray2[i].score[_EscoreArray2[i].score.length-1]
-              _EscoreArray2[i].min = _EscoreArray2[i].score[0]
-            }
-          }
-          this.EscoreArray2 = _EscoreArray2
-        })
-        .catch((err) => {
-          this.isLoading = false;
-          console.error(err);
-        });
-    },
-    format(percentage) {
-      return percentage + '%';
+    otherEchart() {
+      this.oType = !this.oType;
     },
   },
 };
@@ -531,14 +462,6 @@ export default {
   border-radius: 5px;
 }
 
-.titleBox {
-  height: 40px;
-  display: flex;
-  align-items: center;
-  padding: 0 15px;
-  width: 100%;
-}
-
 .dataBox {
   height: calc(100% - 40px);
   width: 100%;
@@ -549,11 +472,13 @@ export default {
   display: flex;
   align-items: center;
   padding: 0 15px;
+  box-sizing: border-box;
   width: 100%;
 }
 
-.titleBox > .title {
-  font-weight: 700;
+.title {
+  color: #060e17;
+  margin-right: 10px;
 }
 
 .dataBox {
@@ -657,12 +582,117 @@ export default {
   margin-left: 10px;
 }
 
-.selectBox>>>.el-input__inner {
+.selectBox >>> .el-input__inner {
   height: 30px;
   line-height: 30px;
 }
 
-.selectBox>>>.el-input__icon {
+.selectBox >>> .el-input__icon {
   line-height: 30px;
 }
+.teafre {
+  margin: 5px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  justify-content: space-evenly;
+}
+
+.teaLeft,
+.teaMiddle {
+  width: calc(100% / 2 - 10px);
+  height: 60px;
+  border-radius: 8px;
+  /* border: 1px solid #e0eafb; */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 10px;
+  margin: 0 10px;
+}
+.teaMiddle {
+  width: calc(100% / 3 - 10px);
+}
+.teaLeft {
+  width: 95%;
+  background: #f3f8fd;
+}
+.teaRigth {
+  background: #f3f8fd;
+}
+.timeDiv {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 0 0 15px;
+}
+
+.timeDiv > div {
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.isClick {
+  color: #1684fc;
+  border-bottom: 2px solid #1684fc;
+  box-sizing: border-box;
+}
+.otherCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+.otherImg {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+.otherImg > img {
+  width: 100%;
+  height: 100%;
+}
+.allBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.allBox_left {
+  width: 30%;
+  height: 100%;
+}
+.allBox_right {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 70%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.depth {
+  width: calc(100% / 4 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.depth > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+.depth > div:nth-child(1) {
+}
 </style>

src/components/pages/dataBoardNew/student/loginCount/index.vue

@@ -1,143 +1,94 @@
 <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 class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
+  </div>
 </template>
-  
+
 <script>
 export default {
-    props: {
-        monthArray: {
-            type: Array,
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        course: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
         },
-    },
-    data() {
-        return {
-            chartObj: null,
-            ooption: {
-                xdata: [],
-                student: [],
-            },
-            option: {
-                title: {
-                    text: '登录频次',
-                    textStyle:{
-                        fontSize: 12,
-                    },
-                    padding: [0, 0, 0, 10]
-                },
-                tooltip: {
-                    trigger: 'axis'
-                },
-                grid: {
-                    top:'15%',
-                    left: '5%',
-                    right: '5%',
-                    bottom: '5%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: true,
-                    // data: ['1月', '2月', '3月', '4月', '5月', '6月']
-                    data: []
-                },
-                yAxis: {
-                    type: 'value'
-                },
-                series: [
-                    {
-                        name: '学生',
-                        type: 'line',
-                        areaStyle:{},
-                        // data: [220, 182, 191, 234, 290, 330]
-                        data: []
-                    },
-                ]
-            },
-        };
-    },
-    methods: {
-        setChart(option) {
-            // 雷达图显示的标签
-            let newPromise = new Promise((resolve) => {
-                resolve();
-            });
-            //然后异步执行echarts的初始化函数
-            newPromise.then(() => {
-                const chartObj = this.$echarts.init(
-                    //劳动课程
-                    this.$el.querySelector("#charts_canvas")
-                );
-                this.option.xAxis.data = option.xdata;
-                this.option.series[0].data = option.student;
-                // 初始化雷达图
-                this.chartObj = chartObj;
-                this.chartObj.setOption(this.option);
-            });
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         },
-    },
-    watch: {
-        monthArray: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.ooption = {
-                    xdata: [],
-                    student: [],
-                }
-                let _array = newValue
-                for (var i = 0; i < _array.length; i++) {
-                    this.ooption.xdata.push(_array[i].Month + '月')
-                    this.ooption.student.push(_array[i].student)
-                }
-
-                if (!this.chartObj) {
-                    this.setChart(this.ooption);
-                } else {
-                    this.option.xAxis.data = this.ooption.xdata;
-                    this.option.series[0].data = this.ooption.student;
-                    this.chartObj.setOption(this.option);
-                }
-                this.$forceUpdate();
-            },
+        yAxis: {
+          type: "value",
         },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: "line",
+            areaStyle: {},
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
     },
-    mounted() {
-        this.ooption = {
-            xdata: [],
-            student: [],
-        }
-        let _array = this.monthArray
-        for (var i = 0; i < _array.length; i++) {
-            this.ooption.xdata.push(_array[i].Month + '月')
-            this.ooption.student.push(_array[i].student)
-        }
-        this.setChart(this.ooption);
-        var _this = this;
-        window.addEventListener("resize", () => {
-            if (_this.chartObj) {
-                _this.chartObj.resize();
-            }
-        });
-    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
 };
 </script>
-  
+
 <style scoped>
 .data_body {
-    height: 100%;
-    /* display: flex; */
-    position: relative;
-    border-radius: 5px;
-    /* border: 1px solid #eee; */
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 0;
-    width: 95%;
-    background: #fff;
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
 }
-</style>
-  
+</style>

src/components/pages/dataBoardNew/student/loginTime/index.vue

@@ -1,156 +1,112 @@
 <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 class="data_body" style="height: calc(100% - 100px)">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
+  </div>
 </template>
-  
+
 <script>
 export default {
-    props: {
-        EloginTimeArray: {
-            type: Array,
-        },
-    },
-    data() {
-        return {
-            chartObj: null,
-            ooption: {
-                xdata: [],
-                data: [],
-            },
-            option: {
-                title: {
-                    text: '在线时长',
-                    textStyle: {
-                        fontSize: 12,
-                    },
-                    padding: [5, 0, 0, 10]
-                },
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                        type: "shadow",
-                    },
-                },
-                dataZoom: [
-                    {
-                        // start: 50,
-                        type: 'inside',
-                        yAxisIndex: 0
-                    },
-                    {
-                        type: 'slider',
-                        yAxisIndex: 0
-                    }
-                ],
-                grid: {
-                    top: '10%',
-                    left: '5%',
-                    right: '10%',
-                    bottom: '5%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'value',
-                    boundaryGap: [0, 0.01]
-                },
-
-                yAxis: {
-                    type: 'category',
-                    // data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
-                    data: []
-                },
-                series: [
-                    {
-                        name: "在线时长（时）",
-                        type: 'bar',
-                        // data: [180, 50, 70, 90, 100, 130],
-                        data: [],
-                        itemStyle: {
-                            normal: {
-                                color: function (params) {
-                                    return "#106bff";
-                                },
-                            },
-                        },
-                    }
-                ]
-            },
-        };
-    },
-    methods: {
-        setChart(option) {
-            // 雷达图显示的标签
-            let newPromise = new Promise((resolve) => {
-                resolve();
-            });
-            //然后异步执行echarts的初始化函数
-            newPromise.then(() => {
-                const chartObj = this.$echarts.init(
-                    //劳动课程
-                    this.$el.querySelector("#charts_canvas")
-                );
-                this.option.yAxis.data = option.xdata;
-                this.option.series[0].data = option.data;
-                // 初始化雷达图
-                this.chartObj = chartObj;
-                this.chartObj.setOption(this.option);
-            });
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
         },
-        setArray(Array) {
-            this.ooption = {
-                xdata: [],
-                data: [],
-            }
-            let _array = Array
-            for (var i = 0; i < _array.length; i++) {
-                this.ooption.xdata.push(_array[i].name)
-                this.ooption.data.push(_array[i].loginTime)
-            }
+        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],
+            ],
+            type: "scatter",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
 
-            if (!this.chartObj) {
-                this.setChart(this.ooption);
-            } else {
-                this.option.yAxis.data = this.ooption.xdata;
-                this.option.series[0].data = this.ooption.data;
-                this.chartObj.setOption(this.option);
-            }
-        }
-    },
-    watch: {
-        EloginTimeArray: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.setArray(newValue)
-                this.$forceUpdate();
-            },
-        },
-    },
-    mounted() {
-        this.setArray(this.EloginTimeArray)
-        var _this = this;
-        window.addEventListener("resize", () => {
-            if (_this.chartObj) {
-                _this.chartObj.resize();
-            }
+        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);
+      });
     },
+  },
+  watch: {
+  },
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
 };
 </script>
-  
+
 <style scoped>
 .data_body {
-    height: 100%;
-    position: relative;
-    border-radius: 5px;
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 0;
-    width: 95%;
-    background: #fff;
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
 }
-</style>
-  
+</style>

src/components/pages/dataBoardNew/student/stuAct/index.vue

@@ -1,93 +1,100 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%;">
-      <el-table
-        :data="tableData"
-        style="width: 100%;"
-        :header-cell-style="{ background: '#E0EAFB', color:'#000' }"
-        :row-class-name="tableRowClassName"
-        class="tableClass"
-      >
-      <el-table-column label="排行" min-width="50" align="center">
-          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
-        </el-table-column>
-        <el-table-column
-          prop="name"
-          label="班级名称"
-          min-width="80"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column prop="sum" label="作业数量" min-width="80" align="center">
-        </el-table-column>
-      </el-table>
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    courseClass: {
-      type: Array,
-      default: []
-    },
-  },
   data() {
     return {
-      tableData: [
-        // { rank: "1", name: "一年级", sum: "2356" },
-        // { rank: "2", name: "二年级", sum: "2256" },
-        // { rank: "3", name: "三年级", sum: "2156" },
-        // { rank: "4", name: "四年级", sum: "1356" },
-        // { rank: "5", name: "五年级", sum: "1256" },
-        // { rank: "6", name: "六年级", sum: "1056" },
-        // { rank: "7", name: "七年级", sum: "956" },
-        // { rank: "8", name: "八年级", sum: "856" },
-      ],
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c}%",
+        },
+        legend: {
+          data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
+        },
+        series: [
+          {
+            type: "funnel",
+            left: "10%",
+            top: 60,
+            bottom: 20,
+            width: "95%",
+            min: 0,
+            max: 100,
+            minSize: "0%",
+            maxSize: "100%",
+            sort: "descending",
+            label: {
+              show: true,
+              position: "inside",
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: "solid",
+              },
+            },
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 1,
+            },
+            data: [
+              { value: 20, name: "教学评一体化课程" },
+              { value: 40, name: "已评价课程" },
+              { value: 60, name: "已提交作业课程" },
+              { value: 80, name: "设置评价课程" },
+              { value: 100, name: "课程总数" },
+            ],
+          },
+        ],
+      },
     };
   },
   methods: {
-    tableRowClassName({ row, rowIndex }) {
-      if ((rowIndex + 1) % 2 === 0) {
-        return "even_row";
-      } else {
-        return "";
-      }
+    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);
+      });
     },
-    setArray(array){
-      this.tableData = []
-      for(var i = 0;i<array.length;i++){
-        this.tableData.push({
-          sum:array[i].works,
-          name:array[i].name
-        })
-      }
-      this.tableData = this.tableData.sort(function(a,b){
-        return b.sum - a.sum;
-      })
-    }
   },
   watch: {
-    courseClass: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.setArray(newValue)
-        this.$forceUpdate();
-      },
-    },
+    
   },
   mounted() {
-    this.setArray(this.courseClass)
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
   },
 };
 </script>
 
 <style scoped>
-.el-table >>> .even_row {
-  background-color: #f2f7ff !important;
-}
 .data_body {
   height: 100%;
   /* display: flex; */
@@ -99,10 +106,5 @@ export default {
   padding: 0;
   width: 95%;
   background: #fff;
-  overflow: auto;
-}
-
-.tableClass >>> td, .tableClass >>> th{
-  padding: 5px 0;
 }
 </style>

src/components/pages/dataBoardNew/student/studentInfo/index.vue

@@ -9,7 +9,7 @@
 <script>
 export default {
     props: {
-        EscoreArray2: {
+        courseArray: {
             type: Array,
         },
     },
@@ -17,59 +17,114 @@ export default {
         return {
             chartObj: null,
             ooption: {
-                xdata: [],
-                sdata: [],
+                hours: [],
+                days: [],
+                data: [],
             },
             option: {
-                xAxis: {
-                    // data: ['一年级一班', '一年级二班', '一年级三班', '一年级四班', '一年级五班', '一年级六班', '一年级七班']
-                    data: []
-                },
                 tooltip: {
-                    formatter: function (params, ticket, callback) {
-                        return `${params.marker + params.name}</br>最高分：${params.value[2]}</br>最低分：${params.value[1]}`;
-                    }
-                },
-                dataZoom: [
-                    {
-                        // start: 50,
-                        type: 'inside',
-                    },
-                    {
-                        type: 'slider',
+                    position: 'top',
+                    formatter: function (params) {
+                        // console.log(params);
+                        return params.marker + params.name + ' ' + params.data[1];//params.seriesName + '<br>' + params.
+
                     }
-                ],
-                yAxis: {},
-                grid: {
-                    top: '5%',
-                    left: '0%',
-                    right: '0%',
-                    bottom: '13%',
-                    containLabel: true
                 },
-                series: [
-                    {
-                        type: 'candlestick',
-                        data: [
-                            // [70, 80, 70, 80],
-                            // [60, 90, 60, 90],
-                            // [50, 80, 50, 80],
-                            // [78, 88, 78, 88],
-                            // [85, 98, 85, 98],
-                            // [75, 95, 75, 95],
-                            // [65, 100, 65, 100],
-                            // [55, 99, 55, 99]
-                        ],
-                        itemStyle: {
-                            color: '#17C469',
-                            borderColor: null
-                        }
-                    }
-                ]
+                title: [],
+                singleAxis: [],
+                series: []
             },
         };
     },
     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) => {
@@ -81,51 +136,162 @@ export default {
                     //劳动课程
                     this.$el.querySelector("#charts_canvas")
                 );
-                this.option.xAxis.data = option.xdata;
-                this.option.series[0].data = option.sdata;
-                chartObj.off('click')
-                let _this = this
-                chartObj.on('click', function (param) {
-                    console.log(param);  //X轴的值
-                    _this.$emit('openDataClass', param.dataIndex)
+                const hours = 
+                [
+                    '1班', '2班', '3班', '4班', '5班', '6班'
+                ];
+                // prettier-ignore
+                const 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 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];
+                        }
+                    });
                 });
+                data.forEach(function (dataItem) {
+                    series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+                });
+                this.option.title = title
+                this.option.singleAxis = singleAxis
+                this.option.series = series
                 // 初始化雷达图
                 this.chartObj = chartObj;
                 this.chartObj.setOption(this.option);
             });
         },
-        setArray(Array) {
-            this.ooption = {
-                xdata: [],
-                sdata: [],
-            }
-            let _array = Array
-            for (var i = 0; i < _array.length; i++) {
-                this.ooption.xdata.push(_array[i].name)
-                this.ooption.sdata.push([_array[i].min, _array[i].max, _array[i].min, _array[i].max])
-            }
+        setJson(array) {
+            this.setChart(this.ooption);
+            if (array != undefined && array.length > 0) {
+                this.ooption = {
+                    hours: [],
+                    days: [],
+                    data: [],
+                }
+                let _grade = []
+                let _subject = []
+                let data = []
 
-            if (!this.chartObj) {
-                this.setChart(this.ooption);
-            } else {
-                this.option.xAxis.data = this.ooption.xdata;
-                this.option.series[0].data = this.ooption.sdata;
-                this.chartObj.setOption(this.option);
+                array.forEach(function (item, idx) {
+                    _grade.push(item.name)
+                })
+
+                array[0].subject.forEach(function (item, idx) {
+                    _subject.push(item.name)
+                })
+                array.forEach(function (item, idx) {
+                    item.subject.forEach(function (item2, idx2) {
+                        data.push([idx, idx2, item2.course])
+                    })
+                })
+                this.ooption.hours = _subject
+                this.ooption.days = _grade
+                this.ooption.data = data
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    const hours = this.ooption.hours;
+                    // prettier-ignore
+                    const days = this.ooption.days;
+                    // prettier-ignore
+                    const data = this.ooption.data;
+                    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]]);
+                    });
+
+                    this.option.title = title
+                    this.option.singleAxis = singleAxis
+                    this.option.series = series
+                    this.chartObj.setOption(this.option);
+                }
             }
         }
     },
     watch: {
-        EscoreArray2: {
+        courseArray: {
             immediate: true,
             deep: true,
             handler(newValue, oldValue) {
-                this.setArray(newValue)
+                // newValue = newValue.filter(item => {
+                //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+                // })
+                this.setJson(newValue)
                 this.$forceUpdate();
             },
         },
     },
     mounted() {
-        this.setArray(this.EscoreArray2)
+        // this.courseArray = this.courseArray.filter(item => {
+        //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+        // })
+
+        this.setJson(this.courseArray)
         var _this = this;
         window.addEventListener("resize", () => {
             if (_this.chartObj) {
@@ -139,10 +305,8 @@ export default {
 <style scoped>
 .data_body {
     height: 100%;
-    /* display: flex; */
     position: relative;
     border-radius: 5px;
-    /* border: 1px solid #eee; */
     margin: 0 auto;
     box-sizing: border-box;
     padding: 0;

src/components/pages/dataBoardNew/student/studentInfo2/index.vue

@@ -1,158 +1,94 @@
 <template>
-    <div class="data_body">
-        <div style="width: 100%; height: 100%" v-if="this.ooption.xdata.length">
-            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-        </div>
-        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;" v-show="!this.ooption.xdata.length">暂无数据</div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
+  </div>
 </template>
-  
+
 <script>
 export default {
-    props: {
-        evCourseArray: {
-            type: Array,
-            default: []
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        data: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
         },
-        eva: {
-            type: String,
-            default: ''
-        }
-    },
-    data() {
-        return {
-            chartObj: null,
-            ooption: {
-                xdata: [],
-                sdata: [],
-            },
-            option: {
-                tooltip: {},
-                radar: {
-                    axisName: {
-                        color: "#000"
-                    },
-                    // shape: 'circle',
-                    indicator: [
-                        // { name: '目标一', max: 5 },
-                        // { name: '目标二', max: 5 },
-                        // { name: '目标三', max: 5 },
-                        // { name: '目标四', max: 5 },
-                        // { name: '目标五', max: 5 }
-                    ]
-                },
-                series: [
-                    {
-                        name: '学生综合评价',
-                        type: 'radar',
-                        data: [
-                            {
-                                areaStyle: {
-                                    opacity: 0.2,
-                                    color: '#0061FF'
-                                },
-                                itemStyle: {
-                                    color: '#0061FF',
-                                    lineStyle: {
-                                    color: '#0061FF'
-                                    }
-                                },
-                                // 5, 4, 3, 5, 5, 2
-                                value: [],
-                                name: ''
-                            }
-                        ]
-                    }
-                ]
-            },
-        };
-    },
-    methods: {
-        setChart(option) {
-            // 雷达图显示的标签
-            let newPromise = new Promise((resolve) => {
-                resolve();
-            });
-            //然后异步执行echarts的初始化函数
-            newPromise.then(() => {
-                const chartObj = this.$echarts.init(
-                    //劳动课程
-                    this.$el.querySelector("#charts_canvas")
-                );
-                this.option.radar.indicator = option.xdata;
-                this.option.series[0].data[0].value = option.sdata;
-                // 初始化雷达图
-                this.chartObj = chartObj;
-                this.chartObj.setOption(this.option);
-            });
-        },
-        setArray(array) {
-            this.ooption = {
-                xdata: [],
-                sdata: [],
-            }
-            for(var i = 0;i<array.length;i++){
-                if(array[i].evid == this.eva){
-                    this.ooption.xdata = array[i].indicator
-                    this.ooption.sdata = array[i].value
-                    break;
-                }
-            }
-            setTimeout(() => {
-                // if (!this.chartObj) {
-                    this.setChart(this.ooption);
-                // } else {
-                //     this.option.radar.indicator = this.ooption.xdata;
-                //     this.option.series[0].data[0].value = this.ooption.sdata;
-                //     this.chartObj.setOption(this.option);
-                // }
-            }, 100);
-            this.$forceUpdate();
-        },
-    },
-    watch: {
-        evCourseArray: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.setArray(newValue)
-                this.$forceUpdate();
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
             },
-        },
-        eva: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.setArray(this.evCourseArray)
-                this.$forceUpdate();
+            labelLine: {
+              show: true,
             },
-        },
-    },
-    mounted() {
-        this.setArray(this.evCourseArray)
-        // this.setChart(this.ooption);
-        var _this = this;
-        window.addEventListener("resize", () => {
-            if (_this.chartObj) {
-                _this.chartObj.resize();
-            }
-        });
+            data: [
+              { value: 100, name: "一年级" },
+              { value: 150, name: "二年级" },
+              { value: 223, name: "三年级" },
+              { value: 216, name: "四年级" },
+              { value: 130, name: "五年级" },
+              { value: 208, 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);
+      });
     },
+  },
+  watch: {
+  },
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
 };
 </script>
-  
+
 <style scoped>
 .data_body {
-    height: 100%;
-    /* display: flex; */
-    position: relative;
-    border-radius: 5px;
-    /* border: 1px solid #eee; */
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 0;
-    width: 95%;
-    background: #fff;
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
 }
-</style>
-  
+</style>

src/components/pages/dataBoardNew/student/toolUser/index.vue

@@ -0,0 +1,314 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          position: "top",
+        },
+        grid: {
+          height: "50%",
+          top: "10%",
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "12a",
+            "1a",
+            "2a",
+            "3a",
+            "4a",
+            "5a",
+            "6a",
+            "7a",
+            "8a",
+            "9a",
+            "10a",
+            "11a",
+            "12p",
+            "1p",
+            "2p",
+            "3p",
+            "4p",
+            "5p",
+            "6p",
+            "7p",
+            "8p",
+            "9p",
+            "10p",
+            "11p",
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "星期一",
+            "星期二",
+            "星期三",
+            "星期四",
+            "星期五",
+            "星期六",
+            "星期日",
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        visualMap: {
+          min: 0,
+          max: 10,
+          calculable: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: "15%",
+        },
+        series: [
+          {
+            name: "Punch Card",
+            type: "heatmap",
+            data: [
+              [0, 0, 5],
+              [0, 1, 1],
+              [0, 2, 0],
+              [0, 3, 0],
+              [0, 4, 0],
+              [0, 5, 0],
+              [0, 6, 0],
+              [0, 7, 0],
+              [0, 8, 0],
+              [0, 9, 0],
+              [0, 10, 0],
+              [0, 11, 2],
+              [0, 12, 4],
+              [0, 13, 1],
+              [0, 14, 1],
+              [0, 15, 3],
+              [0, 16, 4],
+              [0, 17, 6],
+              [0, 18, 4],
+              [0, 19, 4],
+              [0, 20, 3],
+              [0, 21, 3],
+              [0, 22, 2],
+              [0, 23, 5],
+              [1, 0, 7],
+              [1, 1, 0],
+              [1, 2, 0],
+              [1, 3, 0],
+              [1, 4, 0],
+              [1, 5, 0],
+              [1, 6, 0],
+              [1, 7, 0],
+              [1, 8, 0],
+              [1, 9, 0],
+              [1, 10, 5],
+              [1, 11, 2],
+              [1, 12, 2],
+              [1, 13, 6],
+              [1, 14, 9],
+              [1, 15, 11],
+              [1, 16, 6],
+              [1, 17, 7],
+              [1, 18, 8],
+              [1, 19, 12],
+              [1, 20, 5],
+              [1, 21, 5],
+              [1, 22, 7],
+              [1, 23, 2],
+              [2, 0, 1],
+              [2, 1, 1],
+              [2, 2, 0],
+              [2, 3, 0],
+              [2, 4, 0],
+              [2, 5, 0],
+              [2, 6, 0],
+              [2, 7, 0],
+              [2, 8, 0],
+              [2, 9, 0],
+              [2, 10, 3],
+              [2, 11, 2],
+              [2, 12, 1],
+              [2, 13, 9],
+              [2, 14, 8],
+              [2, 15, 10],
+              [2, 16, 6],
+              [2, 17, 5],
+              [2, 18, 5],
+              [2, 19, 5],
+              [2, 20, 7],
+              [2, 21, 4],
+              [2, 22, 2],
+              [2, 23, 4],
+              [3, 0, 7],
+              [3, 1, 3],
+              [3, 2, 0],
+              [3, 3, 0],
+              [3, 4, 0],
+              [3, 5, 0],
+              [3, 6, 0],
+              [3, 7, 0],
+              [3, 8, 1],
+              [3, 9, 0],
+              [3, 10, 5],
+              [3, 11, 4],
+              [3, 12, 7],
+              [3, 13, 14],
+              [3, 14, 13],
+              [3, 15, 12],
+              [3, 16, 9],
+              [3, 17, 5],
+              [3, 18, 5],
+              [3, 19, 10],
+              [3, 20, 6],
+              [3, 21, 4],
+              [3, 22, 4],
+              [3, 23, 1],
+              [4, 0, 1],
+              [4, 1, 3],
+              [4, 2, 0],
+              [4, 3, 0],
+              [4, 4, 0],
+              [4, 5, 1],
+              [4, 6, 0],
+              [4, 7, 0],
+              [4, 8, 0],
+              [4, 9, 2],
+              [4, 10, 4],
+              [4, 11, 4],
+              [4, 12, 2],
+              [4, 13, 4],
+              [4, 14, 4],
+              [4, 15, 14],
+              [4, 16, 12],
+              [4, 17, 1],
+              [4, 18, 8],
+              [4, 19, 5],
+              [4, 20, 3],
+              [4, 21, 7],
+              [4, 22, 3],
+              [4, 23, 0],
+              [5, 0, 2],
+              [5, 1, 1],
+              [5, 2, 0],
+              [5, 3, 3],
+              [5, 4, 0],
+              [5, 5, 0],
+              [5, 6, 0],
+              [5, 7, 0],
+              [5, 8, 2],
+              [5, 9, 0],
+              [5, 10, 4],
+              [5, 11, 1],
+              [5, 12, 5],
+              [5, 13, 10],
+              [5, 14, 5],
+              [5, 15, 7],
+              [5, 16, 11],
+              [5, 17, 6],
+              [5, 18, 0],
+              [5, 19, 5],
+              [5, 20, 3],
+              [5, 21, 4],
+              [5, 22, 2],
+              [5, 23, 0],
+              [6, 0, 1],
+              [6, 1, 0],
+              [6, 2, 0],
+              [6, 3, 0],
+              [6, 4, 0],
+              [6, 5, 0],
+              [6, 6, 0],
+              [6, 7, 0],
+              [6, 8, 0],
+              [6, 9, 0],
+              [6, 10, 1],
+              [6, 11, 0],
+              [6, 12, 2],
+              [6, 13, 1],
+              [6, 14, 3],
+              [6, 15, 4],
+              [6, 16, 0],
+              [6, 17, 0],
+              [6, 18, 0],
+              [6, 19, 0],
+              [6, 20, 1],
+              [6, 21, 2],
+              [6, 22, 2],
+              [6, 23, 6],
+            ].map(function (item) {
+              return [item[1], item[0], item[2] || "-"];
+            }),
+            label: {
+              show: true,
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/teacher/chartList/bar.vue

@@ -0,0 +1,86 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "value",
+          data: [0, 50, 100, 150, 200, 250],
+        },
+        yAxis: {
+          type: "category",
+          data: ["五年级", "四年级", "三年级", "二年级", "一年级"],
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/teacher/chartList/funPlot.vue

@@ -12,62 +12,35 @@
 
 <script>
 export default {
-  props: {
-    pusaDep: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
+      ooption: {
+        xdata: [],
+        type: [],
+      },
       option: {
         tooltip: {
           trigger: "item",
-          formatter: "{b} : {c}%",
         },
-        legend: {
-          data: ["评价", "授课", "创建", "登录"],
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
         },
         series: [
           {
-            type: "funnel",
-            left: "10%",
-            top: 60,
-            bottom: 20,
-            width: "95%",
-            min: 0,
-            max: 100,
-            minSize: "0%",
-            maxSize: "100%",
-            sort: "descending",
-            label: {
-              show: true,
-              position: "inside",
-            },
-            labelLine: {
-              length: 10,
-              lineStyle: {
-                width: 1,
-                type: "solid",
-              },
-            },
-            itemStyle: {
-              borderColor: "#fff",
-              borderWidth: 1,
-            },
-            data: [
-              // { value: 20, name: "登录" },
-              // { value: 40, name: "创建" },
-              // { value: 60, name: "授课" },
-              // { value: 80, name: "评价" },
-            ],
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
           },
         ],
       },
     };
   },
   methods: {
-    setChart(array) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -78,34 +51,14 @@ export default {
           this.$el.querySelector("#charts_canvas")
         );
         // 初始化雷达图
-        this.option.series[0].data = array;
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
-    setArray(array){
-        let _array = array;
-
-        if (!this.chartObj) {
-          this.setChart(_array);
-        } else {
-          this.option.series[0].data = _array;
-          this.chartObj.setOption(this.option);
-        }
-        this.$forceUpdate();
-    },
-  },
-  watch: {
-    pusaDep: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.setArray(newValue)
-      },
-    },
   },
+  watch: {},
   mounted() {
-    this.setArray(this.pusaDep)
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {
@@ -113,9 +66,6 @@ export default {
       }
     });
   },
-  created() {
-    this.setChart();
-  },
 };
 </script>
 

src/components/pages/dataBoardNew/teacher/chartList/teaAct.vue

@@ -1,95 +1,100 @@
 <template>
   <div class="data_body">
-    <div style="width: 100%; height: 100%; ">
-      <el-table
-        :data="tableData"
-        style="width: 100%; "
-        :header-cell-style="{ background: '#E0EAFB', color: '#000' }"
-        :row-class-name="tableRowClassName"
-        class="tableClass"
-      >
-        <el-table-column label="排行" min-width="50" align="center">
-          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
-        </el-table-column>
-        <el-table-column
-          prop="name"
-          label="课程名称"
-          min-width="80"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column prop="sum" label="作业数量" min-width="80" align="center">
-        </el-table-column>
-        <el-table-column prop="teacher" label="创建老师" min-width="80" align="center">
-        </el-table-column>
-      </el-table>
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    cWorkSum: {
-      type: Array,
-    },
-  },
   data() {
     return {
-      tableData: [
-        // { rank: "1", name: "一年级", sum: "2356" },
-        // { rank: "2", name: "二年级", sum: "2256" },
-        // { rank: "3", name: "三年级", sum: "2156" },
-        // { rank: "4", name: "四年级", sum: "1356" },
-        // { rank: "5", name: "五年级", sum: "1256" },
-        // { rank: "6", name: "六年级", sum: "1056" },
-        // { rank: "7", name: "七年级", sum: "956" },
-        // { rank: "8", name: "八年级", sum: "856" },
-      ],
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c}%",
+        },
+        legend: {
+          data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
+        },
+        series: [
+          {
+            type: "funnel",
+            left: "10%",
+            top: 60,
+            bottom: 20,
+            width: "95%",
+            min: 0,
+            max: 100,
+            minSize: "0%",
+            maxSize: "100%",
+            sort: "descending",
+            label: {
+              show: true,
+              position: "inside",
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: "solid",
+              },
+            },
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 1,
+            },
+            data: [
+              { value: 20, name: "教学评一体化课程" },
+              { value: 40, name: "已评价课程" },
+              { value: 60, name: "已提交作业课程" },
+              { value: 80, name: "设置评价课程" },
+              { value: 100, name: "课程总数" },
+            ],
+          },
+        ],
+      },
     };
   },
-  methods:{
-    tableRowClassName({ row, rowIndex }) {
-      if ((rowIndex + 1) % 2 === 0) {
-        return "even_row";
-      } else {
-        return "";
-      }
+  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);
+      });
     },
-    setArray(array){
-      this.tableData = []
-      for(var i = 0;i<array.length;i++){
-        this.tableData.push({
-          sum:array[i].count,
-          name:array[i].title,
-          teacher:array[i].teacher
-        })
-      }
-      this.tableData = this.tableData.sort(function(a,b){
-        return b.sum - a.sum;
-      })
-    }
   },
   watch: {
-    cWorkSum: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.setArray(newValue)
-        this.$forceUpdate();
-      },
-    },
+    
   },
   mounted() {
-    this.setArray(this.cWorkSum)
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
   },
 };
 </script>
 
 <style scoped>
-.el-table >>> .even_row {
-  background-color: #f2f7ff !important;
-}
 .data_body {
   height: 100%;
   /* display: flex; */
@@ -101,10 +106,5 @@ export default {
   padding: 0;
   width: 95%;
   background: #fff;
-  overflow: auto;
-}
-
-.tableClass >>> td, .tableClass >>> th{
-  padding: 5px 0;
 }
 </style>

src/components/pages/dataBoardNew/teacher/chartList/teaData.vue

@@ -1,228 +1,317 @@
 <template>
-  <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
     </div>
-  </div>
 </template>
-
+  
 <script>
 export default {
-  props: {
-    courseArray: {
-      type: Array,
-    },
-  },
-  data() {
-    return {
-      chartObj: null,
-      ooption: {
-        hours: [],
-        days: [],
-        data: [],
-      },
-      option: {
-        tooltip: {
-          position: "top",
-          formatter: function (params) {
-            // console.log(params);
-            return params.marker + params.name + " " + params.data[1]; //params.seriesName + '<br>' + params.
-          },
+    props: {
+        courseArray: {
+            type: Array,
         },
-        title: [],
-        singleAxis: [],
-        series: [],
-      },
-    };
-  },
-  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;
-        // const hours = [
-        //   "语文",
-        //   "数学",
-        //   "英语",
-        //   "科学",
-        //   "体育",
-        //   "音乐",
-        //   "美术",
-        //   "劳动",
-        //   "其他",
-        // ];
-        // prettier-ignore
-        const days = option.days
-        // const days = [
-        //     '一年级', '二年级', '三年级',
-        //     '四年级', '五年级', '六年级'
-        // ];
-        // prettier-ignore
-        const data = option.data
-        // const data = [[0,0,3],[0,2,4],[0,3,8],[0,6,6],[0,8,4],[1,0,3],[1,2,4],[1,3,8],[1,6,6],[1,8,4],[2,1,13],[2,3,6],[2,4,3],[2,6,6],[2,8,4],[3,3,6],[3,4,3],[3,6,6],[3,7,4],[4,0,10],[4,2,13],[4,3,6],[4,4,3],[4,6,6],[4,7,3],[5,2,4],[5,3,6],[5,4,3],[5,5,10],[5,6,10],[5,7,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,
+    },
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                hours: [],
+                days: [],
+                data: [],
             },
-          });
-          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;
+            option: {
+                tooltip: {
+                    position: 'top',
+                    formatter: function (params) {
+                        // console.log(params);
+                        return params.marker + params.name + ' ' + params.data[1];//params.seriesName + '<br>' + params.
+
+                    }
+                },
+                title: [],
+                singleAxis: [],
+                series: []
             },
-          });
-        });
-        data.forEach(function (dataItem) {
-          series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
-        });
-        chartObj.off('click')
-        let _this = this
-        chartObj.on('click', function (param) {
-          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);
-      });
-    },
-    setJson(array) {
-      if (array != undefined && array.length > 0) {
-        this.ooption = {
-          hours: [],
-          days: [],
-          data: [],
         };
-        let _grade = [];
-        let _subject = [];
-        let data = [];
-
-        array.forEach(function (item, idx) {
-          _grade.push(item.name);
-        });
+    },
+    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])
+        //         });
 
-        array[0].subject.forEach(function (item, idx) {
-          _subject.push(item.name);
-        });
-        array.forEach(function (item, idx) {
-          item.subject.forEach(function (item2, idx2) {
-            data.push([idx, idx2, item2.course]);
-          });
-        });
-        this.ooption.hours = _subject;
-        this.ooption.days = _grade;
-        this.ooption.data = data;
-        if (!this.chartObj) {
-          this.setChart(this.ooption);
-        } else {
-          const hours = this.ooption.hours;
-          // prettier-ignore
-          const days = this.ooption.days;
-          // prettier-ignore
-          const data = this.ooption.data;
-          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 + "%",
+        //         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) => {
+                resolve();
             });
-            series.push({
-              singleAxisIndex: idx,
-              coordinateSystem: "singleAxis",
-              type: "scatter",
-              data: [],
-              symbolSize: function (dataItem) {
-                return dataItem[1] * 3;
-              },
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+                const hours = 
+                [
+                    '1班', '2班', '3班', '4班', '5班', '6班'
+                ];
+                // prettier-ignore
+                const 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 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];
+                        }
+                    });
+                });
+                data.forEach(function (dataItem) {
+                    series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+                });
+                this.option.title = title
+                this.option.singleAxis = singleAxis
+                this.option.series = series
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
             });
-          });
-          data.forEach(function (dataItem) {
-            series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
-          });
+        },
+        setJson(array) {
+            this.setChart(this.ooption);
+            if (array != undefined && array.length > 0) {
+                this.ooption = {
+                    hours: [],
+                    days: [],
+                    data: [],
+                }
+                let _grade = []
+                let _subject = []
+                let data = []
 
-          this.option.title = title;
-          this.option.singleAxis = singleAxis;
-          this.option.series = series;
-          this.chartObj.setOption(this.option);
+                array.forEach(function (item, idx) {
+                    _grade.push(item.name)
+                })
+
+                array[0].subject.forEach(function (item, idx) {
+                    _subject.push(item.name)
+                })
+                array.forEach(function (item, idx) {
+                    item.subject.forEach(function (item2, idx2) {
+                        data.push([idx, idx2, item2.course])
+                    })
+                })
+                this.ooption.hours = _subject
+                this.ooption.days = _grade
+                this.ooption.data = data
+                if (!this.chartObj) {
+                    this.setChart(this.ooption);
+                } else {
+                    const hours = this.ooption.hours;
+                    // prettier-ignore
+                    const days = this.ooption.days;
+                    // prettier-ignore
+                    const data = this.ooption.data;
+                    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]]);
+                    });
+
+                    this.option.title = title
+                    this.option.singleAxis = singleAxis
+                    this.option.series = series
+                    this.chartObj.setOption(this.option);
+                }
+            }
         }
-      }
     },
-  },
-  watch: {
-    courseArray: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.setJson(newValue);
-        this.$forceUpdate();
-      },
+    watch: {
+        courseArray: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                // newValue = newValue.filter(item => {
+                //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+                // })
+                this.setJson(newValue)
+                this.$forceUpdate();
+            },
+        },
+    },
+    mounted() {
+        // this.courseArray = this.courseArray.filter(item => {
+        //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
+        // })
+
+        this.setJson(this.courseArray)
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
     },
-  },
-  mounted() {
-    this.setJson(this.courseArray);
-    var _this = this;
-    window.addEventListener("resize", () => {
-      if (_this.chartObj) {
-        _this.chartObj.resize();
-      }
-    });
-  },
 };
 </script>
-
+  
 <style scoped>
 .data_body {
-  height: 100%;
-  /* display: flex; */
-  position: relative;
-  border-radius: 5px;
-  /* border: 1px solid #eee; */
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 95%;
-  background: #fff;
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
 }
-</style>
+</style>
+  

src/components/pages/dataBoardNew/teacher/chartList/teaFre.vue

@@ -12,34 +12,21 @@
 
 <script>
 export default {
-  props: {
-    monthArray: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
       ooption: {
         xdata: [],
-        teacher: [],
+        course: [],
       },
       option: {
-        title: {
-          text: '登录频次',
-          textStyle: {
-            fontSize: 12,
-          },
-          padding: [0, 0, 0, 10]
-        },
         tooltip: {
-          trigger: "axis",
+          trigger: "item",
         },
         xAxis: {
           type: "category",
-          boundaryGap: true,
-          // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
-          data: [],
+          boundaryGap: false,
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         },
         yAxis: {
           type: "value",
@@ -48,23 +35,21 @@ export default {
           top: "15%",
           left: "5%",
           right: "5%",
-          bottom: "0%",
+          bottom: "5%",
           containLabel: true,
         },
         series: [
           {
-            name: "教师",
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
             type: "line",
-            // data: [220, 182, 191, 234, 290, 330]
-            data: [],
-            areaStyle: {}
+            areaStyle: {},
           },
         ],
       },
     };
   },
   methods: {
-    setChart(option) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -72,54 +57,17 @@ export default {
       //然后异步执行echarts的初始化函数
       newPromise.then(() => {
         const chartObj = this.$echarts.init(
-          //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
-        this.option.xAxis.data = option.xdata;
-        this.option.series[0].data = option.teacher;
         // 初始化雷达图
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
     },
   },
-  watch: {
-    monthArray: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.ooption = {
-          xdata: [],
-          teacher: [],
-        };
-        let _array = newValue;
-        for (var i = 0; i < _array.length; i++) {
-          this.ooption.xdata.push(_array[i].Month + "月");
-          this.ooption.teacher.push(_array[i].teacher);
-        }
-
-        if (!this.chartObj) {
-          this.setChart(this.ooption);
-        } else {
-          this.option.xAxis.data = this.ooption.xdata;
-          this.option.series[0].data = this.ooption.teacher;
-          this.chartObj.setOption(this.option);
-        }
-        this.$forceUpdate();
-      },
-    },
-  },
+  watch: {},
   mounted() {
-    this.ooption = {
-      xdata: [],
-      teacher: [],
-    };
-    let _array = this.monthArray;
-    for (var i = 0; i < _array.length; i++) {
-      this.ooption.xdata.push(_array[i].Month + "月");
-      this.ooption.teacher.push(_array[i].teacher);
-    }
-    this.setChart(this.ooption);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

src/components/pages/dataBoardNew/teacher/chartList/toolUse.vue

@@ -0,0 +1,314 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          position: "top",
+        },
+        grid: {
+          height: "50%",
+          top: "10%",
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "12a",
+            "1a",
+            "2a",
+            "3a",
+            "4a",
+            "5a",
+            "6a",
+            "7a",
+            "8a",
+            "9a",
+            "10a",
+            "11a",
+            "12p",
+            "1p",
+            "2p",
+            "3p",
+            "4p",
+            "5p",
+            "6p",
+            "7p",
+            "8p",
+            "9p",
+            "10p",
+            "11p",
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "星期一",
+            "星期二",
+            "星期三",
+            "星期四",
+            "星期五",
+            "星期六",
+            "星期日",
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        visualMap: {
+          min: 0,
+          max: 10,
+          calculable: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: "15%",
+        },
+        series: [
+          {
+            name: "Punch Card",
+            type: "heatmap",
+            data: [
+              [0, 0, 5],
+              [0, 1, 1],
+              [0, 2, 0],
+              [0, 3, 0],
+              [0, 4, 0],
+              [0, 5, 0],
+              [0, 6, 0],
+              [0, 7, 0],
+              [0, 8, 0],
+              [0, 9, 0],
+              [0, 10, 0],
+              [0, 11, 2],
+              [0, 12, 4],
+              [0, 13, 1],
+              [0, 14, 1],
+              [0, 15, 3],
+              [0, 16, 4],
+              [0, 17, 6],
+              [0, 18, 4],
+              [0, 19, 4],
+              [0, 20, 3],
+              [0, 21, 3],
+              [0, 22, 2],
+              [0, 23, 5],
+              [1, 0, 7],
+              [1, 1, 0],
+              [1, 2, 0],
+              [1, 3, 0],
+              [1, 4, 0],
+              [1, 5, 0],
+              [1, 6, 0],
+              [1, 7, 0],
+              [1, 8, 0],
+              [1, 9, 0],
+              [1, 10, 5],
+              [1, 11, 2],
+              [1, 12, 2],
+              [1, 13, 6],
+              [1, 14, 9],
+              [1, 15, 11],
+              [1, 16, 6],
+              [1, 17, 7],
+              [1, 18, 8],
+              [1, 19, 12],
+              [1, 20, 5],
+              [1, 21, 5],
+              [1, 22, 7],
+              [1, 23, 2],
+              [2, 0, 1],
+              [2, 1, 1],
+              [2, 2, 0],
+              [2, 3, 0],
+              [2, 4, 0],
+              [2, 5, 0],
+              [2, 6, 0],
+              [2, 7, 0],
+              [2, 8, 0],
+              [2, 9, 0],
+              [2, 10, 3],
+              [2, 11, 2],
+              [2, 12, 1],
+              [2, 13, 9],
+              [2, 14, 8],
+              [2, 15, 10],
+              [2, 16, 6],
+              [2, 17, 5],
+              [2, 18, 5],
+              [2, 19, 5],
+              [2, 20, 7],
+              [2, 21, 4],
+              [2, 22, 2],
+              [2, 23, 4],
+              [3, 0, 7],
+              [3, 1, 3],
+              [3, 2, 0],
+              [3, 3, 0],
+              [3, 4, 0],
+              [3, 5, 0],
+              [3, 6, 0],
+              [3, 7, 0],
+              [3, 8, 1],
+              [3, 9, 0],
+              [3, 10, 5],
+              [3, 11, 4],
+              [3, 12, 7],
+              [3, 13, 14],
+              [3, 14, 13],
+              [3, 15, 12],
+              [3, 16, 9],
+              [3, 17, 5],
+              [3, 18, 5],
+              [3, 19, 10],
+              [3, 20, 6],
+              [3, 21, 4],
+              [3, 22, 4],
+              [3, 23, 1],
+              [4, 0, 1],
+              [4, 1, 3],
+              [4, 2, 0],
+              [4, 3, 0],
+              [4, 4, 0],
+              [4, 5, 1],
+              [4, 6, 0],
+              [4, 7, 0],
+              [4, 8, 0],
+              [4, 9, 2],
+              [4, 10, 4],
+              [4, 11, 4],
+              [4, 12, 2],
+              [4, 13, 4],
+              [4, 14, 4],
+              [4, 15, 14],
+              [4, 16, 12],
+              [4, 17, 1],
+              [4, 18, 8],
+              [4, 19, 5],
+              [4, 20, 3],
+              [4, 21, 7],
+              [4, 22, 3],
+              [4, 23, 0],
+              [5, 0, 2],
+              [5, 1, 1],
+              [5, 2, 0],
+              [5, 3, 3],
+              [5, 4, 0],
+              [5, 5, 0],
+              [5, 6, 0],
+              [5, 7, 0],
+              [5, 8, 2],
+              [5, 9, 0],
+              [5, 10, 4],
+              [5, 11, 1],
+              [5, 12, 5],
+              [5, 13, 10],
+              [5, 14, 5],
+              [5, 15, 7],
+              [5, 16, 11],
+              [5, 17, 6],
+              [5, 18, 0],
+              [5, 19, 5],
+              [5, 20, 3],
+              [5, 21, 4],
+              [5, 22, 2],
+              [5, 23, 0],
+              [6, 0, 1],
+              [6, 1, 0],
+              [6, 2, 0],
+              [6, 3, 0],
+              [6, 4, 0],
+              [6, 5, 0],
+              [6, 6, 0],
+              [6, 7, 0],
+              [6, 8, 0],
+              [6, 9, 0],
+              [6, 10, 1],
+              [6, 11, 0],
+              [6, 12, 2],
+              [6, 13, 1],
+              [6, 14, 3],
+              [6, 15, 4],
+              [6, 16, 0],
+              [6, 17, 0],
+              [6, 18, 0],
+              [6, 19, 0],
+              [6, 20, 1],
+              [6, 21, 2],
+              [6, 22, 2],
+              [6, 23, 6],
+            ].map(function (item) {
+              return [item[1], item[0], item[2] || "-"];
+            }),
+            label: {
+              show: true,
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  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);
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.setChart();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoardNew/teacher/chartList/workNum.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="data_body">
     <div style="width: 100%; height: 100%">
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    workNumList: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
@@ -20,51 +19,35 @@ export default {
         data: [],
       },
       option: {
-        xAxis: {
-          name: "任务数量",
-          nameTextStyle: {
-            padding: [25, 0, 0, 0],
-            verticalAlign: 'top'
-          },
-          nameGap: -45
-        },
-        grid: {
-          top: "10%",
-          left: "5%",
-          right: "5%",
-          bottom: "8%",
-          containLabel: true,
-        },
-        yAxis: {
-          name: "作业提交数量",
-        },
-        color: ["#3681FC"],
         tooltip: {
-          formatter: function (params) {
-            return (
-              params.marker +
-              params.data[2] +
-              "<br/>" +
-              "任务数量：" +
-              params.data[0] +
-              "<br/>" +
-              "作业提交数量：" +
-              params.data[1]
-            );
-          },
+          trigger: "item",
         },
         series: [
           {
-            symbolSize: 8,
-            data: [],
-            type: "scatter",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+            },
+            labelLine: {
+              show: true,
+            },
+            data: [
+              { value: 100, name: "一年级" },
+              { value: 150, name: "二年级" },
+              { value: 223, name: "三年级" },
+              { value: 216, name: "四年级" },
+              { value: 130, name: "五年级" },
+              { value: 208, name: "六年级" },
+            ],
           },
         ],
       },
     };
   },
   methods: {
-    setChart(option) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -75,47 +58,16 @@ 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])
-        });
         // 初始化雷达图
         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.setArray(this.workNumList);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

src/components/pages/dataBoardNew/teacher/chartList/workTime.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="data_body">
+  <div class="data_body" style="height: calc(100% - 100px)">
     <div style="width: 100%; height: 100%">
       <div
         id="charts_canvas"
@@ -12,68 +12,53 @@
 
 <script>
 export default {
-  props: {
-    workTime: {
-      type: Array,
-    },
-  },
   data() {
     return {
       chartObj: null,
       ooption: {
-        ydata: [],
-        teacher: [],
+        data: [],
       },
       option: {
-        title: {
-          text: '在线时长',
-          textStyle: {
-            fontSize: 12,
-          },
-          padding: [10, 0, 0, 10]
-        },
         tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          top: "10%",
-          left: "5%",
-          right: "5%",
-          bottom: "5%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          boundaryGap: [0, 0.01],
-        },
-        yAxis: {
-          type: "category",
-          // data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
-          data:[]
+          trigger: "item",
         },
+        xAxis: {},
+        yAxis: {},
         series: [
           {
-            name: "在线时长（时）",
-            type: "bar",
-            // data: [60, 110, 25, 130, 65, 80],
-            data:[],
-            itemStyle: {
-              normal: {
-                color: function (params) {
-                  return "#106bff";
-                },
-              },
-            },
+            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],
+            ],
+            type: "scatter",
           },
         ],
       },
     };
   },
   methods: {
-    setChart(option) {
+    setChart() {
       // 雷达图显示的标签
       let newPromise = new Promise((resolve) => {
         resolve();
@@ -84,8 +69,13 @@ export default {
           //劳动课程
           this.$el.querySelector("#charts_canvas")
         );
-        this.option.yAxis.data = option.ydata;
-        this.option.series[0].data = option.teacher;
+
+        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);
@@ -93,42 +83,9 @@ export default {
     },
   },
   watch: {
-    workTime: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.ooption = {
-          ydata: [],
-          teacher: [],
-        };
-        let _array = newValue;
-        for (var i = 0; i < _array.length; i++) {
-          this.ooption.ydata.push(_array[i].name);
-          this.ooption.teacher.push(_array[i].text);
-        }
-
-        if (!this.chartObj) {
-          this.setChart(this.ooption);
-        } else {
-          this.option.yAxis.data = this.ooption.ydata;
-          this.option.series[0].data = this.ooption.teacher;
-          this.chartObj.setOption(this.option);
-        }
-        this.$forceUpdate();
-      },
-    },
   },
   mounted() {
-    this.ooption = {
-      ydata: [],
-      teacher: [],
-    };
-    let _array = this.workTime;
-    for (var i = 0; i < _array.length; i++) {
-      this.ooption.ydata.push(_array[i].name);
-          this.ooption.teacher.push(_array[i].text + "小时");
-    }
-    this.setChart(this.ooption);
+    this.setChart();
     var _this = this;
     window.addEventListener("resize", () => {
       if (_this.chartObj) {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="body1" v-loading="isLoading">
+  <div class="body1">
     <!-- 教师数据 -->
     <div class="left">
       <div class="top">
@@ -10,101 +10,208 @@
           <div class="teafre">
             <div class="teaLeft">
               <div>教师总数</div>
-              <div>{{ count }}</div>
+              <div>310</div>
             </div>
             <div class="teaLeft teaRigth">
-              <div>周使用频次</div>
-              <div>{{ weekCount }}</div>
+              <div>本月登录教师用户环比</div>
+              <div>0.9%</div>
             </div>
           </div>
-          <div class="teafre" style="margin: 10px auto">
+          <div class="teafre">
             <div class="teaLeft">
-              <div>登录频次</div>
-              <div>{{ loginCount }}</div>
+              <div>本月登录教师用户总数</div>
+              <div>138</div>
             </div>
             <div class="teaLeft teaRigth">
-              <div>人均使用频次</div>
-              <div>{{ (loginCount / count).toFixed(0) }}</div>
+              <div>本月新增登录教师用户</div>
+              <div>18</div>
             </div>
           </div>
-          <TeaFre
-            style="height: calc(100% - 150px)"
-            :monthArray="loginCountMonthArray"
-          ></TeaFre>
+          <TeaFre style="height: calc(100% - 150px)"></TeaFre>
         </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
-          <div class="title">教师活跃度</div>
+          <div
+            class="title"
+            :class="{ isClick: skType == 0 }"
+            @click="skType = 0"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            在线时长
+          </div>
+          <div
+            class="title"
+            :class="{ isClick: skType == 1 }"
+            @click="skType = 1"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            登录频次
+          </div>
+          <el-select v-model="cType" class="selectBox" style="width: 110px">
+            <el-option label="全部" value="全部"></el-option>
+          </el-select>
+          <div class="timeDiv">
+            <div @click="tType = 0" :class="{ isClick: tType == 0 }">周</div>
+            <div @click="tType = 1" :class="{ isClick: tType == 1 }">月</div>
+            <div @click="tType = 2" :class="{ isClick: tType == 2 }">学期</div>
+          </div>
+        </div>
+        <div class="teafre" v-if="!oType">
+          <div class="teaLeft">
+            <div>开展频次</div>
+            <div>153</div>
+          </div>
+          <div class="teaLeft teaRigth">
+            <div>人均使用频次</div>
+            <div>4</div>
+          </div>
+        </div>
+        <div class="teafre" v-if="oType">
+          <div class="teaLeft">
+            <div>累计时长</div>
+            <div>15310</div>
+          </div>
+          <div class="teaLeft teaRigth">
+            <div>人均在线时长</div>
+            <div>4</div>
+          </div>
         </div>
         <div class="dataBox">
-          <TeaAct
-            style="height: calc(100% - 20px)"
-            :cWorkSum="cWorkSum"
-          ></TeaAct>
+          <ToolUse style="height: calc(100% - 120px)" v-if="!oType"></ToolUse>
+          <Bar style="height: calc(100% - 120px)" v-if="oType"></Bar>
+          <div class="otherCss">
+            <div v-if="!oType">切换为柱状图</div>
+            <div v-if="oType">切换为热力图</div>
+            <div class="otherImg" @click="otherEchart">
+              <img src="../../../../assets/icon/other.png" alt="" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <div class="center">
       <div class="top">
-        <div class="titleBox">
-          <div class="title">教师行为数据</div>
-        </div>
-        <div class="dataBox">
-          <div class="teafre" style="justify-content: flex-start">
+        <div class="titleBox" style="justify-content: space-between">
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
             <div
-              class="teaLeft"
-              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
+              class="title"
+              :class="{ isClick: courseType == 0 }"
+              @click="courseType = 0"
+              style="cursor: pointer; padding: 0 0 5px 0"
             >
-              <div>上传课程总数</div>
-              <div>{{ courseCount }}</div>
+              教师行为分布
             </div>
             <div
-              class="teaLeft teaRigth"
-              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
+              class="title"
+              :class="{ isClick: courseType == 1 }"
+              @click="courseType = 1"
+              style="cursor: pointer; padding: 0 0 5px 0"
             >
-              <div>各年级课程上传平均数</div>
-              <div>{{ gradeCourse.toFixed(0) }}</div>
+              教师协同情况
             </div>
-            <div
-              class="teaLeft"
-              style="align-items: flex-end; width: calc(100% / 4 - 10px)"
-            >
-              <div>各学科课程上传平均数</div>
-              <div>{{ subjectCourse.toFixed(0) }}</div>
+          </div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+            v-if="courseType == 0"
+          >
+            <el-select v-model="cType1" class="selectBox" style="width: 110px">
+              <el-option label="全部活动" value="全部活动"></el-option>
+            </el-select>
+            <el-select v-model="cType2" class="selectBox" style="width: 110px">
+              <el-option label="时长" value="时长"></el-option>
+            </el-select>
+          </div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+            v-if="courseType == 1"
+          >
+            <el-select v-model="cType3" class="selectBox" style="width: 110px">
+              <el-option label="课程" value="课程"></el-option>
+            </el-select>
+          </div>
+          <div class="timeDiv">
+            <div @click="tType1 = 0" :class="{ isClick: tType1 == 0 }">周</div>
+            <div @click="tType1 = 1" :class="{ isClick: tType1 == 1 }">月</div>
+            <div @click="tType1 = 2" :class="{ isClick: tType1 == 2 }">
+              学期
             </div>
           </div>
+        </div>
+        <div class="dataBox">
           <TeaData
-            style="height: calc(100% - 62px)"
-            :courseArray="courseArray"
-            @openCourse="openCourse2"
+            v-if="courseType == 0"
+            style="height: calc(100%)"
           ></TeaData>
+          <FunPlot
+            v-if="courseType == 1"
+            style="height: calc(100%)"
+          ></FunPlot>
         </div>
       </div>
       <div class="bottom">
-        <div class="titleBox">
-          <div class="title">平台使用深度</div>
+        <div class="titleBox" style="justify-content: space-between">
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <div
+              class="title"
+              :class="{ isClick: bType == 0 }"
+              @click="bType = 0"
+              style="cursor: pointer; padding: 0 0 5px 0"
+            >
+              课程参与情况
+            </div>
+            <div
+              class="title"
+              :class="{ isClick: bType == 1 }"
+              @click="bType = 1"
+              style="cursor: pointer; padding: 0 0 5px 0"
+            >
+              项目参与情况
+            </div>
+          </div>
+          <div class="timeDiv">
+            <div @click="sType = 0" :class="{ isClick: sType == 0 }">周</div>
+            <div @click="sType = 1" :class="{ isClick: sType == 1 }">月</div>
+            <div @click="sType = 2" :class="{ isClick: sType == 2 }">学期</div>
+          </div>
         </div>
         <div class="dataBox">
-          <div class="allBox">
+          <div class="allBox" style="height: calc(100% - 30px)">
             <div class="allBox_left">
-              <FunPlot :pusaDep="pusaDep"></FunPlot>
+              <TeaAct></TeaAct>
             </div>
             <div class="allBox_right">
               <div class="depth">
-                <span>上传课程</span>
+                <span>创建课程</span>
                 <div>
                   <el-progress
                     :width="80"
                     type="circle"
-                    :percentage="
-                      lightJson.upCourseTeachers
-                        ? (
-                            (lightJson.upCourseTeachers / lightJson.teachers) *
-                            100
-                          ).toFixed(0)
-                        : 0
-                    "
+                    :percentage="80"
                     :stroke-width="15"
                     :format="format"
                     color="#106BFF"
@@ -112,19 +219,12 @@
                 </div>
               </div>
               <div class="depth">
-                <span>创设项目</span>
+                <span>协同教研</span>
                 <div>
                   <el-progress
                     :width="80"
                     type="circle"
-                    :percentage="
-                      lightJson.upCourseUsers
-                        ? (
-                            (lightJson.upCourseUsers / lightJson.teachers) *
-                            100
-                          ).toFixed(0)
-                        : 0
-                    "
+                    :percentage="80"
                     :stroke-width="15"
                     :format="format"
                     color="#106BFF"
@@ -132,19 +232,12 @@
                 </div>
               </div>
               <div class="depth">
-                <span>协同合作</span>
+                <span>使用模板</span>
                 <div>
                   <el-progress
                     :width="80"
                     type="circle"
-                    :percentage="
-                      lightJson.upgCourseTeachers
-                        ? (
-                            (lightJson.upgCourseTeachers / lightJson.teachers) *
-                            100
-                          ).toFixed(0)
-                        : 0
-                    "
+                    :percentage="80"
                     :stroke-width="15"
                     :format="format"
                     color="#106BFF"
@@ -157,34 +250,7 @@
                   <el-progress
                     :width="80"
                     type="circle"
-                    :percentage="
-                      lightJson.commentUsers
-                        ? (
-                            (lightJson.commentUsers / lightJson.teachers) *
-                            100
-                          ).toFixed(0)
-                        : 0
-                    "
-                    :stroke-width="15"
-                    :format="format"
-                    color="#106BFF"
-                  ></el-progress>
-                </div>
-              </div>
-              <div class="depth">
-                <span>添加目标</span>
-                <div>
-                  <el-progress
-                    :width="80"
-                    type="circle"
-                    :percentage="
-                      lightJson.evaTeachers
-                        ? (
-                            (lightJson.evaTeachers / lightJson.teachers) *
-                            100
-                          ).toFixed(0)
-                        : 0
-                    "
+                    :percentage="80"
                     :stroke-width="15"
                     :format="format"
                     color="#106BFF"
@@ -197,14 +263,7 @@
                   <el-progress
                     :width="80"
                     type="circle"
-                    :percentage="
-                      lightJson.toolUsers
-                        ? (
-                            (lightJson.toolUsers / lightJson.teachers) *
-                            100
-                          ).toFixed(0)
-                        : 0
-                    "
+                    :percentage="80"
                     :stroke-width="15"
                     :format="format"
                     color="#106BFF"
@@ -212,19 +271,12 @@
                 </div>
               </div>
               <div class="depth">
-                <span>设置评价</span>
+                <span>实施评价</span>
                 <div>
                   <el-progress
                     :width="80"
                     type="circle"
-                    :percentage="
-                      lightJson.tevaTeachers
-                        ? (
-                            (lightJson.tevaTeachers / lightJson.teachers) *
-                            100
-                          ).toFixed(0)
-                        : 0
-                    "
+                    :percentage="80"
                     :stroke-width="15"
                     :format="format"
                     color="#106BFF"
@@ -232,19 +284,12 @@
                 </div>
               </div>
               <div class="depth">
-                <span>学生评价</span>
+                <span>教学评一体化</span>
                 <div>
                   <el-progress
                     :width="80"
                     type="circle"
-                    :percentage="
-                      lightJson.sevaTeachers
-                        ? (
-                            (lightJson.sevaTeachers / lightJson.teachers) *
-                            100
-                          ).toFixed(0)
-                        : 0
-                    "
+                    :percentage="80"
                     :stroke-width="15"
                     :format="format"
                     color="#106BFF"
@@ -257,36 +302,57 @@
       </div>
     </div>
     <div class="right">
-      <div class="top">
-        <div class="titleBox">
-          <div class="title">教学活动</div>
+      <div class="top" style="border-radius: 5px">
+        <div class="titleBox" style="justify-content: space-between">
+          <div class="title">年级占比</div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <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>
+          </div>
         </div>
         <div class="dataBox">
-          <WorkNum
-            :workNumList="workNumList"
-            @openCourse="openCourse"
-          ></WorkNum>
+          <WorkNum style="height: calc(100% - 40px)"></WorkNum>
         </div>
       </div>
       <div class="bottom">
-        <div class="titleBox">
-          <div class="title">在线时长</div>
+        <div class="titleBox" style="justify-content: space-between">
+          <div class="title">活动参与</div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <el-select v-model="cType6" class="selectBox" style="width: 110px">
+              <el-option label="全部年级" value="全部年级"></el-option>
+            </el-select>
+          </div>
         </div>
         <div class="dataBox">
           <div class="teafre">
             <div class="teaLeft">
-              <div>累计在线时长</div>
-              <div>{{ loginTime.toFixed(0) }}小时</div>
+              <div>人均参与课程数</div>
+              <div>18</div>
             </div>
             <div class="teaLeft teaRigth">
-              <div>师均时长</div>
-              <div>{{ (loginTime / count).toFixed(0) }}小时</div>
+              <div>人均参与项目数</div>
+              <div>18</div>
             </div>
           </div>
-          <WorkTime
-            style="height: calc(100% - 62px)"
-            :workTime="workTime"
-          ></WorkTime>
+          <WorkTime style="height: calc(100% - 72px)"></WorkTime>
         </div>
       </div>
     </div>
@@ -300,6 +366,8 @@ import TeaData from "./chartList/teaData.vue";
 import FunPlot from "./chartList/funPlot.vue";
 import WorkNum from "./chartList/workNum.vue";
 import WorkTime from "./chartList/workTime.vue";
+import ToolUse from "./chartList/toolUse.vue";
+import Bar from "./chartList/bar.vue";
 export default {
   components: {
     TeaFre,
@@ -308,6 +376,8 @@ export default {
     FunPlot,
     WorkNum,
     WorkTime,
+    ToolUse,
+    Bar,
   },
   props: {
     oid: {
@@ -319,301 +389,26 @@ export default {
   },
   data() {
     return {
-      isLoading: false,
-      count: 0,
-      loginCount: 0,
-      loginTime: 0,
-      courseCount: 0,
-      loginCountMonthArray: [],
-      weekCount: 0,
-      gradeCourse: 0,
-      subjectCourse: 0,
-      courseArray: [],
-      workNumList: [],
-      grade: [],
-      subject: [],
-      theme: [],
-      lightJson: {
-        users: 0,
-        teachers: 0,
-        students: 0,
-        upCourseTeachers: 0,
-        upCourseUsers: 0,
-        toolUsers: 0,
-        upgCourseTeachers: 0,
-        commentUsers: 0,
-        evaTeachers: 0,
-        tevaTeachers: 0,
-        sevaTeachers: 0,
-      },
-      pusaDep: [
-        { value: 0, name: "登录" },
-        { value: 0, name: "创建" },
-        { value: 0, name: "授课" },
-        { value: 0, name: "评价" },
-      ],
-      cWorkSum: [],
-      workTime: [],
+      skType: 0,
+      tType: 0,
+      tType1: 0,
+      courseType: 0,
+      bType: 0,
+      sType: 0,
+      cType: "全部",
+      cType1: "全部活动",
+      cType2: "时长",
+      cType3: "课程",
+      cType4: "全部活动",
+      cType5: "时长",
+      cType6: "全部年级",
+      oType: false,
     };
   },
-  mounted() {
-    this.getData();
-  },
+  mounted() {},
   methods: {
-    openCourse2(classIndex, subIndex) {
-      console.log(classIndex, subIndex);
-      // console.log(this.courseArray);
-      // console.log(this.courseArray[classIndex].id,this.courseArray[classIndex].subject[subIndex].id || '');
-      window.parent.postMessage(
-        {
-          tools: "openCourse",
-          typea: this.courseArray[classIndex].id,
-          typed: this.courseArray[classIndex].subject[subIndex].id || "",
-        },
-        "*"
-      );
-    },
-    openCourse(cid) {
-      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
-    },
-    getData() {
-      this.isLoading = true;
-      let params = [
-        {
-          oid: this.oid,
-          org: this.org,
-        },
-      ];
-      this.ajax
-        .post(this.$store.state.api + "selectDataBoardTeacher", params)
-        .then((res) => {
-          this.isLoading = false;
-          this.count = res.data[0][0].count;
-          this.loginCount = res.data[1][0].loginCount;
-          this.loginTime = parseInt(res.data[2][0].time) / 60 / 60;
-          this.courseCount = res.data[5][0].courseCount;
-
-          let loginCountMonthArray = [];
-          const date = new Date();
-          var Month = date.getMonth() + 1;
-          var Year = date.getFullYear();
-          for (var i = Month; i > Month - 6; i--) {
-            if (i <= 0) {
-              loginCountMonthArray.push({
-                Year: Year - 1,
-                Month: 12 + i,
-                teacher: 0,
-              });
-            } else {
-              loginCountMonthArray.push({
-                Month: i,
-                Year: Year,
-                teacher: 0,
-              });
-            }
-          }
-
-          loginCountMonthArray = loginCountMonthArray.reverse();
-          let teacherLoginCountYear = res.data[3]; // 教师半年登录次数统计
-
-          for (var i = 0; i < teacherLoginCountYear.length; i++) {
-            let _date = new Date(teacherLoginCountYear[i].create_at);
-            var _month = _date.getMonth() + 1;
-            var _year = _date.getFullYear();
-            for (var j = 0; j < loginCountMonthArray.length; j++) {
-              if (
-                _month == loginCountMonthArray[j].Month &&
-                _year == loginCountMonthArray[j].Year
-              ) {
-                loginCountMonthArray[j].teacher++;
-                break;
-              }
-            }
-          }
-
-          this.loginCountMonthArray = loginCountMonthArray;
-          this.weekCount = res.data[4][0].count;
-
-          let _grade = res.data[6]; //年级
-          let _subject = res.data[7]; //学科
-          let _course = res.data[8]; //课程
-          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++;
-              }
-            }
-          }
-          this.gradeCourse = _gradeCourse / _grade.length;
-          this.subjectCourse = _subjectCourse / _subject.length;
-          this.courseArray = _courseArray;
-
-          this.grade = _grade;
-          this.subject = _subject;
-          this.theme = res.data[9]; //主题
-          var _workCourse = res.data[10]; //带作业的课程
-          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;
-                }
-              }
-            }
-          }
-          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) {
-                wList[a[j]].work++;
-              }
-            }
-          }
-          var workNumList = Object.values(wList).map((item) => [
-            item.task,
-            item.work,
-            item.title,
-            item.cid,
-          ]);
-          this.workNumList = workNumList;
-
-          let _teachers = res.data[11][0].count; //老师数量
-          let _students = res.data[12][0].count; //学生数量
-          let _upCourseTeachers = res.data[13][0].count; //上传课程老师的数量
-          let _upCourseUsers = res.data[14][0].count; //上传项目的用户
-          let _toolUsers = res.data[15][0].count; //使用工具的用户
-          let _upgCourseTeachers = res.data[16][0].count; //参与协同课程的老师
-          let _commentUsers = res.data[17][0].count; //参与互动交流的用户
-          let _evaTeachers = res.data[18][0].count; //查询添加目标的老师
-          let _tevaTeachers = res.data[19][0].count; //查询创建课程有添加目标的老师
-          let _sevaTeachers = res.data[20][0].count; //查询对作业评价的老师
-
-          this.lightJson = {
-            users: this.count,
-            teachers: _teachers,
-            students: _students,
-            upCourseTeachers: _upCourseTeachers,
-            upCourseUsers: _upCourseUsers,
-            toolUsers: _toolUsers,
-            upgCourseTeachers: _upgCourseTeachers,
-            commentUsers: _commentUsers,
-            evaTeachers: _evaTeachers,
-            tevaTeachers: _tevaTeachers,
-            sevaTeachers: _sevaTeachers,
-          };
-
-          let _loginCount = res.data[21][0].count; //漏斗图查询登录
-          let _workTeaCount = res.data[22][0].count; //漏斗图查询有交作业的课程老师数量
-          // let allCount = _loginCount + _upCourseTeachers + _workTeaCount + _sevaTeachers;
-          for (var i = 0; i < this.pusaDep.length; i++) {
-            if (this.pusaDep[i].name == "登录") {
-              this.pusaDep[i].value = ((_loginCount / _teachers) * 100).toFixed(
-                0
-              );
-            } else if (this.pusaDep[i].name == "创建") {
-              this.pusaDep[i].value = (
-                (_upCourseTeachers / _teachers) *
-                100
-              ).toFixed(0);
-            } else if (this.pusaDep[i].name == "授课") {
-              this.pusaDep[i].value = (
-                (_workTeaCount / _teachers) *
-                100
-              ).toFixed(0);
-            } else if (this.pusaDep[i].name == "评价") {
-              this.pusaDep[i].value = (
-                (_sevaTeachers / _teachers) *
-                100
-              ).toFixed(0);
-            }
-          }
-
-          let _cWorkSum = res.data[23]; //查询课程名称和作业数量
-          this.cWorkSum = _cWorkSum;
-
-          let _workTime = res.data[24]; //查询教研室在线时长
-          var mergedArray = [];
-          _workTime.forEach((obj) => {
-            var foundItem = mergedArray.find((item) => item.name === obj.name);
-            if (foundItem) {
-              foundItem.text = String(
-                Number(foundItem.text) + Number(obj.text)
-              );
-            } else {
-              mergedArray.push({ name: obj.name, text: obj.text });
-            }
-          });
-          mergedArray.forEach((obj) => {
-            obj.text = (Number(obj.text) / 3600).toFixed(2); // 秒转小时，并保留两位小数
-          });
-          this.workTime = mergedArray;
-          this.$forceUpdate();
-        })
-        .catch((err) => {
-          this.isLoading = false;
-          console.error(err);
-        });
-    },
-    format(percentage) {
-      return percentage + '%';
+    otherEchart() {
+      this.oType = !this.oType;
     },
   },
 };
@@ -696,6 +491,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 0 15px;
+  box-sizing: border-box;
   width: 100%;
 }
 
@@ -712,18 +508,17 @@ export default {
 }
 
 .title {
-  font-weight: bold;
   color: #060e17;
-  font-size: 18px;
+  margin-right: 10px;
 }
 
 .teafre {
+  margin: 5px 0;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  width: 95%;
-  margin: 0 auto;
+  width: 100%;
   justify-content: space-evenly;
 }
 
@@ -738,27 +533,30 @@ export default {
   align-items: flex-start;
   justify-content: center;
   padding: 0 10px;
-  margin-right: 10px;
+  margin: 0 10px;
 }
 .teaMiddle {
   width: calc(100% / 3 - 10px);
 }
 .teaLeft {
   width: 95%;
-  background: linear-gradient(
-    180deg,
-    rgba(224, 234, 251, 0.2) 0%,
-    rgba(54, 130, 252, 0.3) 100%
-  );
+  background: #f3f8fd;
 }
 .teaRigth {
-  background: linear-gradient(
-    180deg,
-    rgb(211, 246, 228, 0.2) 0%,
-    rgb(23, 196, 105, 0.3) 100%
-  ) !important;
+  background: #f3f8fd;
+}
+.timeDiv {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 0 0 15px;
 }
 
+.timeDiv > div {
+  margin-right: 10px;
+  cursor: pointer;
+}
 .cNum {
   background: linear-gradient(
     180deg,
@@ -800,6 +598,28 @@ export default {
 .halfBox {
   width: 50%;
 }
+.isClick {
+  color: #1684fc;
+  border-bottom: 2px solid #1684fc;
+  box-sizing: border-box;
+}
+.otherCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+.otherImg {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+.otherImg > img {
+  width: 100%;
+  height: 100%;
+}
 .allBox {
   width: 100%;
   height: 100%;
@@ -837,4 +657,17 @@ export default {
 }
 .depth > div:nth-child(1) {
 }
+.selectBox {
+  width: 80px;
+  margin-left: 10px;
+}
+
+.selectBox >>> .el-input__inner {
+  height: 30px;
+  line-height: 30px;
+}
+
+.selectBox >>> .el-input__icon {
+  line-height: 30px;
+}
 </style>