“设备使用”模块没有做 因为项目不需要 仅自己记录使用 可供参考 那么上代码
<template>
<!--app-container-->
<div class="home-wrap">
<div class="wrap" v-if="schoolId">
<!--第一块-->
<div class="statistical-box">
<div class="title-common">
<div class="title-common-left">
<img src="../assets/images/index_home.png" class="icon-20">
首页
</div>
<el-select v-model="infoValue" placeholder="请选择" size="mini" @change="handleSelectInfoChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="statistical-main">
<!--活动教案-->
<div class="teach-plan">
<div class="title-common">
<div class="title-common-left">
<img src="../assets/images/index_plan.png" class="icon-20">
活动教案
</div>
</div>
<div class="teach-plan-cont">
<div class="tpc-lef">
<div class="tpc-lef-list">
<div class="d1">新增教案</div>
<div class="d2">{{ teachPlanInfo ? teachPlanInfo.addTeachPlans : 0 }}</div>
</div>
<div class="tpc-lef-list">
<div class="d1">修改教案</div>
<div class="d2">{{ teachPlanInfo ? teachPlanInfo.editTeachPlans : 0 }}</div>
</div>
<div class="tpc-lef-list">
<div class="d1">累计教案</div>
<div class="d2">{{ teachPlanInfo ? teachPlanInfo.totalTeachPlans : 0 }}</div>
</div>
</div>
<div class="tpc-rig">
<!-- <div class="tpc-rig-list">
<div class="d1">{{ teachPlanInfo ? teachPlanInfo.prepareTeachPlans : 0 }}</div>
<div class="d2">备课次数</div>
</div> -->
<div class="tpc-rig-list">
<div class="d1">{{ teachPlanInfo ? teachPlanInfo.participateInTeachers : 0 }}</div>
<div class="d2">参与老师</div>
</div>
</div>
</div>
</div>
<!--活动教案-end-->
<!--体育活动-->
<div class="teach-plan physical-activity">
<div class="title-common">
<div class="title-common-left">
<img src="../assets/images/index_class.png" class="icon-20">
体育活动
</div>
</div>
<div class="teach-plan-cont">
<div class="tpc-lef">
<div class="tpc-lef-list">
<div class="d1">活动班级</div>
<div class="d2">{{ classRecordInfo ? classRecordInfo.classNum : 0 }}</div>
</div>
<div class="tpc-lef-list">
<div class="d1">参与幼儿</div>
<div class="d2">{{ classRecordInfo ? classRecordInfo.studentNum : 0 }}</div>
</div>
<div class="tpc-lef-list">
<div class="d1">均课时长</div>
<div class="d2">{{ classRecordInfo ? classRecordInfo.avgTime : 0 }}</div>
</div>
</div>
<div class="tpc-rig">
<div class="tpc-rig-list">
<div class="d1">{{ classRecordInfo ? classRecordInfo.countOfPeople : 0 }}</div>
<div class="d2">幼儿参与人次</div>
</div>
<div class="tpc-rig-list">
<div class="d1">{{ classRecordInfo ? classRecordInfo.countOfRecord : 0 }}</div>
<div class="d2">活动次数</div>
</div>
</div>
</div>
</div>
<!--体育活动-end-->
<!--观察记录-->
<div class="teach-plan observe-record">
<div class="title-common">
<div class="title-common-left">
<img src="../assets/images/index_record.png" class="icon-20">
观察记录
</div>
</div>
<div class="teach-plan-cont">
<div class="tpc-lef">
<div class="tpc-lef-list">
<div class="d1">观察记录数</div>
<div class="d2">{{ observeRecordInfo ? observeRecordInfo.completedRecordNumber : 0 }}</div>
</div>
<div class="tpc-lef-list">
<div class="d1">观察幼儿</div>
<div class="d2">{{ observeRecordInfo ? observeRecordInfo.observedStudentNumber : 0 }}</div>
</div>
<div class="tpc-lef-list">
<div class="d1">记录班级</div>
<div class="d2">{{ observeRecordInfo ? observeRecordInfo.observedClassNumber : 0 }}</div>
</div>
</div>
<div class="tpc-rig">
<div class="pie-box">
<div class="d1" id="completionRate" style="width: 66px; height: 66px;"></div>
<div class="d2">完成人数占比</div>
</div>
</div>
</div>
</div>
<!--观察记录-end-->
<!--体测情况-->
<div class="teach-plan condition">
<div class="title-common">
<div class="title-common-left">
<img src="../assets/images/index_physical.png" class="icon-20">
体测情况
</div>
</div>
<div class="teach-plan-cont">
<div class="tpc-lef">
<div class="tpc-lef-list">
<div class="d1">幼儿人数</div>
<div class="d2">{{ phyInfo ? phyInfo.studentNum : 0 }}</div>
</div>
<div class="tpc-lef-list">
<div class="d1">参与班级</div>
<div class="d2">{{ phyInfo ? phyInfo.classNum : 0 }}</div>
</div>
</div>
<div class="tpc-rig">
<div class="pie-box">
<div class="d1" id="standardRate" style="width: 66px; height: 66px;"></div>
<div class="d2">达标率</div>
</div>
</div>
</div>
</div>
<!--体测情况-end-->
</div>
</div>
<!--第一块-end-->
<!--第二块-->
<div class="activty-box">
<!--活动教案-->
<div class="activity-plan">
<div class="title-common">
<div class="title-common-left">
活动教案
</div>
<el-select v-model="planValue" placeholder="请选择" size="mini" @change="handleSelectPlanChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!--头部-end-->
<el-table class="activity-teacher" :data="tableData" style="width: 100%" height="400" v-loading="loading"
:header-cell-style="{ background: '#02a7f0', color: '#fff', fontWeight: 400 }">
<el-table-column prop="date" label="教育" width="130">
<template slot-scope="scope">
<div class="student-mes">
<img :src="scope.row.avatar ? scope.row.avatar : defaultAvatar" alt="" class="student-img" />
<div class="d1">{{ scope.row.name }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="addTeachPlans" label="新增教案" align="center"></el-table-column>
<el-table-column prop="editTeachPlans" label="修改教案" align="center"></el-table-column>
<!-- <el-table-column prop="prepareTeachPlans" label="备课次数" align="center"></el-table-column> -->
</el-table>
</div>
<!--活动教案-end-->
<!--班级活动-->
<div class="activity-class">
<div class="title-common">
<div class="title-common-left">
班级活动
</div>
<el-select v-model="classValue" placeholder="请选择" size="mini" @change="handleSelectClassChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!--头部-end-->
<div class="flex-box jc-sb">
<div class="activity-class-lef">
<div style="width:400px; height: 400px" id="activityRate"></div>
</div>
<!--班级统计 柱状图+折线图-->
<div class="activity-class-rig">
<div style="width: 100%; height: 400px" id="classRecord"></div>
</div>
</div>
</div>
<!--班级活动-end-->
</div>
<!--第二块-end-->
<!--第三块-->
<div class="activity-class width-big">
<div class="title-common">
<div class="title-common-left">
观察记录
</div>
<el-select v-model="recordValue" placeholder="请选择" size="mini" @change="handleSelectRecordChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!--头部-end-->
<div class="flex-box jc-sb">
<div class="activity-class-lef">
<div style="width:480px; height: 400px" id="recordPie"></div>
</div>
<!--班级统计 柱状图+折线图-->
<div class="activity-class-rig">
<div style="width: 100%; height: 400px" id="recordBarDouble"></div>
</div>
</div>
</div>
<div class="activity-class width-big">
<div class="title-common">
<div class="title-common-left">
体测情况
</div>
<div class="title-common-right">
<el-radio-group v-model="radio" style="margin-right: 20px;" @change="handleRadioChange">
<el-radio :label="1">2003版</el-radio>
<el-radio :label="2">2023版</el-radio>
</el-radio-group>
<el-select v-model="physicalValue" placeholder="请选择" size="mini" @change="handleSelectPhysicalChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>
<!--头部-end-->
<div class="flex-box jc-sb">
<div class="activity-class-lef">
<div style="width:480px; height: 400px" id="physicalRadar"></div>
</div>
<!--班级统计 柱状图+折线图-->
<div class="activity-class-rig">
<div style="width: 100%; height: 400px" id="physicalBarMore"></div>
</div>
</div>
</div>
<!--第三块-end-->
</div>
<div class="home" v-else>
<img src="../assets/images/logo_big.png" />
</div>
</div>
</template>
<script>
import { getHomeInfo, getHomeBaseInfo, getPlanBaseInfo, getClassBaseInfo, getRecordBaseInfo, getPhysicalBaseInfo } from "@/api/index";
import * as echarts from 'echarts';
import defaultAvatar from "@/assets/images/profile.jpg";
export default {
name: "Index",
data() {
return {
loading: false,
radio: 1,//体测情况年份选择
defaultAvatar,
// 版本号
version: "3.8.5",
options: [{
value: '1',
label: '近一个月'
}, {
value: '3',
label: '近三个月'
}, {
value: '6',
label: '近六个月'
}, {
value: '9',
label: '近九个月'
}, {
value: '12',
label: '近十二个月'
}],
info: null,//页面总信息
teachPlanInfo: null,//活动教案-基本信息
classRecordInfo: null,//体育活动-基本信息
observeRecordInfo: null,//观察记录-基本信息
phyInfo: null,//体测情况-基本信息
infoValue: '1',//首页-下拉选择值
planValue: '1',//活动教案-下拉选择值
classValue: '1',//班级活动-下拉选择值
recordValue: '1',//观察记录-下拉选择值
physicalValue: '1',//体测情况-下拉选择值
chartdom: null,
activitydom: null,
classActivityDom: null,//班级活动
recordPieDom: null,//观察记录实心饼图
recordBarDoubleDom: null,//观察记录双柱状图
physicalRadarDom: null,//体测情况雷达图
physicalBarMoreDom: null,//体测情况多色柱状图
tableData: [],
schoolId: null,
};
},
created() {
this.schoolId = this.$store.state.user.schoolId
if(this.schoolId){
this.getInfo()
}
},
mounted() {
},
methods: {
//首页-下拉选择
handleSelectInfoChange(value) {
let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0
getHomeBaseInfo(params).then(res => {
if (res.code == 200) {
let odata = res.data
this.teachPlanInfo = odata.teachPlanInfo
this.classRecordInfo = odata.classRecordInfo
this.observeRecordInfo = odata.observeRecordInfo
this.phyInfo = odata.phyInfo
//观察记录环形饼图数据
let completionRate = ((this.observeRecordInfo.observedStudentNumber / this.observeRecordInfo.studentNumber) * 100).toFixed(0)
this.pieEcharts('completionRate', completionRate);
//体测情况环形饼图数据
let standardRate = this.phyInfo.passRate || 0
this.pieEcharts('standardRate', standardRate);
}
});
},
//活动教案-下拉选择
handleSelectPlanChange(value) {
let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0
this.loading = true
getPlanBaseInfo(params).then(res => {
if (res.code == 200) {
this.tableData = res.data.teachPlansDetails
this.loading = false
}
});
},
//班级活动-下拉选择
handleSelectClassChange(value) {
let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0
getClassBaseInfo(params).then(res => {
if (res.code == 200) {
let oinfo = this.info
oinfo.classRecordDetail.classTagList = res.data.classTagList
//班级活动-环形饼图
this.pieEcharts2('activityRate');
//班级统计 柱状图+折线图
this.info.classRecordDetail.classList = res.data.classList
this.info.classRecordDetail.classRecordList = res.data.classRecordList
this.info.classRecordDetail.classStudentList = res.data.classStudentList
this.pieBarEcharts('classRecord')
}
});
},
//观察记录-下拉选择
handleSelectRecordChange(value) {
let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0
getRecordBaseInfo(params).then(res => {
if (res.code == 200) {
//观察记录饼图
this.info.observeRecordAreaInfo.series = res.data.series
this.pieSolidEcharts();
//观察记录双柱状图
this.info.observeRecordAreaInfo.classObservationVOList = res.data.classObservationVOList
this.barDoubleEcharts();
}
});
},
//体测情况-下拉选择
handleSelectPhysicalChange(value) {
let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0
getPhysicalBaseInfo(params).then(res => {
if (res.code == 200) {
//体测情况雷达图
this.info.classPhyInfoDetail.data2003 = res.data.data2003
this.info.classPhyInfoDetail.data2023 = res.data.data2023
let avgArr = this.getAvgArr()
this.physicalRadarEcharts(avgArr)
//体测情况柱状堆叠图
this.physicalBarMoreEcharts()
}
});
},
getInfo() {
let params = this.schoolId + '/' + '1' + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0 month默认1
getHomeInfo(params).then(res => {
if (res.code == 200) {
let oinfo = res.data
this.info = oinfo
let basicInfo = oinfo.basicInfo
this.teachPlanInfo = basicInfo.teachPlanInfo
this.classRecordInfo = basicInfo.classRecordInfo
this.observeRecordInfo = basicInfo.observeRecordInfo
this.phyInfo = basicInfo.phyInfo
//观察记录环形饼图数据
let completionRate = 0
if (this.info && this.info.basicInfo && this.info.basicInfo.observeRecordInfo && this.info.basicInfo.observeRecordInfo.studentNumber > 0) {
completionRate = ((this.info.basicInfo.observeRecordInfo.observedStudentNumber / this.info.basicInfo.observeRecordInfo.studentNumber) * 100).toFixed(0)
}
this.pieEcharts('completionRate', completionRate);
//体测情况环形饼图数据
let standardRate = 0
if (this.info && this.info.basicInfo && this.info.basicInfo.phyInfo) {
standardRate = this.info.basicInfo.phyInfo.passRate
}
this.pieEcharts('standardRate', standardRate);
//活动教案
if (this.info && this.info.teachPlanDetailInfo && this.info.teachPlanDetailInfo.teachPlansDetails && this.info.teachPlanDetailInfo.teachPlansDetails.length > 0) {
this.tableData = this.info.teachPlanDetailInfo.teachPlansDetails
}
//班级活动-环形饼图
this.pieEcharts2('activityRate');
//班级统计 柱状图+折线图
this.pieBarEcharts('classRecord')
//观察记录饼图
this.pieSolidEcharts();
//观察记录双柱状图
this.barDoubleEcharts();
//判断是2003 还是 2023版本
if (this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2003 && !this.isEmptyObject(this.info.classPhyInfoDetail.data2003)) {
this.radio = 1
} else if (this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2023 && !this.isEmptyObject(this.info.classPhyInfoDetail.data2023)) {
this.radio = 2
}else{
this.radio = 1
}
//体测情况雷达图
let avgArr = this.getAvgArr()
this.physicalRadarEcharts(avgArr)
//体测情况柱状堆叠图
this.physicalBarMoreEcharts()
}
});
},
//选择年份
handleRadioChange(value) {
//console.log('当前选中的Radio label:', value);
this.radio = value
let avgArr = this.getAvgArr()
// 获取雷达图
this.physicalRadarEcharts(avgArr)
//体测情况柱状堆叠图
this.physicalBarMoreEcharts()
},
//柱状堆叠图
physicalBarMoreEcharts() {
const container = document.getElementById('physicalBarMore'); // 获取容器元素
this.physicalBarMoreDom = echarts.init(container); // 初始化echarts实例
let odataAll = []
let legendData = ['需努力', '合格', '良好', '优秀']
let odata = []
if (this.radio == 1) {
odata = this.info.classPhyInfoDetail.data2003
} else if (this.radio == 2) {
odata = this.info.classPhyInfoDetail.data2023
}
let oclassList = null
if((this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2003) || (this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2023)){
if(odata && odata != null){
oclassList = odata.classList
odataAll[0] = odata.level01
odataAll[1] = odata.level02
odataAll[2] = odata.level03
odataAll[3] = odata.level04
}
}
var data = {
area: oclassList ? oclassList : [],
legend: legendData,
data: odataAll,
};
var colors = ['#ff5371', '#ffd22f', '#26cd7b', '#26a3ff'];
var option = {
tooltip: {
order: 'seriesDesc', //echarts 把tooltip里值的显示顺序倒序
trigger: 'axis',
axisPointer: {
type: 'none',
},
},
color: colors,
legend: {
bottom: 0,
left: 'center',
itemWidth: 20,
itemHeight: 8,
textStyle: {
fontSize: 14,
padding: [3, 0, 0, 0],
},
data: data.legend,
},
grid: {
left: '3%',
right: '4%',
bottom: '13%',
containLabel: true,
},
xAxis: {
type: 'category',
data: data.area,
axisTick: {
show: false //隐藏刻度线
},
},
yAxis: {
type: 'value',
axisLine: {
width: 5,
},
splitLine: {
show: false,
},
},
series: [],
};
for (var i = 0; i < data.legend.length; i++) {
option.series.push({
name: data.legend[i],
type: 'bar',
stack: '总量',
barWidth: '45%',
barMaxWidth: '50',
label: {
show: false,
position: 'insideRight',
},
data: data.data[i],
});
}
this.physicalBarMoreDom.setOption(option);
//随着屏幕大小调节图表
//myChart.resize();
window.addEventListener('resize', () => {
this.physicalBarMoreDom.resize();
});
},
//判断是不是空对象
isEmptyObject(obj) {
return Object.keys(obj).length === 0;
},
//加载的时候获取雷达图的数据
getAvgArr() {
let itemAvg = null
if((this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2003) || (this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2023)){
if (this.radio == 1) {
if(this.info.classPhyInfoDetail.data2023 != null && this.info.classPhyInfoDetail.data2023.itemAvg){
itemAvg = this.info.classPhyInfoDetail.data2003.itemAvg
}
} else if (this.radio == 2) {
if(this.info.classPhyInfoDetail.data2023 != null && this.info.classPhyInfoDetail.data2023.itemAvg){
itemAvg = this.info.classPhyInfoDetail.data2023.itemAvg
}
}
}
let itemAvgArr = []
if(itemAvg && itemAvg != null){
itemAvgArr[0] = itemAvg.heightScore || 0
itemAvgArr[1] = itemAvg.bodyScore || 0
itemAvgArr[2] = itemAvg.balanceScore || 0
itemAvgArr[3] = itemAvg.upStrengthScore || 0
itemAvgArr[4] = itemAvg.downStrengthScore || 0
itemAvgArr[5] = itemAvg.sensitivityScore || 0
itemAvgArr[6] = itemAvg.flexibilityScore || 0
itemAvgArr[7] = itemAvg.coordinationScore || 0
}
return itemAvgArr
},
//雷达图
physicalRadarEcharts(avgArr) {
const container = document.getElementById('physicalRadar'); // 获取容器元素
this.physicalRadarDom = echarts.init(container); // 初始化echarts实例
let omax = this.radio == 1 ? 5 : 100
let upStrengthName = this.radio == 1 ? '网球掷远' : '握力'
let flexibilityName = this.radio == 1 ? '十米折返跑' : '十五米折返跑'
let option = {
tooltip: {
trigger: 'item',
},
radar: {
shape: 'circle',
indicator: [
{ name: '身高', max: omax },
{ name: '体重', max: omax },
{ name: '平衡力\n(走平衡木)', max: omax },
{ name: '上肢力量\n(' + upStrengthName + ')', max: omax },
{ name: '下肢力量\n(立定跳远)', max: omax },
{ name: '灵敏性\n(' + flexibilityName + ')', max: omax },
{ name: '柔韧性\n(坐位体前屈)', max: omax },
{ name: '协调性\n(双脚连续跳)', max: omax }
],
axisName: { //设置外侧字体的颜色和大小
color: '#666',
fontSize: 12
}
},
series: [
{
name: '',
type: 'radar',
symbol: 'none', // 去除拐角圈
data: [
{
value: avgArr,
name: '体测情况',
lineStyle: {
color: '#02a7f0' // 雷达图里线的颜色
},
itemStyle: {
normal: {
color: '#02a7f0' // 雷达图里线的颜色
}
}
},
]
}
]
};
this.physicalRadarDom.setOption(option);
//随着屏幕大小调节图表
//myChart.resize();
window.addEventListener('resize', () => {
this.physicalRadarDom.resize();
});
},
//双柱状图
barDoubleEcharts() {
const container = document.getElementById('recordBarDouble'); // 获取容器元素
this.recordBarDoubleDom = echarts.init(container); // 初始化echarts实例
let classObservationVOList = []
if (this.info && this.info.observeRecordAreaInfo && this.info.observeRecordAreaInfo.classObservationVOList && this.info.observeRecordAreaInfo.classObservationVOList.length > 0) {
classObservationVOList = this.info.observeRecordAreaInfo.classObservationVOList
}
let classNameArr = []
let completedRecordNumberArr = []
let completedStudentNumberArr = []
if (classObservationVOList.length > 0) {
for (let i in classObservationVOList) {
classNameArr.push(classObservationVOList[i].className)
completedRecordNumberArr.push(classObservationVOList[i].completedRecordNumber)
completedStudentNumberArr.push(classObservationVOList[i].completedStudentNumber)
}
}
let option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
// formatter(params) {
// let list = []
// let listItem = '';
// let name = '';
// params.forEach((item, i) => {
// name = item.name;
// list.push('<span>' +
// item.seriesName +
// '转资额</span>: ' +
// item.value + ' 万元<br/>'
// );
// });
// listItem = list.join('');
// return '<div class="showBox">' + listItem + '</div>'
// }
},
color: ['#f59a23', '#02a7f0'],
legend: {
y: 'bottom',
itemWidth: 20,
itemHeight: 8,
},
grid: {
left: '0',
right: '0',
bottom: '60',
containLabel: true
},
xAxis: [{
data: classNameArr,
axisTick: {
show: false //隐藏刻度线
},
axisLabel: { //横坐标全部显示 不隔开显示
interval: 0
}
}],
yAxis: [{
//name: '转资额(万元)',
nameTextStyle: {
padding: [0, 0, 0, 30] // 四个数字分别为上右下左与原位置距离
},
splitArea: { //隐藏背景网格区域
show: false
},
splitLine: { //隐藏背景网格线
show: true,
lineStyle: {
type: 'dashed' // 设置分隔线为虚线
}
},
axisTick: {
show: false //隐藏刻度线
},
axisLine: { //隐藏y轴
show: false
}
}],
series: [
{
name: '幼儿人数',
type: 'bar',
barWidth: '25%', // 设置柱子宽度为相对于类目宽度的 50%
barMaxWidth: '50',
data: completedStudentNumberArr,
itemStyle: {
borderRadius: [5, 5, 5, 5] // 左上、右上、右下、左下的圆角
}
},
{
name: '观察记录数',
type: 'bar',
barWidth: '25%', // 设置柱子宽度为相对于类目宽度的 50%
barMaxWidth: '50',
data: completedRecordNumberArr,
itemStyle: {
borderRadius: [5, 5, 5, 5] // 左上、右上、右下、左下的圆角
}
}
]
};
this.recordBarDoubleDom.setOption(option);
//随着屏幕大小调节图表
//myChart.resize();
window.addEventListener('resize', () => {
this.recordBarDoubleDom.resize();
});
},
//柱状图+折线图
pieBarEcharts(dom) {
const that = this
const container = document.getElementById(dom); // 获取容器元素
this.classActivityDom = echarts.init(container); // 初始化echarts实例
let option = {
color: ['#f59a23', '#02a7f0'],//自定义线和图例的颜色 f59a23 是黄色 02a7f0 是蓝色
tooltip: {
trigger: 'axis', //显示图例
},
legend: {
bottom: 0, // 图例距离底部的距离
//itemGap: 20, // 图例项之间的间隔
itemWidth: 20,
itemHeight: 8,
data: ['活动次数', '幼儿参与次数'], // 定义图例数据，与 series 中的 name 对应
},
grid: {
bottom: '30', // 图表距离底部的距离，这里设置为容器高度的30%
containLabel: true // 是否包含坐标轴的刻度标签在内
},
xAxis: {
type: 'category',
data: that.info.classRecordDetail.classList,
axisTick: {
show: false //隐藏刻度线
},
axisLabel: {
rotate: 45, // X轴文字向左倾斜45度
fontSize: 10,
formatter: function (params) {
return that.filterFormatter(params)
}
}
},
yAxis: [
{
type: 'value',
// 左侧柱状图的刻度值设置
//min: 0,
//max: 20,
axisLabel: {
formatter: '{value}',
fontSize: 12
}
},
{
type: 'value',
// 右侧折线图的刻度值设置
//min: 0,
//max: 100,
splitLine: {
show: true, // 显示分隔线
lineStyle: {
type: 'dashed' // 设置分隔线为虚线
}
},
axisLabel: {
formatter: '{value}',
fontSize: 12
},
}
],
series: [
{
name: '活动次数',
type: 'bar',
barWidth: '50%', // 设置柱子宽度为相对于类目宽度的 50%
barMaxWidth: '50',
yAxisIndex: 0, // 指定使用第一个 Y 轴
data: this.info.classRecordDetail.classRecordList,
itemStyle: {
// 设置柱状图颜色
color: '#02a7f0',
// 设置圆角
borderRadius: [5, 5, 5, 5] // 左上、右上、右下、左下的圆角
}
},
{
name: '幼儿参与次数',
type: 'line',
yAxisIndex: 1, // 指定使用第二个 Y 轴
data: this.info.classRecordDetail.classStudentList,
symbol: 'none', // 去除拐角圈
lineStyle: {
color: '#f59a23', // 修改折线颜色为黄色
}
}
]
};
this.classActivityDom.setOption(option);
//随着屏幕大小调节图表
//myChart.resize();
window.addEventListener('resize', () => {
this.classActivityDom.resize();
});
},
//字数为8个超出就显示成点
filterFormatter(params) {
var index = 8;
var newstr = '';
for (var i = 0; i < params.length; i += index) {
var tmp = params.substring(i, i + index);
newstr += tmp + '';
}
if (newstr.length > 8)
return newstr.substring(0, 8) + '..';
else
return '\n' + newstr;
},
//实心饼图
pieSolidEcharts() {
const container = document.getElementById('recordPie'); // 获取容器元素
this.recordPieDom = echarts.init(container); // 初始化echarts实例
let odata = []
if (this.info && this.info.observeRecordAreaInfo && this.info.observeRecordAreaInfo.series && this.info.observeRecordAreaInfo.series.length > 0) {
odata = this.info.observeRecordAreaInfo.series
}
let option = {
tooltip: {
trigger: 'item',
formatter: function (data) {
return data.value + '条 ' + data.percent + '%' + "<br/>" + data.name;
}
},
series: [
{
name: '',
type: 'pie',
radius: '50%',
label: {
formatter: function (data) {
return data.value + '条 ' + data.percent + '%' + "\n" + data.name;
}
},
data: odata,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
}
]
};
this.recordPieDom.setOption(option);
// 检测数据是否为空 空数据时的骚操作
if (option.series[0].data.length === 0) {
// 设置“无数据”时的自定义提示
this.recordPieDom.setOption({
textStyle: {
color: '#333',
fontSize: 14
},
tooltip: {
trigger: 'none'
},
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [{value: 0}], // 数据为空
itemStyle: {
color: '#d3d3d3' // 设置饼图的背景颜色
},
label: {
formatter: function () {
return '暂无数据'
},
position: 'center',
textStyle: {
fontSize: 18,
color: '#fff'
}
},
// 禁用交互
interactionType: 'none'
}
]
});
}
//随着屏幕大小调节图表
//myChart.resize();
window.addEventListener('resize', () => {
this.recordPieDom.resize();
});
},
//多颜色环形图
pieEcharts2(dom) {
const container = document.getElementById(dom); // 获取容器元素
this.activitydom = echarts.init(container); // 初始化echarts实例
let odata = []
if (this.info && this.info.classRecordDetail && this.info.classRecordDetail.classTagList && this.info.classRecordDetail.classTagList.length > 0) {
odata = this.info.classRecordDetail.classTagList
}
let pieColor = null;//itemStyle里的color值为null的时候显示的是系统默认的颜色 空值的时候设置为灰色
if(odata.length == 1 && odata[0].value == 0){
pieColor = '#d3d3d3'
odata[0].name = ''
}
let option = {
tooltip: {
trigger: 'item'
},
legend: {
bottom: '0',
left: 'center',
itemWidth: 20,
itemHeight: 8,
},
series: [
{
name: '',
type: 'pie',
center: ['50%', '50%'],
radius: ['30%', '50%'], //第一个参数和第二个参数的区间就是圆环的宽度
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 1,
color: pieColor // 设置无数据时的颜色为灰色
},
label: {
show: true,
formatter: function() {
// 当数据为空时返回"暂无数据"，否则返回默认的标签内容
return odata.length == 1 && odata[0].value == 0 ? '暂无数据' : '';
},
position: 'center',
textStyle: {
fontSize: 18,
color: '#999'
}
},
// empty: {
// // 当数据为空时显示的样式
// textStyle: {
// fontSize: 30,
// color: '#999'
// }
// },
// emphasis: {
// label: {
// show: true,
// fontSize: 40,
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: odata,
}
]
};
this.activitydom.setOption(option);
//随着屏幕大小调节图表
//myChart.resize();
window.addEventListener('resize', () => {
this.activitydom.resize();
});
},
//简单环形图
pieEcharts(dom, completionRate) {
const container = document.getElementById(dom); // 获取容器元素
this.chartdom = echarts.init(container); // 初始化echarts实例
let correctRate = completionRate
let errorRate = 100 - completionRate
var option = {
tooltip: {
show: false,
trigger: 'item',
formatter: "{a} : {c} ({d}%)"
},
title: {
text: correctRate + '%', //图形标题，配置在中间对应效果图的80%
left: "center",
top: "35%",
textStyle: {
color: "#02a7f0",
fontSize: 16,
align: "center"
}
},
series: [
{
type: 'pie',
radius: ['86%', '98%'], //设置内外环半径,两者差值越大，环越粗
hoverAnimation: false, //移入图形是否放大
label: { //对应效果图中的Angular显示与否以及设置样式
// show: true,
// position: 'center',
normal: {
show: true,
position: 'center',
padding: [0, 0, 20, 0], //设置字angular的边距
fontSize: 16,
}
},
labelLine: {
normal: { //label线不显示
show: false
}
},
data: [
{
value: correctRate, //对应显示的部分数据即80%
itemStyle: {
normal: {
color: '#02a7f0',
}
}
},
{
value: errorRate,
itemStyle: {
normal: {
color: '#edeef0'
}
}
}
]
}
]
};
this.chartdom.setOption(option);
//随着屏幕大小调节图表
//myChart.resize();
window.addEventListener('resize', () => {
this.chartdom.resize();
});
},
goTarget(href) {
window.open(href, "_blank");
},
}
};
</script>
<style scoped>
.title-common-left{ display: flex; align-items: center;}
.icon-20{ margin-right: 10px; display: block; width: 20px;}
.title-common-right {
display: flex;
align-items: center;
}
.width-big {
margin-top: 10px;
width: 100%;
}
.activity-class-rig {
flex: 1
}
.jc-sb {
justify-content: space-between;
}
.flex-box {
display: flex;
}
.student-mes .d1 {
margin-left: 6px;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.student-mes {
display: flex;
align-items: center;
}
.student-img {
display: block;
width: 36px;
height: 36px;
object-fit: cover;
border-radius: 50%;
}
.activity-teacher {
margin-top: 10px;
font-size: 12px;
}
.activity-class {
padding: 10px 15px;
box-sizing: border-box;
flex: 1;
border: 1px solid #ddd;
}
.activity-plan {
margin-right: 10px;
padding: 10px 15px;
box-sizing: border-box;
width: 450px;
border: 1px solid #ddd;
}
.activty-box {
margin-top: 10px;
display: flex;
}
.pie-box {
display: flex;
flex-direction: column;
align-items: center;
}
.pie-box .d2 {
margin-top: 6px;
font-size: 12px;
}
.tpc-rig-list .d1 {
font-size: 16px;
font-weight: bold;
}
.tpc-rig-list {
margin-bottom: 10px;
text-align: center;
}
.tpc-rig-list:last-child {
margin-bottom: 0;
}
.tpc-rig {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.teach-plan-cont {
padding-top: 5px;
justify-content: space-between;
}
.tpc-lef,
.tpc-rig {
min-height: 80px;
}
.tpc-lef {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.tpc-lef-list .d2 {
margin-left: 10px;
}
.tpc-lef-list {
align-items: center;
}
.teach-plan-cont,
.tpc-lef-list {
display: flex;
}
.teach-plan {
margin-right: 10px;
padding: 10px 15px;
box-sizing: border-box;
flex: 1;
border: 1px solid #ddd;
}
.teach-plan:last-child {
margin-right: 0;
}
.statistical-main {
margin-top: 10px;
display: flex;
}
.title-common {
display: flex;
justify-content: space-between;
align-items: center;
}
.wrap {
padding: 20px;
font-size: 14px;
}
.home {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.home img {
width: 82%;
}
</style>
主打一个原滋原味 有需要的自己翻
700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
