|
|
|
|
<template>
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<!-- 全屏 -->
|
|
|
|
|
<img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen">
|
|
|
|
|
<!--header-->
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="bg_header">
|
|
|
|
|
<div class="header_nav fl t_title">平台大数据可视化看板</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--main-->
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<!--左上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--左下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_1.png" alt="">
|
|
|
|
|
平台考试数据统计
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="time-switch">
|
|
|
|
|
<li v-for="(item, i) in times" :key="i" :class="{ active: item.id === time }" @click="switchTime(item.id)">
|
|
|
|
|
{{
|
|
|
|
|
item.name }}</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div id="chart1" class="chart"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_2.png" alt="">
|
|
|
|
|
学生成绩分布分析
|
|
|
|
|
</div>
|
|
|
|
|
<div id="chart2" class="chart t_btn9"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt="">
|
|
|
|
|
月人均在线学习时长情况
|
|
|
|
|
</div>
|
|
|
|
|
<div id="chart3" class="chart t_btn9"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt="">
|
|
|
|
|
平台登录人数
|
|
|
|
|
</div>
|
|
|
|
|
<div id="chart4" class="chart t_btn9"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="middle">
|
|
|
|
|
<div class="item" style="height: 620px">
|
|
|
|
|
<!--左上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--左下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<video class="video" ref="video" width="100%" height="100%" autoplay muted loop>
|
|
|
|
|
<source src="@/assets/videos/screen.mp4" type="video/mp4">
|
|
|
|
|
您的浏览器不支持 video 标签。
|
|
|
|
|
</video>
|
|
|
|
|
<div class="stat-mask"></div>
|
|
|
|
|
<div class="stat-wrap">
|
|
|
|
|
<p class="num num1">{{ overview.numberOfPeopleStudy }}</p>
|
|
|
|
|
<p class="num num2">{{ overview.courseStudyFrequency }}</p>
|
|
|
|
|
<p class="num num3">{{ overview.courseStudyTime }}</p>
|
|
|
|
|
<p class="num num4">{{ overview.numberOfExperiments }}</p>
|
|
|
|
|
<p class="num num5">{{ overview.cumulativeExperimentTime }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="active-number">
|
|
|
|
|
<p class="val">{{ overview.currentActivePeople }}</p>
|
|
|
|
|
<p class="name">当前活跃人数</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item" style="height: 440px;">
|
|
|
|
|
<!--左上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--左下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_3.png" alt="">
|
|
|
|
|
学生实验课程考核成绩趋势图
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart" id="chart5" style="height: 420px"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="item" style="height: 160px">
|
|
|
|
|
<!--左上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--左下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_4.png" alt="">
|
|
|
|
|
本月综合学习积极性最高的实验课程
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="list">
|
|
|
|
|
<li v-for="(item, i) in courses" :key="i">
|
|
|
|
|
<span class="index">{{ i + 1 }}</span>
|
|
|
|
|
<p class="text">{{ item.goodsName }}</p>
|
|
|
|
|
<img class="icon" src="@/assets/img/screen/medal.png" alt="">
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item" style="height: 240px">
|
|
|
|
|
<!--左上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右上边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--左下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<!--右下边框-->
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_5.png" alt="">
|
|
|
|
|
热门理论课程排行榜
|
|
|
|
|
</div>
|
|
|
|
|
<div class="popular-wrap" ref="popularCourses">
|
|
|
|
|
<ul class="list popular">
|
|
|
|
|
<li v-for="(item, i) in popularCourses" :key="i">
|
|
|
|
|
<span class="index">{{ i + 1 }}</span>
|
|
|
|
|
<p class="text">{{ item.courseName }}</p>
|
|
|
|
|
<span class="num">{{ item.viewCount }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item" style="height: 300px">
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt="">
|
|
|
|
|
学霸排行榜
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th width="20%">名次</th>
|
|
|
|
|
<th width="20%">姓名</th>
|
|
|
|
|
<th width="20%">{{ token ? '班级' : '学校' }}</th>
|
|
|
|
|
<th width="20%">练习次数</th>
|
|
|
|
|
<th width="20%">平均分</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table" ref="ach" style="max-height: 222px;margin-top: 0;overflow: hidden">
|
|
|
|
|
<table>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="(item, i) in achs" :key="i">
|
|
|
|
|
<td width="20%">{{ i + 1 }}</td>
|
|
|
|
|
<td width="20%">{{ item.userName }}</td>
|
|
|
|
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td>
|
|
|
|
|
<td width="20%">{{ item.practiceNumber }}</td>
|
|
|
|
|
<td width="20%">{{ item.avgScore }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item" style="height: 300px">
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_l_line"></i>
|
|
|
|
|
<i class="l_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="t_r_line"></i>
|
|
|
|
|
<i class="r_t_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="l_b_line"></i>
|
|
|
|
|
<i class="b_l_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="t_line_box">
|
|
|
|
|
<i class="r_b_line"></i>
|
|
|
|
|
<i class="b_r_line"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_title">
|
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt="">
|
|
|
|
|
活跃度排行榜
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th width="20%">名次</th>
|
|
|
|
|
<th width="20%">{{ token ? '班级' : '学校' }}</th>
|
|
|
|
|
<th width="20%">活跃指数</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table" ref="active" style="max-height: 230px;margin-top: 0;overflow: hidden">
|
|
|
|
|
<table>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="(item, i) in actives" :key="i">
|
|
|
|
|
<td width="20%">{{ i + 1 }}</td>
|
|
|
|
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td>
|
|
|
|
|
<td width="20%">{{ item.activityIndex }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Util from '@/libs/util'
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import Setting from '@/setting'
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
token: Util.local.get(Setting.tokenKey),
|
|
|
|
|
time: 2,
|
|
|
|
|
times: [
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
name: '年'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 0,
|
|
|
|
|
name: '月'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
name: '日'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
overview: {},
|
|
|
|
|
goodsSell: [],
|
|
|
|
|
cryptoList: [],
|
|
|
|
|
courses: [],
|
|
|
|
|
popularCourses: [],
|
|
|
|
|
achs: [],
|
|
|
|
|
actives: [],
|
|
|
|
|
examChart: null
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
this.renderExam()
|
|
|
|
|
this.getList()
|
|
|
|
|
this.renderChart()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 全屏
|
|
|
|
|
fullScreen () {
|
|
|
|
|
// 检测是否全屏
|
|
|
|
|
if (document.fullscreenElement ||
|
|
|
|
|
document.mozFullScreenElement ||
|
|
|
|
|
document.msFullScreenElement ||
|
|
|
|
|
document.webkitFullscreenElement) {
|
|
|
|
|
const fn = document.exitFullScreen ||
|
|
|
|
|
document.mozCancelFullScreen ||
|
|
|
|
|
document.webkitExitFullscreen ||
|
|
|
|
|
document.msExitFullscreen
|
|
|
|
|
fn.call(document)
|
|
|
|
|
} else {
|
|
|
|
|
const el = document.body
|
|
|
|
|
const fn = el.requestFullscreen ||
|
|
|
|
|
el.mozRequestFullScreen ||
|
|
|
|
|
el.webkitRequestFullscreen ||
|
|
|
|
|
el.msRequestFullscreen
|
|
|
|
|
fn.call(el)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 获取文本表格数据
|
|
|
|
|
getList () {
|
|
|
|
|
// 本院数据概览
|
|
|
|
|
this.$post(this.api.overviewOfOurSchoolData).then(({ data }) => {
|
|
|
|
|
this.overview = data
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
|
|
|
|
|
// 本月综合学习积极性最高的实验课程
|
|
|
|
|
this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => {
|
|
|
|
|
this.courses = data
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
|
|
|
|
|
// 热门理论课程排行榜
|
|
|
|
|
this.$post(this.api.courseRankings).then(({ list }) => {
|
|
|
|
|
this.popularCourses = list
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
|
|
|
|
|
// 学霸排行榜
|
|
|
|
|
this.$post(`${this.api.academicLeadersRanking}?pageNum=1&pageSize=20`).then(({ data }) => {
|
|
|
|
|
const list = data.records
|
|
|
|
|
// 优先排序平均分，然后再排序练习次数
|
|
|
|
|
list.sort((a, b) => {
|
|
|
|
|
if (a.avgScore == b.avgScore) return b.practiceNumber - a.practiceNumber
|
|
|
|
|
return b.avgScore - a.avgScore
|
|
|
|
|
})
|
|
|
|
|
this.achs = list
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
|
|
|
|
|
// 活跃度排行榜
|
|
|
|
|
this.$post(this.api.activityRanking).then(({ list }) => {
|
|
|
|
|
list.sort((a, b) => {
|
|
|
|
|
return +b.activityIndex - +a.activityIndex
|
|
|
|
|
})
|
|
|
|
|
this.actives = list
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
this.scrollTable()
|
|
|
|
|
},
|
|
|
|
|
// 切换时间单位
|
|
|
|
|
switchTime (id) {
|
|
|
|
|
this.time = id
|
|
|
|
|
this.renderExam()
|
|
|
|
|
},
|
|
|
|
|
// 平台考试数据考试统计
|
|
|
|
|
renderExam () {
|
|
|
|
|
this.$post(`${this.api.examStatistics}?choose=${this.time}`).then(({ data }) => {
|
|
|
|
|
const option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: '考试通过率',
|
|
|
|
|
subtext: data.examPassRate,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
color: '#3adce9',
|
|
|
|
|
},
|
|
|
|
|
subtextStyle: {
|
|
|
|
|
fontSize: 26,
|
|
|
|
|
color: '#00d5ff',
|
|
|
|
|
},
|
|
|
|
|
x: 'center',
|
|
|
|
|
y: '41%',
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: "{b} : {c} ({d}%)"
|
|
|
|
|
// formatter: '{total|' + 100 +'}'+ '\n\r' + '{active|共发布活动}'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
show: false,
|
|
|
|
|
x: 'center',
|
|
|
|
|
y: 'bottom',
|
|
|
|
|
data: ['考试总场次', '考试人数']
|
|
|
|
|
},
|
|
|
|
|
toolbox: {
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
formatter: "{b} \n{d}%"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
calculable: true,
|
|
|
|
|
color: ['#44cfff', '#4388ff'],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '',
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: [60, 80],
|
|
|
|
|
center: ['50%', '60%'],
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
alignTo: 'none',
|
|
|
|
|
lineHeight: 18,
|
|
|
|
|
formatter: '{b} {c}'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{ value: data.totalNumberOfExams, name: '考试\n总场次' },
|
|
|
|
|
{ value: data.referenceNumber, name: '考试\n人数' },
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
this.examChart = echarts.init(document.querySelector(`#chart1`))
|
|
|
|
|
this.examChart.setOption(option)
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
},
|
|
|
|
|
// 获取图标数据并渲染
|
|
|
|
|
async renderChart () {
|
|
|
|
|
const animateChart = (chart, option, data, num = 6) => {
|
|
|
|
|
// 每次向后滚动一个，最后一个从头开始。
|
|
|
|
|
if (option.dataZoom[0].endValue == data.length) {
|
|
|
|
|
option.dataZoom[0].endValue = num
|
|
|
|
|
option.dataZoom[0].startValue = 0
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
|
|
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
|
|
|
|
}
|
|
|
|
|
chart.setOption(option)
|
|
|
|
|
}
|
|
|
|
|
let chart = {}
|
|
|
|
|
|
|
|
|
|
// 学生成绩分布分析
|
|
|
|
|
const year = new Date().getFullYear()
|
|
|
|
|
const times = []
|
|
|
|
|
// 获取过去五年的上下半年日期
|
|
|
|
|
for (let i = 0; i < 6; i++) {
|
|
|
|
|
times.push({
|
|
|
|
|
startTime: (year - i) + '-02-01',
|
|
|
|
|
endTime: (year - i) + '-08-31'
|
|
|
|
|
})
|
|
|
|
|
times.push({
|
|
|
|
|
startTime: (year - i) + '-09-01',
|
|
|
|
|
endTime: (year - i + 1) + '-01-31'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.$post(this.api.studentGradeDistribution, times).then(({ data }) => {
|
|
|
|
|
const times = []
|
|
|
|
|
const data1 = []
|
|
|
|
|
const data2 = []
|
|
|
|
|
const data3 = []
|
|
|
|
|
const data4 = []
|
|
|
|
|
data.map(e => {
|
|
|
|
|
times.push(e.time)
|
|
|
|
|
data1.push(e.yellow.replace('%', ''))
|
|
|
|
|
data2.push(e.green.replace('%', ''))
|
|
|
|
|
data3.push(e.blue.replace('%', ''))
|
|
|
|
|
data4.push(e.pink.replace('%', ''))
|
|
|
|
|
})
|
|
|
|
|
const option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
top: '10%',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
top: '30%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
dataZoom: [//滑动条
|
|
|
|
|
{
|
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始
|
|
|
|
|
show: false,//是否显示滑动条，不影响使用
|
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
|
|
|
startValue: 0, // 从头开始。
|
|
|
|
|
endValue: 5 // 一次性展示6个。
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
color: ['#4388ff', '#44cfff', '#8c2bff', '#2defe2'],
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: times,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
},
|
|
|
|
|
rotate: 60
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
margin: 10,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
formatter: '{value}%'
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '60以下',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
stack: 'Ad',
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: data1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '60-69',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
stack: 'Ad',
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: data2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '70-89',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
stack: 'Ad',
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: data3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '90-100',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
stack: 'Ad',
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: data4
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
chart[0] = echarts.init(document.querySelector(`#chart2`))
|
|
|
|
|
chart[0].setOption(option)
|
|
|
|
|
setInterval(function () {
|
|
|
|
|
animateChart(chart[0], option, data, 5)
|
|
|
|
|
}, 3000)
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
|
|
|
|
|
// 学生实验课程考核成绩趋势图
|
|
|
|
|
const colors = [
|
|
|
|
|
{
|
|
|
|
|
color1: '#0184d5',
|
|
|
|
|
color2: 'rgba(1, 132, 213, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#00d887',
|
|
|
|
|
color2: 'rgba(0, 216, 135, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#e71872',
|
|
|
|
|
color2: 'rgba(40, 147, 189, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#f9d437',
|
|
|
|
|
color2: 'rgba(50, 234, 144, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#912892',
|
|
|
|
|
color2: 'rgba(31, 24, 153, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#f21259',
|
|
|
|
|
color2: 'rgba(40, 176, 97, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#7343fe',
|
|
|
|
|
color2: 'rgba(50, 240, 140, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#ea7321',
|
|
|
|
|
color2: 'rgba(65, 94, 123, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#934ea2',
|
|
|
|
|
color2: 'rgba(32, 123, 223, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#672313',
|
|
|
|
|
color2: 'rgba(156, 40, 100, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#0184d5',
|
|
|
|
|
color2: 'rgba(60, 132, 60, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#00d887',
|
|
|
|
|
color2: 'rgba(60, 42, 244, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#e71872',
|
|
|
|
|
color2: 'rgba(90, 147, 180, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#f9d437',
|
|
|
|
|
color2: 'rgba(150, 20, 144, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const cousrseRes = await this.$post(this.api.productsWithExperimentalResults, {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 1000,
|
|
|
|
|
sort: 0,
|
|
|
|
|
isShelves: 0,
|
|
|
|
|
hotTag: 1,
|
|
|
|
|
purchaseStatus: this.token ? 1 : ''
|
|
|
|
|
})
|
|
|
|
|
if (cousrseRes) {
|
|
|
|
|
const courseList = cousrseRes.list
|
|
|
|
|
const ids = courseList.map(e => e.mallId)
|
|
|
|
|
times.map(e => {
|
|
|
|
|
e.mallId = ids
|
|
|
|
|
})
|
|
|
|
|
const courseData = {}
|
|
|
|
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => {
|
|
|
|
|
const xData = data.map(e => e.time)
|
|
|
|
|
const len = xData.length
|
|
|
|
|
courseList.map(e => {
|
|
|
|
|
courseData[e.productName] = new Array(len).fill(0, 0)
|
|
|
|
|
})
|
|
|
|
|
const series = []
|
|
|
|
|
data.map((e, i) => {
|
|
|
|
|
e.assesScoreRespList.map(n => {
|
|
|
|
|
const item = courseList.find(j => j.mallId == n.mallId)
|
|
|
|
|
if (item) {
|
|
|
|
|
const name = item.productName
|
|
|
|
|
if (courseData[name]) {
|
|
|
|
|
courseData[name][i] = +n.avgScore
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
let index = 0
|
|
|
|
|
// 生成series
|
|
|
|
|
for (const i in courseData) {
|
|
|
|
|
series.push({
|
|
|
|
|
name: i,
|
|
|
|
|
type: 'line',
|
|
|
|
|
// smooth: true,
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
symbolSize: 5,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: colors[index].color1,
|
|
|
|
|
width: 2
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: colors[index].color1,
|
|
|
|
|
borderWidth: 8
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: courseData[i]
|
|
|
|
|
})
|
|
|
|
|
++index
|
|
|
|
|
if (index > 9) index = 0
|
|
|
|
|
}
|
|
|
|
|
const option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#dddc6b'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
top: '8%',
|
|
|
|
|
data: courseList.map(e => e.productName),
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: 'rgba(255,255,255,.5)',
|
|
|
|
|
fontSize: '12',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
dataZoom: [//滑动条
|
|
|
|
|
{
|
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始
|
|
|
|
|
show: false,//是否显示滑动条，不影响使用
|
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
|
|
|
startValue: 0, // 从头开始。
|
|
|
|
|
endValue: 6 // 一次性展示6个。
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
grid: {
|
|
|
|
|
left: '30',
|
|
|
|
|
top: '45%',
|
|
|
|
|
right: '10',
|
|
|
|
|
bottom: '5%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "rgba(255,255,255,.9)",
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(255,255,255,.2)'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: xData
|
|
|
|
|
},
|
|
|
|
|
yAxis: [{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '平均分',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100,
|
|
|
|
|
interval: 10,
|
|
|
|
|
splitNumber: 10,
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
axisTick: { show: false },
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(255,255,255,.1)'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "rgba(255,255,255,.9)",
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(255,255,255,.1)'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}],
|
|
|
|
|
series
|
|
|
|
|
}
|
|
|
|
|
chart[1] = echarts.init(document.querySelector(`#chart5`))
|
|
|
|
|
chart[1].setOption(option)
|
|
|
|
|
setInterval(function () {
|
|
|
|
|
animateChart(chart[1], option, times)
|
|
|
|
|
}, 5000)
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 月人均在线学习时长情况
|
|
|
|
|
const date = new Date()
|
|
|
|
|
date.setMonth(date.getMonth() + 1)
|
|
|
|
|
const months = []
|
|
|
|
|
// 获取近12个月的日期
|
|
|
|
|
for (let i = 0; i < 12; i++) {
|
|
|
|
|
date.setMonth(date.getMonth() - 1)
|
|
|
|
|
const pre = date.getFullYear() + '-' + Util.formateTime(date.getMonth() + 1) + '-'
|
|
|
|
|
months.push({
|
|
|
|
|
startTime: pre + '01',
|
|
|
|
|
endTime: pre + new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 1000 * 60 * 60 * 24).getDate()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => {
|
|
|
|
|
const option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: ''
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
},
|
|
|
|
|
rotate: 60
|
|
|
|
|
},
|
|
|
|
|
data: data.map(e => e.time)
|
|
|
|
|
},
|
|
|
|
|
dataZoom: [//滑动条
|
|
|
|
|
{
|
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始
|
|
|
|
|
show: false,//是否显示滑动条，不影响使用
|
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
|
|
|
startValue: 0, // 从头开始。
|
|
|
|
|
endValue: 7 // 一次性展示6个。
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
margin: 10,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
formatter: '{value}'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
color: ['#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
|
|
|
|
|
legend: {
|
|
|
|
|
data: ['月人均在线学习时长情况'],
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
top: '8%'
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
top: '20%',
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: data.map(e => e.averageDuration),
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: 11,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#4033F9"
|
|
|
|
|
}, {
|
|
|
|
|
offset: 0.8,
|
|
|
|
|
color: "#516fff"
|
|
|
|
|
}], false),
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
showBackground: true,
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
chart[2] = echarts.init(document.querySelector(`#chart3`))
|
|
|
|
|
chart[2].setOption(option)
|
|
|
|
|
setInterval(function () {
|
|
|
|
|
animateChart(chart[2], option, data)
|
|
|
|
|
}, 1500)
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
|
|
|
|
|
// 平台登录人数
|
|
|
|
|
this.$get(this.api.platformLoginStatistics, {
|
|
|
|
|
platform: Setting.platformId
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
const option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '12%',
|
|
|
|
|
right: '5%',
|
|
|
|
|
top: '15%',
|
|
|
|
|
bottom: '30%'
|
|
|
|
|
},
|
|
|
|
|
dataZoom: [//滑动条
|
|
|
|
|
{
|
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始
|
|
|
|
|
show: false,//是否显示滑动条，不影响使用
|
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
|
|
|
startValue: 0, // 从头开始。
|
|
|
|
|
endValue: 3 // 一次性展示6个。
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
xAxis: [{
|
|
|
|
|
type: 'category',
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#57617B'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
},
|
|
|
|
|
rotate: 60
|
|
|
|
|
},
|
|
|
|
|
data: data.map(e => e.today)
|
|
|
|
|
}],
|
|
|
|
|
yAxis: [{
|
|
|
|
|
type: 'value',
|
|
|
|
|
minInterval: 1,
|
|
|
|
|
min: 0,
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#57617B'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
// interval: 5,
|
|
|
|
|
margin: 10,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
formatter: '{value}'
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
color: ['#25CEF3']
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
series: [{
|
|
|
|
|
name: '平台登录人数',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: 8,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#009AFD"
|
|
|
|
|
}, {
|
|
|
|
|
offset: 0.8,
|
|
|
|
|
color: "#33DAFF"
|
|
|
|
|
}], false),
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: data.map(e => e.quantity)
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
chart[3] = echarts.init(document.querySelector(`#chart4`))
|
|
|
|
|
chart[3].setOption(option)
|
|
|
|
|
setInterval(function () {
|
|
|
|
|
animateChart(chart[3], option, data, 3)
|
|
|
|
|
}, 1500)
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
|
|
|
|
|
// 监听resize事件，动态改变chart大小
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
this.examChart && this.examChart.resize()
|
|
|
|
|
for (let i = 0; i < 4; i++) {
|
|
|
|
|
chart[i] && chart[i].resize()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 表格滚动效果
|
|
|
|
|
scrollTable () {
|
|
|
|
|
const dom = this.$refs.popularCourses
|
|
|
|
|
const dom1 = this.$refs.ach
|
|
|
|
|
const dom2 = this.$refs.active
|
|
|
|
|
const unit = window.innerWidth > 1920 ? 2 : 1
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
dom.scrollTop += unit
|
|
|
|
|
if (dom.clientHeight + dom.scrollTop >= dom.scrollHeight) dom.scrollTop = 0
|
|
|
|
|
|
|
|
|
|
dom1.scrollTop += unit
|
|
|
|
|
if (dom1.clientHeight + dom1.scrollTop >= dom1.scrollHeight) dom1.scrollTop = 0
|
|
|
|
|
|
|
|
|
|
dom2.scrollTop += unit
|
|
|
|
|
if (dom2.clientHeight + dom2.scrollTop >= dom2.scrollHeight) dom2.scrollTop = 0
|
|
|
|
|
}, 30)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import '../../styles/page/screen.scss';
|
|
|
|
|
</style>
|
