vue 记录一个echarts页面单色环形饼图多色环形饼图柱状图加折线图饼状图双柱状图雷达图多色堆叠柱状图

“设备使用”模块没有做因为项目不需要仅自己记录使用可供参考那么上代码
<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: null,//首页-下拉选择值planValue: null,//活动教案-下拉选择值classValue: null,//班级活动-下拉选择值recordValue: null,//观察记录-下拉选择值physicalValue: null,//体测情况-下拉选择值chartdom: null,activitydom: null,classActivityDom: null,//班级活动recordPieDom: null,//观察记录实心饼图recordBarDoubleDom: null,//观察记录双柱状图physicalRadarDom: null,//体测情况雷达图physicalBarMoreDom: null,//体测情况多色柱状图tableData: [],schoolId: null,};},created() {this.schoolId = this.$store.state.user.schoolIdif(this.schoolId){this.getInfo()}},mounted() {},methods: {//首页-下拉选择handleSelectInfoChange(value) {let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0getHomeBaseInfo(params).then(res => {if (res.code == 200) {let odata = res.datathis.teachPlanInfo = odata.teachPlanInfothis.classRecordInfo = odata.classRecordInfothis.observeRecordInfo = odata.observeRecordInfothis.phyInfo = odata.phyInfo//观察记录环形饼图数据          let completionRate = ((this.observeRecordInfo.observedStudentNumber / this.observeRecordInfo.studentNumber) * 100).toFixed(0)this.pieEcharts('completionRate', completionRate);//体测情况环形饼图数据let standardRate =  this.phyInfo.passRate || 0this.pieEcharts('standardRate', standardRate);}});},//活动教案-下拉选择handleSelectPlanChange(value) {let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0this.loading = truegetPlanBaseInfo(params).then(res => {if (res.code == 200) {this.tableData = res.data.teachPlansDetailsthis.loading = false}});},//班级活动-下拉选择handleSelectClassChange(value) {let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0getClassBaseInfo(params).then(res => {if (res.code == 200) {let oinfo = this.infooinfo.classRecordDetail.classTagList = res.data.classTagList//班级活动-环形饼图this.pieEcharts2('activityRate');//班级统计 柱状图+折线图          this.info.classRecordDetail.classRecordList = res.data.classRecordListthis.info.classRecordDetail.classStudentList = res.data.classStudentListthis.pieBarEcharts('classRecord')}});},//观察记录-下拉选择handleSelectRecordChange(value) {let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0getRecordBaseInfo(params).then(res => {if (res.code == 200) {//观察记录饼图this.info.observeRecordAreaInfo.series = res.data.seriesthis.pieSolidEcharts();//观察记录双柱状图this.info.observeRecordAreaInfo.classObservationVOList = res.data.classObservationVOListthis.barDoubleEcharts();}});},//体测情况-下拉选择handleSelectPhysicalChange(value) {let params = this.schoolId + '/' + value + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0getPhysicalBaseInfo(params).then(res => {if (res.code == 200) {//体测情况雷达图this.info.classPhyInfoDetail.data2003 = res.data.data2003this.info.classPhyInfoDetail.data2023 = res.data.data2023let avgArr = this.getAvgArr()this.physicalRadarEcharts(avgArr)//体测情况柱状堆叠图this.physicalBarMoreEcharts()}});},getInfo() {let params = this.schoolId + '/' + '0' + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0getHomeInfo(params).then(res => {if (res.code == 200) {let oinfo = res.datathis.info = oinfolet basicInfo = oinfo.basicInfothis.teachPlanInfo = basicInfo.teachPlanInfothis.classRecordInfo = basicInfo.classRecordInfothis.observeRecordInfo = basicInfo.observeRecordInfothis.phyInfo = basicInfo.phyInfo//观察记录环形饼图数据let completionRate = 0if (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 = 0if (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}//体测情况雷达图let avgArr = this.getAvgArr()this.physicalRadarEcharts(avgArr)//体测情况柱状堆叠图this.physicalBarMoreEcharts()}});},//选择年份handleRadioChange(value) {//console.log('当前选中的Radio label:', value);this.radio = valuelet itemAvg = nullif (value == 1) {//2003if (this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2003 && !this.isEmptyObject(this.info.classPhyInfoDetail.data2003)) {itemAvg = this.info.classPhyInfoDetail.data2003.itemAvg}} else {//2023if (this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2023 && !this.isEmptyObject(this.info.classPhyInfoDetail.data2023)) {itemAvg = this.info.classPhyInfoDetail.data2023.itemAvg}}let itemAvgArr = []itemAvgArr[0] = itemAvg.heightScore || 0itemAvgArr[1] = itemAvg.bodyScore || 0itemAvgArr[2] = itemAvg.balanceScore || 0itemAvgArr[3] = itemAvg.upStrengthScore || 0itemAvgArr[4] = itemAvg.downStrengthScore || 0itemAvgArr[5] = itemAvg.sensitivityScore || 0itemAvgArr[6] = itemAvg.flexibilityScore || 0itemAvgArr[7] = itemAvg.coordinationScore || 0// 获取雷达图this.physicalRadarEcharts(itemAvgArr)//体测情况柱状堆叠图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 = odata.classListodataAll[0] = odata.level01odataAll[1] = odata.level02odataAll[2] = odata.level03odataAll[3] = odata.level04var data = {area: 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 = nullif (this.radio == 1) {itemAvg = this.info.classPhyInfoDetail.data2003.itemAvg} else if (this.radio == 2) {itemAvg = this.info.classPhyInfoDetail.data2023.itemAvg}//console.log(itemAvg)let itemAvgArr = []itemAvgArr[0] = itemAvg.heightScore || 0itemAvgArr[1] = itemAvg.bodyScore || 0itemAvgArr[2] = itemAvg.balanceScore || 0itemAvgArr[3] = itemAvg.upStrengthScore || 0itemAvgArr[4] = itemAvg.downStrengthScore || 0itemAvgArr[5] = itemAvg.sensitivityScore || 0itemAvgArr[6] = itemAvg.flexibilityScore || 0itemAvgArr[7] = itemAvg.coordinationScore || 0return itemAvgArr},//雷达图physicalRadarEcharts(avgArr) {const container = document.getElementById('physicalRadar'); // 获取容器元素this.physicalRadarDom = echarts.init(container); // 初始化echarts实例      let omax = this.radio == 1 ? 5 : 100let 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',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},{name: '观察记录数',type: 'bar',barWidth: '25%', // 设置柱子宽度为相对于类目宽度的 50%barMaxWidth: '50',data: completedRecordNumberArr}]};this.recordBarDoubleDom.setOption(option);//随着屏幕大小调节图表//myChart.resize();window.addEventListener('resize', () => {this.recordBarDoubleDom.resize();});},//实心饼图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);//随着屏幕大小调节图表//myChart.resize();window.addEventListener('resize', () => {this.recordPieDom.resize();});},//柱状图+折线图 pieBarEcharts(dom) {const that = thisconst 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, 0, 0] // 左上、右上、右下、左下的圆角}},{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) + '..';elsereturn '\n' + newstr;},//多颜色环形图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 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},label: {show: false,position: 'center'},// 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 = completionRatelet errorRate = 100 - completionRatevar 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;
}.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>