1

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

@@ -25,13 +25,14 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-            },
-            labelLine: {
-              show: true,
+            radius: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
             },
             data: [
               { value: 100, name: "一年级" },

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

@@ -20,9 +20,9 @@ export default {
           trigger: "item",
           formatter: "{b} : {c}%",
         },
-        legend: {
-          data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
-        },
+        // legend: {
+        //   data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
+        // },
         series: [
           {
             type: "funnel",

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

@@ -25,13 +25,14 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-            },
-            labelLine: {
-              show: true,
+            radius: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
             },
             data: [
               { value: 100, name: "思维类" },

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

@@ -25,13 +25,14 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-            },
-            labelLine: {
-              show: true,
+            radius: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
             },
             data: [
               { value: 100, name: "2人以下" },

src/components/pages/dataBoardNew/index.vue

@@ -11,6 +11,7 @@
       <div class="db_check">
         <div :class="{ active: type == 1 }" @click="setType(1)">综合数据</div>
         <div :class="{ active: type == 2 }" @click="setType(2)">课程数据</div>
+        <div :class="{ active: type == 5 }" @click="setType(5)">项目数据</div>
         <div :class="{ active: type == 3 }" @click="setType(3)">学生数据</div>
         <div :class="{ active: type == 4 }" @click="setType(4)">教师数据</div>
       </div>
@@ -18,6 +19,7 @@
     <div class="db_body">
       <school v-if="type == 1" :oid="oid" :org="org"></school>
       <course v-if="type == 2" :oid="oid" :org="org"></course>
+      <project v-if="type == 5" :oid="oid" :org="org"></project>
       <student v-if="type == 3" :oid="oid" :org="org"></student>
       <teacher v-if="type == 4" :oid="oid" :org="org"></teacher>
     </div>
@@ -29,12 +31,14 @@ import school from "./school";
 import course from "./course";
 import student from "./student";
 import teacher from "./teacher";
+import project from "./project";
 export default {
   components: {
     school,
     course,
     student,
     teacher,
+    project,
   },
   data() {
     return {

src/components/pages/dataBoardNew/project/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/project/chartList/cateRank.vue

@@ -0,0 +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>
+    </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.
+
+                    }
+                },
+                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) => {
+                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: {
+        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();
+            }
+        });
+    },
+};
+</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/project/chartList/courseAna.vue

@@ -0,0 +1,95 @@
+<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: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
+            },
+            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;
+}
+</style>

src/components/pages/dataBoardNew/project/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/project/chartList/courseTime.vue

@@ -0,0 +1,136 @@
+<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: {
+          trigger: "axis",
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        // legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+        },
+        yAxis: {
+          type: "category",
+          data: ["按项目时长", "按师生分工比例", "按协同比例", "按完成状态"],
+        },
+        series: [
+          {
+            name: "Direct",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [100, 120, 133, 133],
+          },
+          {
+            name: "Mail Ad",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [150, 200, 233, 233],
+          },
+          {
+            name: "Affiliate Ad",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [100, 110, 133, 133],
+          },
+          {
+            name: "Search Engine",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [80, 100],
+          },
+        ],
+      },
+    };
+  },
+  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/project/chartList/teaFre.vue

@@ -0,0 +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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      ooption: {
+        xdata: [],
+        course: [],
+      },
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        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);
+      });
+    },
+  },
+  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/project/chartList/toolChart.vue

@@ -0,0 +1,92 @@
+<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: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
+            },
+            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/project/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/project/chartList/workNum.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/project/chartList/workTime.vue

@@ -0,0 +1,93 @@
+<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: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
+            },
+            data: [
+              { value: 100, name: "2人以下" },
+              { value: 150, name: "3-4人" },
+              { value: 223, name: "5-6人" },
+              { value: 216, name: "7人以上" }
+            ],
+          },
+        ],
+      },
+    };
+  },
+  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/project/index.vue

@@ -0,0 +1,629 @@
+<template>
+  <div class="body1">
+    <!-- 课程数据 -->
+    <div class="left">
+      <div class="top">
+        <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>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>18</div>
+            </div>
+          </div>
+          <TeaFre style="height: calc(100% - 140px)"></TeaFre>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="titleBox">
+          <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% - 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"
+            :class="{ isClick: courseType == 0 }"
+            @click="courseType = 0"
+            style="cursor: pointer; padding: 0 0 5px 0"
+          >
+            项目分布
+          </div>
+          <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" style="justify-content: space-between">
+          <div class="title">项目开展情况</div>
+          <div
+            v-if="!shType"
+            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
+            v-if="shType"
+            style="
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-items: center;
+            "
+          >
+            <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>
+            <el-select v-model="cType3" class="selectBox" style="width: 110px">
+              <el-option label="全部主题" value="全部主题"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="dataBox">
+          <CourseTime
+            v-if="!shType"
+            style="height: calc(100% - 30px)"
+          ></CourseTime>
+          <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" 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)"
+            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>
+        </div>
+        <div class="dataBox">
+          <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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TeaFre from "./chartList/teaFre.vue";
+import ToolUse from "./chartList/toolUse.vue";
+import CateRank from "./chartList/cateRank.vue";
+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,
+    ToolUse,
+    CateRank,
+    WorkNum,
+    CourseTime,
+    CourseAna,
+    WorkTime,
+    Bar,
+    CourseNum,
+    ToolChart,
+  },
+  props: {
+    oid: {
+      type: String,
+    },
+    org: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      cType: "全部年级",
+      cType1: "全部年级",
+      cType2: "全部学科",
+      cType3: "全部主题",
+      cType4: "按年级",
+      cType5: "全部学科",
+      cType6: "全部年级",
+      cType7: "全部课程",
+      cType8: "全部年级",
+      cType9: "全部学科",
+      toolType: 0,
+      tType: 0,
+      skType: 0,
+      courseType: 0,
+      sType: 0,
+      oType: false,
+      shType: false,
+      xtType: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    otherEchart() {
+      this.oType = !this.oType;
+    },
+    shEchart() {
+      this.shType = !this.shType;
+    },
+    xtEchart() {
+      this.xtType = !this.xtType;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.body1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.left {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.left > .top {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.left > .bottom {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.center {
+  width: calc(100% / 4 * 2 - 40px);
+  height: 100%;
+  margin: 0 20px;
+}
+
+.center > .top {
+  width: 100%;
+  height: calc(100% / 5 * 3 - 10px);
+  background: #fff;
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+}
+
+.center > .bottom {
+  width: 100%;
+  height: calc(100% / 5 * 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.right {
+  width: calc(100% / 4 * 1);
+  height: 100%;
+}
+
+.right > .top {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 16px;
+  margin: 0 0 20px 0;
+}
+
+.right > .bottom {
+  width: 100%;
+  height: calc(100% / 2 - 10px);
+  background: #fff;
+  border-radius: 5px;
+}
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.dataBox {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+.middleBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.title {
+  color: #060e17;
+  margin-right: 10px;
+}
+
+.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;
+}
+
+.cNum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.tNum {
+  background: linear-gradient(
+    180deg,
+    rgb(174, 204, 254, 0.2) 0%,
+    rgb(54, 129, 252, 0.3) 100%
+  ) !important;
+}
+
+.tSum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.teaLeft > div:first-child,
+.teaMiddle > div:first-child {
+  font-size: 12px;
+  font-weight: 400;
+  color: #565e6a;
+}
+
+.teaLeft > div:last-child,
+.teaMiddle > div:last-child {
+  font-size: 22px;
+  font-weight: bold;
+  color: #060e17;
+}
+
+.halfBox {
+  width: 50%;
+  height: 100%;
+}
+.selectBox {
+  width: 80px;
+  margin-left: 10px;
+}
+
+.selectBox >>> .el-input__inner {
+  height: 30px;
+  line-height: 30px;
+}
+
+.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/cateRank/index.vue

@@ -25,13 +25,14 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-            },
-            labelLine: {
-              show: true,
+            radius: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
             },
             data: [
               { value: 100, name: "2人以下" },

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

@@ -25,21 +25,22 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-            },
-            labelLine: {
-              show: true,
+            radius: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
             },
             data: [
-              { value: 100, name: "一年级" },
-              { value: 150, name: "二年级" },
-              { value: 223, name: "三年级" },
-              { value: 216, name: "四年级" },
-              { value: 130, name: "五年级" },
-              { value: 208, name: "六年级" },
+              { value: 123, name: "一年级" },
+              { value: 200, name: "二年级" },
+              { value: 250, name: "三年级" },
+              { value: 450, name: "四年级" },
+              { value: 300, name: "五年级" },
+              { value: 100, name: "六年级" },
             ],
           },
         ],

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

@@ -20,9 +20,9 @@ export default {
           trigger: "item",
           formatter: "{b} : {c}%",
         },
-        legend: {
-          data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
-        },
+        // legend: {
+        //   data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
+        // },
         series: [
           {
             type: "funnel",

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

@@ -25,13 +25,14 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-            },
-            labelLine: {
-              show: true,
+            radius: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
             },
             data: [
               { value: 100, name: "一年级" },

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

@@ -20,9 +20,9 @@ export default {
           trigger: "item",
           formatter: "{b} : {c}%",
         },
-        legend: {
-          data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
-        },
+        // legend: {
+        //   data: ["教学评一体化课程", "已评价课程", "已提交作业课程", "设置评价课程", "课程总数"],
+        // },
         series: [
           {
             type: "funnel",

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

@@ -25,13 +25,14 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-            },
-            labelLine: {
-              show: true,
+            radius: '50%',
+            avoidLabelOverlap: true,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
             },
             data: [
               { value: 100, name: "一年级" },