Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit ad5ef65f by wdc147
Options

update

parent 09ca30ac
Showing with 118 additions and 158 deletions
src/pages/index/Right.vue
......@@ -19,7 +19,7 @@
</div>
<p class="percent">
<span v-for="(item, l) in coursedata" :key="l">
{{item.name}}
{{item.key}}
<count-to :endVal="item.value" :suffix="item.unit"/>
</span>
</p>
......@@ -119,11 +119,11 @@
</template>
<script>
import TitleLine from '@/components/TitleLine'
import TitleLine from 'components/TitleLine'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import BarChart from 'components/echarts/BarChart.vue'
import PieChart from 'components/echarts/PieChart.vue'
import active from './active'
export default {
name: 'Right',
......@@ -148,9 +148,7 @@ export default {
showVisible: false,
// 师资力量
eduConfig: {},
edu: [
{ value: 168, name: '教师数' }
],
edu: null,
staffConfig: {},
staff: [
{
......@@ -168,63 +166,12 @@ export default {
}
],
// 教学课程
coursedata: [
{
name: '课程数',
value: 120
},
{
name: '学习总时长',
value: 1248
},
{
name: '出勤率',
value: 88,
unit: '%'
}
],
coursedata: [],
lineConfig: {},
line: [
{
name: '线下',
value: 32
}, {
name: '线上',
value: 68
}
],
line: [],
// 学习内容
learnConfig: {},
learn: [
{
name: '**学习',
value: 65
},
{
name: '**学习',
value: 25
},
{
name: '**学习',
value: 85
},
{
name: '**学习',
value: 70
},
{
name: '**学习',
value: 100
},
{
name: '**学习',
value: 40
},
{
name: '**学习',
value: 45
}
],
learn: [],
swiperOption: {
mousewheel: true,
centeredSlides: true,
......@@ -256,7 +203,9 @@ export default {
},
mounted () {
this.getstaff()
this.getEdu()
this.getEdudata()
this.getcoursedata()
this.getlinedata()
this.getline()
this.getlearn()
},
......@@ -267,17 +216,31 @@ export default {
option: {
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
data: this.rightData.staff.list.map(item => item.value).reverse()
}
],
base: {
yAxis: [{
data: this.staff.map(item => item.name).reverse()
data: this.rightData.staff.list.map(item => item.key).reverse()
}]
}
}
}
},
getEdudata () {
const num = this.rightData.staff.list.map(item => {
return item.value
})
function sum (arr) {
var s = 0
arr.forEach(val => {
s += val
})
return s
}
this.edu = sum(num)
this.getEdu()
},
getEdu () {
this.eduConfig = {
option: {
......@@ -292,16 +255,14 @@ export default {
type: 'pie',
name: '师资力量',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#3EB8F7'
}
shadowBlur: 0,
shadowColor: '#3EB8F7'
},
label: {
show: false
},
labelLine: {
show: false
},
clockWise: false,
hoverAnimation: false,
......@@ -309,47 +270,38 @@ export default {
radius: ['65%', '78%'],
data: [
{
value: this.edu[0].value,
value: this.edu,
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{b|教师数}'
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 30,
fontWeight: '400'
},
position: 'center',
show: true
}
b: {
color: '#fff',
align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n{b|教师数}'
},
position: 'center',
show: true
},
itemStyle: {
normal: {
color: '#3EB8F7',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
color: '#3EB8F7',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}, {
value: this.edu[0].value / 2 + 20,
value: this.edu / 2 + 20,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0, 12, 27)'
},
emphasis: {
color: '#fff'
}
color: 'rgba(0, 12, 27)'
}
}
]
......@@ -358,6 +310,17 @@ export default {
}
}
},
getcoursedata () {
this.coursedata = this.rightData.coursedata.list || []
},
getlinedata () {
this.line = this.rightData.line.list.map(item => {
return {
name: item.key,
value: item.value
}
}) || []
},
// 教学课程百分比
getline () {
this.lineConfig = {
......@@ -388,28 +351,27 @@ export default {
barBorderRadius: [5, 0, 0, 5]
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.name + '}{b|' + params.value + '%}'
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
console.log(params, '5555')
return '{a|' + params.name + '}{b|' + params.value + '%}'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
}
},
......@@ -427,28 +389,26 @@ export default {
barBorderRadius: [0, 5, 5, 0]
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.name + '}{b|' + params.value + '%}'
show: true,
position: 'insideRight',
offset: [-40, 2],
formatter: function (params) {
return '{a|' + params.name + '}{b|' + params.value + '%}'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
b: {
color: '#fff',
align: 'center',
fontSize: 24,
fontFamily: 'Century Gothic',
fontWeight: '400'
}
}
},
......@@ -460,8 +420,8 @@ export default {
},
// 学习内容
getlearn () {
const xData = this.learn.map(v => v.name)
const Data = this.learn.map(v => v.value)
const xData = this.rightData.learn.data.list.map(v => v.key)
const Data = this.rightData.learn.data.list.map(v => v.value)
this.learnConfig = {
layout: {
width: '100%',
......@@ -502,6 +462,7 @@ export default {
show: false
},
axisLabel: {
interval: 0,
show: true,
fontSize: 14,
color: '#469CCC'
......@@ -510,7 +471,8 @@ export default {
},
yAxis: [{
type: 'value',
max: 'dataMax',
max: this.rightData.learn.yMaxValue,
min: this.rightData.learn.yMinValue,
axisLine: {
show: true,
lineStyle: {
......@@ -528,12 +490,10 @@ export default {
},
axisLabel: {
formatter: '{value}%',
textStyle: {
fontSize: 14,
fontFamily: 'Century Gothic',
fontWeight: 400,
color: '#469CCC'
}
fontSize: 14,
fontFamily: 'Century Gothic',
fontWeight: 400,
color: '#469CCC'
},
boundaryGap: ['20%', '20%']
}]
......
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