|
|
@@ -0,0 +1,517 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="sd_class">
|
|
|
+ <div class="sd_module">
|
|
|
+ <div class="sd_module_content">
|
|
|
+ <div class="sd_module_children">
|
|
|
+ <span class="s">课堂时长</span>
|
|
|
+ <span class="s2">
|
|
|
+ <span>{{randomNum(1,15)}}</span>时
|
|
|
+ <span>{{randomNum(1,60)}}</span>分
|
|
|
+ <span>{{randomNum(1,60)}}</span>秒
|
|
|
+ </span>
|
|
|
+ <span>已经击败99%教师</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sd_module_content">
|
|
|
+ <div class="sd_module_children">
|
|
|
+ <span class="s">课堂互动</span>
|
|
|
+ <span class="s2">
|
|
|
+ <span>{{randomNum(1,10)}}</span>次
|
|
|
+ </span>
|
|
|
+ <span>已经击败99%教师</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sd_module_content">
|
|
|
+ <div class="sd_module_children">
|
|
|
+ <span class="s">提交作业</span>
|
|
|
+ <span class="s2">
|
|
|
+ <span>{{randomNum(1,15)}}</span>次
|
|
|
+ </span>
|
|
|
+ <span>已经击败99%教师</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sd_module_data">
|
|
|
+ <span class="sdddtitle">数据统计</span>
|
|
|
+ <div id="charts_canvas" class="echart" style="width: 100%; height: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="sd_class sd_class2">
|
|
|
+ <span class="sdddtitle">学生个人能力</span>
|
|
|
+ <!-- <div class="sd_person_button">
|
|
|
+ <span @click="setType(6)" :class="{'active':type == 6}">学生个人能力</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="sd_person_data">
|
|
|
+ <div
|
|
|
+ id="person_canvas1"
|
|
|
+ class="echart"
|
|
|
+ style="width: 50%; height: 100%; margin: 0 0 0 1rem"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ id="person_canvas2"
|
|
|
+ class="echart"
|
|
|
+ style="width: 50%; height: 100%; margin: 0 0 0 1rem"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ type: 6,
|
|
|
+ chartObj: null,
|
|
|
+ chartObj2: null,
|
|
|
+ chartObj3: null,
|
|
|
+ ooption: [],
|
|
|
+ option: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ left: "50",
|
|
|
+ top: "center",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: "65%",
|
|
|
+ center: ["65%", "50%"],
|
|
|
+ label: {
|
|
|
+ color: "inherit",
|
|
|
+ formatter: "{b|{b}：} {d}% ",
|
|
|
+ rich: {
|
|
|
+ b: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: "bold",
|
|
|
+ lineHeight: 33,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 0, name: "学习时间" },
|
|
|
+ { value: 0, name: "自我介绍" },
|
|
|
+ { value: 0, name: "提交活动表" },
|
|
|
+ { value: 0, name: "讨论交流" },
|
|
|
+ { value: 0, name: "作业提交" },
|
|
|
+ { value: 0, name: "能力测试" },
|
|
|
+ { value: 0, name: "自我评价调查问卷" },
|
|
|
+ { value: 0, name: "课程满意度调查问卷" },
|
|
|
+ ],
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ //const colors = ['red', 'blue', 'green', 'purple'];
|
|
|
+ option2: {
|
|
|
+ //color:colors,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ left: "50",
|
|
|
+ top: "center",
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ type: "sunburst",
|
|
|
+ data: [],
|
|
|
+ radius: [20, "80%"],
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 7,
|
|
|
+ borderWidth: 2,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ option3: {
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
|
|
|
+ boundaryGap: false,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "信息应用意识",
|
|
|
+ "信息安全意识",
|
|
|
+ "信息感知意识",
|
|
|
+ "信息社会责任",
|
|
|
+ "信息法律法规",
|
|
|
+ "信息应用技能",
|
|
|
+ "信息科学知识",
|
|
|
+ "信息思维",
|
|
|
+ "信息行为",
|
|
|
+ ],
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 100,
|
|
|
+ bottom: 50,
|
|
|
+ right: 30,
|
|
|
+ top: 50,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Punch Card",
|
|
|
+ type: "scatter",
|
|
|
+ symbolSize: function (val) {
|
|
|
+ return val[2] * 2;
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ animationDelay: function (idx) {
|
|
|
+ return idx * 5;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setChart() {
|
|
|
+ // 雷达图显示的标签
|
|
|
+ let newPromise = new Promise((resolve) => {
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ //然后异步执行echarts的初始化函数
|
|
|
+ newPromise.then(() => {
|
|
|
+ const chartObj = this.$echarts.init(
|
|
|
+ //劳动课程
|
|
|
+ this.$el.querySelector("#charts_canvas")
|
|
|
+ );
|
|
|
+ var optionB = [
|
|
|
+ { value: this.randomNum(0, 300), name: "学习时间" },
|
|
|
+ { value: this.randomNum(0, 300), name: "自我介绍" },
|
|
|
+ { value: this.randomNum(0, 300), name: "能力闯关" },
|
|
|
+ { value: this.randomNum(0, 300), name: "提交活动表" },
|
|
|
+ { value: this.randomNum(0, 300), name: "讨论交流" },
|
|
|
+ { value: this.randomNum(0, 300), name: "作业提交" },
|
|
|
+ { value: this.randomNum(0, 300), name: "能力测试" },
|
|
|
+ { value: this.randomNum(0, 300), name: "自我评价调查问卷" },
|
|
|
+ { value: this.randomNum(0, 300), name: "课程满意度调查问卷" },
|
|
|
+ ];
|
|
|
+ this.option.series[0].data = optionB;
|
|
|
+ const chartObj2 = this.$echarts.init(
|
|
|
+ //劳动课程
|
|
|
+ this.$el.querySelector("#person_canvas1")
|
|
|
+ );
|
|
|
+ this.option2.series.data = [
|
|
|
+ {
|
|
|
+ name: "信息意识",
|
|
|
+ value: 15,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "信息应用意识",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息安全意识",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息感知意识",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息社会责任",
|
|
|
+ value: 15,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "信息伦理道德",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息法律法规",
|
|
|
+ value: this.randomNum(1, 10),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息知识与技能",
|
|
|
+ value: 15,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "信息应用技能",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息科学知识",
|
|
|
+ value: 10,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息思维与行为",
|
|
|
+ value: 15,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "信息思维",
|
|
|
+ value: this.randomNum(1, 10),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息行为",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const chartObj3 = this.$echarts.init(
|
|
|
+ //劳动课程
|
|
|
+ this.$el.querySelector("#person_canvas2")
|
|
|
+ );
|
|
|
+ let data = [];
|
|
|
+ for (var i = 1; i < 10; i++) {
|
|
|
+ for (var j = 0; j < 9; j++) {
|
|
|
+ var x = i;
|
|
|
+ var y = j;
|
|
|
+ var z = this.randomNum(0, 10);
|
|
|
+ data.push([x, y, z]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.option3.series[0].data = data;
|
|
|
+ // console.log(this.option.series[0].data);
|
|
|
+ // 初始化雷达图
|
|
|
+ this.chartObj = chartObj;
|
|
|
+ this.chartObj2 = chartObj2;
|
|
|
+ this.chartObj3 = chartObj3;
|
|
|
+ this.chartObj.setOption(this.option);
|
|
|
+ this.chartObj2.setOption(this.option2);
|
|
|
+ this.chartObj3.setOption(this.option3);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ randomNum(minNum, maxNum) {
|
|
|
+ switch (arguments.length) {
|
|
|
+ case 1:
|
|
|
+ return parseInt(Math.random() * minNum + 1, 10);
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ return 0;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ setType(type) {
|
|
|
+ this.type = type;
|
|
|
+ this.option2.series.data = [
|
|
|
+ {
|
|
|
+ name: "信息意识",
|
|
|
+ value: 15,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "信息应用意识",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息安全意识",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息感知意识",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息社会责任",
|
|
|
+ value: 15,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "信息伦理道德",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息法律法规",
|
|
|
+ value: this.randomNum(1, 10),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息知识与技能",
|
|
|
+ value: 15,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "信息应用技能",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息科学知识",
|
|
|
+ value: 10,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息思维与行为2",
|
|
|
+ value: 15,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: "信息思维",
|
|
|
+ value: this.randomNum(1, 10),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "信息行为",
|
|
|
+ value: this.randomNum(1, 5),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.chartObj2.setOption(this.option2);
|
|
|
+ let data = [];
|
|
|
+ for (var i = 1; i < 10; i++) {
|
|
|
+ for (var j = 0; j < 9; j++) {
|
|
|
+ var x = i;
|
|
|
+ var y = j;
|
|
|
+ var z = this.randomNum(0, 10);
|
|
|
+ data.push([x, y, z]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.option3.series[0].data = data;
|
|
|
+ this.chartObj3.setOption(this.option3);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.setChart();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.sd_name {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.sd_class {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.sd_class2 {
|
|
|
+ background: #fff;
|
|
|
+ margin: 20px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 20px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.sd_module {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.sd_module_content {
|
|
|
+ width: calc(100% / 3 - 10px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.sd_module_content:nth-child(1) .sd_module_children {
|
|
|
+ background: rgb(232, 141, 105);
|
|
|
+}
|
|
|
+.sd_module_content:nth-child(2) .sd_module_children {
|
|
|
+ background: rgb(87, 156, 238);
|
|
|
+}
|
|
|
+.sd_module_content:nth-child(3) .sd_module_children {
|
|
|
+ background: rgb(112, 221, 232);
|
|
|
+}
|
|
|
+.sd_module_children {
|
|
|
+ width: 100%;
|
|
|
+ height: 130px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.sd_module_children .s {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 16px;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+}
|
|
|
+.sd_module_children .s2 span {
|
|
|
+ font-size: 45px;
|
|
|
+ margin-right: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.sd_module_count {
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 20px 0 0 0;
|
|
|
+}
|
|
|
+.sd_module_count {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.sd_module_count span:nth-child(1) {
|
|
|
+ width: 100px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.sd_module_count span:nth-child(2) {
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ color: rgb(214, 132, 150);
|
|
|
+}
|
|
|
+.sd_module_data {
|
|
|
+ height: 700px;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ margin: 20px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.sdddtitle {
|
|
|
+ border-bottom: 2px solid rgb(30, 146, 255);
|
|
|
+ color: rgb(30, 146, 255);
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 40px;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.sd_person_data {
|
|
|
+ height: 500px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.sd_person_button {
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.sd_person_button span {
|
|
|
+ margin-left: 20px;
|
|
|
+ padding: 0 0 6px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.sd_person_button .active {
|
|
|
+ border-bottom: 2px solid rgb(30, 146, 255);
|
|
|
+ color: rgb(30, 146, 255);
|
|
|
+}
|
|
|
+</style>
|
