update

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

@@ -0,0 +1,98 @@
+<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: [],
+                sdata: [],
+            },
+            option: {
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['35%', '70%'],
+                        avoidLabelOverlap: false,
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 16,
+                                fontWeight: 'bold'
+                            }
+                        },
+
+                        data: [
+                            { value: 1048, name: '一年级' },
+                            { value: 735, name: '二年级' },
+                            { value: 580, name: '三年级' },
+                            { value: 484, name: '四年级' },
+                            { value: 484, name: '五年级' },
+                            { value: 300, 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.xAxis.data = option.xdata;
+                //   this.option.series[0].data = option.sdata;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        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/dataBoard/school/index.vue

@@ -1,54 +1,211 @@
 <template>
-  <div class="body">
+  <div class="body" v-loading="isLoading">
     <!-- 综合数据 -->
     <div class="left">
       <div class="top">
         <div class="titleBox">
           <div class="title">基础概况</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>用户总数</span>
+              <span>15620</span>
+            </div>
+            <div class="info greenBG">
+              <span>周使用频次</span>
+              <span>15620</span>
+            </div>
+            <div class="info blueBG">
+              <span>登录频次</span>
+              <span>15620</span>
+            </div>
+            <div class="info greenBG">
+              <span>人均使用频次</span>
+              <span>15620</span>
+            </div>
+          </div>
+          <loginCount style="height: calc(100% - 140px);"></loginCount>
+        </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">在线时长</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>累计时长</span>
+              <span>15620</span>
+            </div>
+            <div class="info greenBG">
+              <span>人均时长</span>
+              <span>15620</span>
+            </div>
+          </div>
+          <loginTime style="height: calc(100% - 70px);"></loginTime>
+        </div>
       </div>
     </div>
     <div class="center">
       <div class="top">
         <div class="titleBox">
-          <div class="title">课程数量</div>
+          <div class="title">教师综合评价</div>
+        </div>
+        <div class="dataBox">
+          <div class="info_box" style="width:95%">
+            <div class="info2 blueBG">
+              <span>上传课程总数</span>
+              <span>15620</span>
+            </div>
+            <div class="info2 greenBG">
+              <span>各年级平均课程数</span>
+              <span>15620</span>
+            </div>
+            <div class="info2 blueBG">
+              <span>各学科平均课程</span>
+              <span>15620</span>
+            </div>
+            <div class="info2 greenBG">
+              <span>教师人均课程数</span>
+              <span>15620</span>
+            </div>
+          </div>
+          <teacherInfo style="height: calc(100% - 70px);"></teacherInfo>
         </div>
-        <div class="dataBox"></div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">平台使用深度</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="depth_box">
+            <div class="depth">
+              <span>上传课程</span>
+              <div><el-progress :width="80" type="circle" :percentage="36" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>指导项目</span>
+              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>使用工具</span>
+              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>课程评价</span>
+              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>互动交流</span>
+              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>参与课程</span>
+              <div><el-progress :width="80" type="circle" :percentage="36" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>参与项目</span>
+              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>使用工具</span>
+              <div><el-progress :width="80" type="circle" :percentage="25" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>协同合作</span>
+              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>合作交流</span>
+              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="right">
       <div class="top">
         <div class="titleBox">
-          <div class="title">教师综合评价</div>
+          <div class="title">课程数量</div>
+        </div>
+        <div class="dataBox">
+          <div class="course_box">
+            <div class="info_box">
+                <div class="info3 blueBG">
+                  <span>课程总数</span>
+                  <span>1254</span>
+                </div>
+                <div class="info3 greenBG">
+                  <span>类别总数</span>
+                  <span>546</span>
+                </div>
+                <div class="info3 blueBG">
+                  <span>类别平均</span>
+                  <span>12</span>
+                </div>
+            </div>
+            <div class="course_box_p">
+              <courseInfo></courseInfo>
+            </div>
+          </div>
         </div>
-        <div class="dataBox"></div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">学生综合评价</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <studentInfo></studentInfo>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import loginCount from './loginCount'
+import loginTime from './loginTime'
+import teacherInfo from './teacherInfo'
+import courseInfo from './courseInfo'
+import studentInfo from './studentInfo'
 export default {
-
+  components: {
+    loginCount, loginTime, teacherInfo,courseInfo,studentInfo
+  },
+  props: {
+    oid: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isLoading: false
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.isLoading = true;
+      let params = [{
+        oid: this.oid
+      }]
+      this.ajax
+        .post(this.$store.state.api + "selectDataBoardSchool", params)
+        .then((res) => {
+          this.isLoading = false;
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    format(percentage) {
+      return percentage;
+    }
+  },
 }
 </script>
 
@@ -69,7 +226,7 @@ export default {
 
 .left>.top {
   width: 100%;
-  height: calc(100% / 2 - 10px);
+  height: calc(100% / 5 * 2.8 - 20px);
   background: #fff;
   border-radius: 5px;
   margin: 0 0 20px 0;
@@ -77,7 +234,7 @@ export default {
 
 .left>.bottom {
   width: 100%;
-  height: calc(100% / 2 - 10px);
+  height: calc(100% / 5 * 2.2);
   background: #fff;
   border-radius: 5px;
 }
@@ -90,7 +247,7 @@ export default {
 
 .center>.top {
   width: 100%;
-  height: calc(100% / 5 * 3 - 10px);
+  height: calc(100% / 5 * 2.8 - 20px);
   background: #fff;
   border-radius: 5px;
   margin: 0 0 20px 0;
@@ -98,7 +255,7 @@ export default {
 
 .center>.bottom {
   width: 100%;
-  height: calc(100% / 5 * 2 - 10px);
+  height: calc(100% / 5 * 2.2);
   background: #fff;
   border-radius: 5px;
 }
@@ -111,7 +268,7 @@ export default {
 
 .right>.top {
   width: 100%;
-  height: calc(100% / 2 - 10px);
+  height: calc(100% / 5 * 2.8 - 20px);
   background: #fff;
   border-radius: 5px;
   margin: 0 0 20px 0;
@@ -119,7 +276,7 @@ export default {
 
 .right>.bottom {
   width: 100%;
-  height: calc(100% / 2 - 10px);
+  height: calc(100% / 5 * 2.2);
   background: #fff;
   border-radius: 5px;
 }
@@ -132,8 +289,115 @@ export default {
   width: 100%;
 }
 
+.titleBox>.title {
+  font-weight: 700;
+}
+
 .dataBox {
   height: calc(100% - 40px);
   width: 100%;
 }
+
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box>.info2,
+.info_box>.info3,
+.info_box>.info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: column;
+  height: 60px;
+  justify-content: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box>.info2 {
+  width: calc(100%/4 - 10px);
+  align-items: flex-end;
+}
+
+.info_box>.info3 {
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+
+.info_box>.info2>span:nth-child(1),
+.info_box>.info3>span:nth-child(1),
+.info_box>.info>span:nth-child(1) {
+  font-size: 12px;
+  margin: 0 0 5px 0;
+}
+
+.info_box>.info2>span:nth-child(2),
+.info_box>.info3>span:nth-child(2),
+.info_box>.info>span:nth-child(2) {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.blueBG {
+  background: linear-gradient(180deg,
+      rgba(224, 234, 251, 0.2) 0%,
+      rgba(54, 130, 252, 0.3) 100%);
+}
+
+.greenBG {
+  background: linear-gradient(180deg,
+      rgb(211, 246, 228, 0.2) 0%,
+      rgb(23, 196, 105, 0.3) 100%);
+}
+
+.depth_box {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 95%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.depth {
+  width: calc(100% / 5 - 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) {}
+
+.course_box{
+  display: flex;
+  height: 50%;
+  width: 90%;
+  margin: 0 auto;
+}
+.course_box .info_box{
+  height: 100%;
+  width: 100px;
+  flex-direction: column;
+  margin: 0;
+  flex-wrap: nowrap;
+}
+.course_box_p{
+  width: calc(100% - 100px);
+}
 </style>

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

@@ -0,0 +1,106 @@
+<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: [],
+                sdata: [],
+            },
+            option: {
+                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月']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: '老师',
+                        type: 'line',
+                        data: [120, 50, 101, 130, 110, 120]
+                    },
+                    {
+                        name: '学生',
+                        type: 'line',
+                        data: [220, 182, 191, 234, 290, 330]
+                    },
+                ]
+            },
+        };
+    },
+    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.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        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/dataBoard/school/loginTime/index.vue

@@ -0,0 +1,128 @@
+<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: [],
+                sdata: [],
+            },
+            option: {
+                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月'
+                    ],
+                    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")
+                );
+                const 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] || '-'];
+                });
+                //   this.option.xAxis.data = option.xdata;
+                  this.option.series[0].data = data;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        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/dataBoard/school/studentInfo/index.vue

@@ -0,0 +1,96 @@
+<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: [],
+                sdata: [],
+            },
+            option: {
+                tooltip: {},
+                radar: {
+                    // shape: 'circle',
+                    indicator: [
+                        { name: '目标一', max: 10 },
+                        { name: '目标二', max: 10 },
+                        { name: '目标三', max: 10 },
+                        { name: '目标四', max: 10 },
+                        { name: '目标五', max: 10 }
+                    ]
+                },
+                series: [
+                    {
+                        areaStyle: {},
+                        name: '学生综合评价',
+                        type: 'radar',
+                        data: [
+                            {
+                                value: [5, 7, 7, 8, 5, 6],
+                                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.xAxis.data = option.xdata;
+                //   this.option.series[0].data = option.sdata;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        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/dataBoard/school/teacherInfo/index.vue

@@ -0,0 +1,128 @@
+<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: [],
+                sdata: [],
+            },
+            option: {
+                tooltip: {
+                    position: 'top'
+                },
+                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 = [
+                    '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
+                    '劳动', '其他',
+                ];
+                // prettier-ignore
+                const days = [
+                    '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
+                ];
+                // prettier-ignore
+                const 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) / 6 + '%',
+                        text: day,
+                        textStyle: {
+                            fontSize: 12,
+                        },
+                    });
+                    singleAxis.push({
+                        left: 70,
+                        type: 'category',
+                        boundaryGap: false,
+                        data: hours,
+                        top: (idx * 90) / 6 + 5 + '%',
+                        height: 90 / 6 - 10 + '%'
+                    });
+                    series.push({
+                        singleAxisIndex: idx,
+                        coordinateSystem: 'singleAxis',
+                        type: 'scatter',
+                        data: [],
+                        symbolSize: function (dataItem) {
+                            return dataItem[1] * 5;
+                        }
+                    });
+                });
+                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);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        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>
+