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.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.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 + '/' + '0' + '/' + '0' //第一个参数schoolId 第二个参数month 第三个参数week week在pc端默认是0
      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
          }
          //体测情况雷达图
          let avgArr = this.getAvgArr()
          this.physicalRadarEcharts(avgArr)
          //体测情况柱状堆叠图
          this.physicalBarMoreEcharts()
        }
      });
    },

    //选择年份
    handleRadioChange(value) {
      //console.log('当前选中的Radio label:', value);
      this.radio = value
      let itemAvg = null
      if (value == 1) {
        //2003
        if (this.info && this.info.classPhyInfoDetail && this.info.classPhyInfoDetail.data2003 && !this.isEmptyObject(this.info.classPhyInfoDetail.data2003)) {
          itemAvg = this.info.classPhyInfoDetail.data2003.itemAvg
        }
      } else {
        //2023
        if (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 || 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
      // 获取雷达图
      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.classList
      odataAll[0] = odata.level01
      odataAll[1] = odata.level02
      odataAll[2] = odata.level03
      odataAll[3] = odata.level04
      var 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 = null
      if (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 || 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',
            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 = 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, 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) + '..';
      else
        return '\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 = 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;
}

.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>

主打一个原滋原味 有需要的自己翻