You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
723 lines
22 KiB
723 lines
22 KiB
3 years ago
|
<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" style="height: 280px;"></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" style="height: 280px;"></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" style="height: 280px;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="middle">
|
||
|
|
<div class="item" style="height: 510px">
|
||
|
|
<!--左上边框-->
|
||
|
|
<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">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="active-number">
|
||
|
|
<p class="val">23124</p>
|
||
|
|
<p class="name">当前活跃人数</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item" style="height: 360px;">
|
||
|
|
<!--左上边框-->
|
||
|
|
<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: 350px"></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">{{ item.curriculumName }}</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="item" style="height: 200px">
|
||
|
|
<!--左上边框-->
|
||
|
|
<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>
|
||
|
|
<!-- <ul class="list">
|
||
|
|
<li v-for="(item, i) in courses" :key="i">{{ item.curriculumName }}</li>
|
||
|
|
</ul> -->
|
||
|
|
</div>
|
||
|
|
<div class="item" style="height: 480px">
|
||
|
|
<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%">班级</th>
|
||
|
|
<th width="20%">练习次数</th>
|
||
|
|
<th width="20%">练习平均分</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto">
|
||
|
|
<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%">{{ item.className }}</td>
|
||
|
|
<td width="20%">{{ item.practiceNumber }}</td>
|
||
|
|
<td width="20%">{{ item.avgScore }}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Setting from '@/setting'
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
time: 0,
|
||
|
|
times: [
|
||
|
|
{
|
||
|
|
id: 0,
|
||
|
|
name: '月'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: '日'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
stompClientMarket: null,
|
||
|
|
stompClient: null,
|
||
|
|
goodsSell: [],
|
||
|
|
cryptoList: [],
|
||
|
|
courses: [],
|
||
|
|
achs: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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.getTheMostUsedCoursesInOurSchool).then(({ data }) => {
|
||
|
|
this.courses = data
|
||
|
|
}).catch(res => {})
|
||
|
|
|
||
|
|
// 学霸排行榜
|
||
|
|
this.$post(this.api.academicLeadersRanking).then(({ data }) => {
|
||
|
|
// 优先排序平均分，然后再排序练习次数
|
||
|
|
data.sort((a, b) => {
|
||
|
|
if (a.avgScore == b.avgScore) return b.practiceNumber - a.practiceNumber
|
||
|
|
return b.avgScore - a.avgScore
|
||
|
|
})
|
||
|
|
this.achs = data
|
||
|
|
}).catch(res => {})
|
||
|
|
},
|
||
|
|
// 切换时间单位
|
||
|
|
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%', '50%'],
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
formatter: '{b} {c}'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data:[
|
||
|
|
{value: data.totalNumberOfExams, name:'参考总场次'},
|
||
|
|
{value: data.referenceNumber, name:'参考人数'},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
echarts.init(document.querySelector(`#chart1`)).setOption(option)
|
||
|
|
}).catch(res => {})
|
||
|
|
},
|
||
|
|
// 获取图标数据并渲染
|
||
|
|
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%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
color:['#f7ee46', '#56bb29', '#5492ff', '#e51579'],
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
data: times,
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
margin: 10,
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
formatter: '{value}%'
|
||
|
|
},
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '不及格',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Ad',
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: data1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '及格',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'Ad',
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: data2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '良',
|
||
|
|
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, series)
|
||
|
|
// }, 1500)
|
||
|
|
}).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(243, 147, 189, 0.4)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
color1: '#f9d437',
|
||
|
|
color2: 'rgba(255, 234, 144, 0.4)'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => {
|
||
|
|
const times = []
|
||
|
|
const courses = []
|
||
|
|
const series = []
|
||
|
|
const courseData = {}
|
||
|
|
data.map(e => {
|
||
|
|
times.push(e.time)
|
||
|
|
e.assesScoreRespList.map(n => {
|
||
|
|
const name = n.curriculumName
|
||
|
|
courses.push(n.curriculumName)
|
||
|
|
if (courseData[name]) {
|
||
|
|
courseData[name].push(+n.avgScore)
|
||
|
|
} else {
|
||
|
|
courseData[name] = [+n.avgScore]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
let index = 0
|
||
|
|
// 生成series
|
||
|
|
for (const i in courseData) {
|
||
|
|
series.push({
|
||
|
|
name: i,
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
symbol: 'circle',
|
||
|
|
symbolSize: 5,
|
||
|
|
showSymbol: false,
|
||
|
|
lineStyle: {
|
||
|
|
normal: {
|
||
|
|
color: colors[index].color1,
|
||
|
|
width: 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
normal: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
|
|
offset: 0,
|
||
|
|
color: colors[index].color2
|
||
|
|
}, {
|
||
|
|
offset: 0.8,
|
||
|
|
color: colors[index].color2
|
||
|
|
}], false),
|
||
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: colors[index].color1,
|
||
|
|
borderColor: 'rgba(221, 220, 107, .1)',
|
||
|
|
borderWidth: 12
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: courseData[i]
|
||
|
|
})
|
||
|
|
++index
|
||
|
|
}
|
||
|
|
console.log(33, courseData)
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dddc6b'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top:'8%',
|
||
|
|
data: courses,
|
||
|
|
textStyle: {
|
||
|
|
color: 'rgba(255,255,255,.5)',
|
||
|
|
fontSize:'12',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '30',
|
||
|
|
top: '25%',
|
||
|
|
right: '10',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: "rgba(255,255,255,.9)",
|
||
|
|
fontSize:12,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255,255,255,.2)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: times
|
||
|
|
}, {
|
||
|
|
axisPointer: {show: false},
|
||
|
|
axisLine: {show: false},
|
||
|
|
position: 'bottom',
|
||
|
|
offset: 20,
|
||
|
|
}],
|
||
|
|
yAxis: [{
|
||
|
|
type: 'value',
|
||
|
|
name: '平均分',
|
||
|
|
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[0], option, series)
|
||
|
|
// }, 1500)
|
||
|
|
}).catch(res => {})
|
||
|
|
|
||
|
|
// this.scrollTable()
|
||
|
|
|
||
|
|
// 监听resize事件，动态改变chart大小
|
||
|
|
// window.addEventListener('resize', () => {
|
||
|
|
// for (let i = 0; i < 7; i++) {
|
||
|
|
// chart[i] && chart[i].resize()
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
// 表格滚动效果
|
||
|
|
// scrollTable() {
|
||
|
|
// const dom = this.$refs.tableWrap
|
||
|
|
// const dom1 = this.$refs.gdpList
|
||
|
|
// setInterval(() => {
|
||
|
|
// dom.scrollTop += 1
|
||
|
|
// if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
|
||
|
|
|
||
|
|
// dom1.scrollTop += 1
|
||
|
|
// if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0
|
||
|
|
// }, 30)
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "../../styles/page/screen.scss";
|
||
|
|
</style>
|