Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit f7b874fb by wdc147
Options

add

parent 87255517
Showing with 321 additions and 4 deletions
src/pages/index/Right.vue
<template>
<div class="managePlatform-right"></div>
<div class="managePlatform-right">
<title-line :con="'师资/课程/活动'"></title-line>
<div class="faculty">
<div class="teachernum">
<div class="teacherTitle">师资力量</div>
<pie-chart :option="eduConfig.option"/>
</div>
<div class="staff">
<bar-chart :option="staffConfig.option"/>
</div>
</div>
<div class="course">
<div class="coursetitle">
<div class="left">教学课程</div>
<div class="seemore">查看更多</div>
</div>
<p class="percent">
<span>课程数</span>
<span>学习总时长</span>
<span>出勤率</span>
</p>
<div class="line">
<bar-chart :option="lineConfig.option"/>
</div>
</div>
</div>
</template>
<script>
import TitleLine from '@/components/TitleLine'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
export default {
name: 'Right',
components: {
TitleLine,
BarChart,
PieChart
},
data () {
return {}
return {
eduConfig: {},
edu: [
{value: 168, name: '教师数'}
],
staffConfig: {},
// 师资数据
staff: [
{
name: '****教授',
value: 41
}, {
name: '****名师',
value: 53
}, {
name: '*****专家',
value: 61
}, {
name: '*******',
value: 12
}
],
lineConfig: {},
line: [
{
name: '线下',
value: 32
}, {
name: '线上',
value: 68
}
],
genderPercent: {
male: '32%',
female: '68%'
}
}
},
mounted () {},
mounted () {
this.getstaff()
this.getEdu()
this.getline()
},
methods: {}
methods: {
getline () {
this.lineConfig = {
option: {
seriesData: [
{
name: 'A',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [2, 0, 0, 2]
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1
}
}
},
data: [32]
},
{
name: 'B',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowOffsetY: 0,
shadowOffsetX: 0
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1
}
}
},
data: [68]
}
]
}
}
},
getEdu () {
this.eduConfig = {
option: {
base: {
legend: {
show: false
}
},
seriesData: [
{
type: 'pie',
name: '师资力量',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#3EB8F7'
}
},
clockWise: false,
hoverAnimation: false,
center: ['38%', '50%'],
radius: ['65%', '78%'],
data: [
{
value: this.edu[0].value,
label: {
normal: {
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 30,
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n\n{b|教师数}'
},
position: 'center',
show: true
}
},
itemStyle: {
normal: {
color: '#3EB8F7',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}
}, {
value: this.edu[0].value / 2 + 20,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0, 12, 27)'
},
emphasis: {
color: '#fff'
}
}
}
]
}
]
}
}
},
getstaff () {
this.staffConfig = {
option: {
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
}
],
base: {
yAxis: [{
data: this.staff.map(item => item.name).reverse()
}]
}
}
}
}
}
}
</script>
<style lang="less" scoped>
.managePlatform-right {
.faculty{
margin-top: 7px;
height: 156px;
display: flex;
.teachernum{
width: 134px;
height: 100%;
.teacherTitle{
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
}
.staff{
margin-top: 47px;
width: 340px;
}
}
.course{
height: 110px;
.coursetitle{
display: flex;
justify-content: space-between;
.left{
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.seemore{
width: 94px;
cursor: pointer;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18D1C6;
background: url('./../../../static/images/index/查看更多.png') no-repeat right;
}
}
.percent{
margin-top: 10px;
display: flex;
justify-content: space-between;
span{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
}
}
.line {
margin-top: 12px;
display: flex;
margin-top: 5px;
margin-bottom: 4px;
span {
width: 0%;
height: 31px;
transition: width linear 300ms;
&.male {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #00BEFF;
opacity: 0.5;
}
&.female {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: #00DE7D;
opacity: 0.5;
}
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment