<template>
  <div class="app-container">
    <img src="@/icons/kind.jpg" alt="" style="width: 100%;height:1800px" />
    <div
      style="
        font-size: 40px;
        margin: 0 auto;
        font-weight: 600;
        text-align: center;
        height:300px;line-height:300px
      "
    >
      幼儿园综合体质分析报告书
    </div>
    <!-- //KindergartenPhysicalTest 体测达标分析-->
    <el-row v-show="KindergartenPhysicalTestshow">
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header" style="text-align: center; font-size: 26px">
            <span>体测达标分析</span>
          </div>
          <div style="margin-left: 50px; text-align: center; margin-top: 20px">
            <span>幼儿园名称:</span
            ><span style="margin-left: 20px; margin-right: 10px">{{
              KindergartenPhysicalTestlist.kindergartenName
            }}</span>

            <span style="margin-left: 50px">幼儿园性质:</span
            ><span style="margin-left: 20px; margin-right: 20px">{{
              KindergartenPhysicalTestlist.kindergartenType == type.dictValue
                ? type.dictLabel
                : type2.dictLabel
            }}</span>

            <span style="margin-left: 50px">参与体测人数:</span
            ><span style="margin-left: 20px">{{
              KindergartenPhysicalTestlist.testItemStudentCount
            }}</span
            >人

            <div style="display: flex; margin-top: 40px">
              <div
                slot="header"
                style="width: 50%; text-align: center; font-size: 18px"
              >
                <span class="title">本园参加体测各年龄阶段人数分部</span>
                <div
                  id="KindergartenPhysicalTest1"
                  style="
                    width: 500px;
                    height: 300px;
                    margin: 0 auto;
                    padding-top: 40px;
                  "
                ></div>
              </div>

              <div
                slot="header"
                style="
                  width: 50%;
                  text-align: center;
                  font-size: 18px;
                  position: relative;
                "
              >
                <span class="title">本园体测成绩达标率(%)</span>
                <span>
                  <span
                    style="
                      position: absolute;
                      top: 58%;
                      left: 47.5%;
                      font-size: 25px;
                    "
                    >{{ KindergartenPhysicalTestlist.standardRate }}%</span
                  >
                  <span
                    style="
                      position: absolute;
                      top: 67%;
                      left: 46.5%;
                      font-size: 16px;
                    "
                    >达标率</span
                  >
                </span>
                <div
                  id="KindergartenPhysicalTest2"
                  style="
                    width: 500px;
                    height: 300px;
                    margin: 0 auto;
                    padding-top: 20px;
                  "
                ></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- survey体测概况分析 -->
    <el-row v-show="surveyshow">
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header" style="text-align: center; font-size: 26px">
            <span>体测概况分析</span>
          </div>
          <div>
            <div style="display: flex; margin-top: 20px">
              <div style="width: 50%">
                <div slot="header" class="header">
                  <span>班级综合体测成绩排名</span>
                </div>
                <div v-if="yclassname1.length != 0" style="position: relative">
                  <div class="surveytitle">大班</div>
                  <div
                    id="survey1"
                    style="width: 500px; height: 350px; margin: 0 auto"
                  ></div>
                </div>
                <div v-if="yclassname2.length != 0" style="position: relative">
                  <div class="surveytitle">中班</div>
                  <div
                    id="survey2"
                    style="width: 500px; height: 350px; margin: 0 auto"
                  ></div>
                </div>
                <div v-if="yclassname3.length != 0" style="position: relative">
                  <div class="surveytitle">小班</div>
                  <div
                    id="survey3"
                    style="width: 500px; height: 350px; margin: 0 auto"
                  ></div>
                </div>
              </div>
              <div style="width: 50%">
                <div slot="header" class="header" style="margin-bottom: 20px">
                  <span>全园优秀幼儿榜(TOP10)</span>
                </div>
                <el-table
                  ref="studentlist"
                  :data="studentlist"
                  highlight-current-row
                  style="margin: 0 auto; width: 530px"
                >
                  <el-table-column
                    type="index"
                    width="130"
                    label="排名"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    property="studentName"
                    label="姓名"
                    width="130"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    property="className"
                    label="班级"
                    width="130"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    property="itemFraction"
                    label="分数"
                    width="140"
                    align="center"
                  >
                  </el-table-column>
                </el-table>

                <div
                  slot="header"
                  class="header"
                  style="margin-bottom: 20px; margin-top: 20px"
                >
                  <span>班级优秀幼儿榜</span>
                </div>
                <el-table
                  ref="selectAllClassBylist"
                  :data="selectAllClassBylist"
                  highlight-current-row
                  style="margin: 0 auto; width: 530px"
                >
                  <el-table-column
                    type="index"
                    width="130"
                    label="排名"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    property="studentName"
                    label="姓名"
                    width="130"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    property="className"
                    label="班级"
                    width="130"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    property="itemFraction"
                    label="分数"
                    width="140"
                    align="center"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--heightAndWeight 平均身高体重 -->
    <el-row v-show="heightAndWeightshow">
      <el-col :span="24" class="card-box" style="">
        <el-card >
          <div slot="header" style="text-align: center; font-size: 26px">
            <span>平均身高体重</span>
          </div>
          <div style="display: flex; margin-top: 40px">
            <div
              slot="header"
              style="width: 50%; text-align: center; font-size: 18px"
            >
              <span>各年级男/女平均身高(cm)</span>
              <div
                id="heightAndWeight1"
                style="
                  width: 500px;
                  height: 300px;
                  margin: 0 auto;
                  padding-top: 40px;
                "
              ></div>
            </div>
            <div
              slot="header"
              style="width: 50%; text-align: center; font-size: 18px"
            >
              <span>各年级男/女平均体重(kg)</span>
              <div
                id="heightAndWeight2"
                style="
                  width: 500px;
                  height: 300px;
                  margin: 0 auto;
                  padding-top: 40px;
                "
              ></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- physique综合体制分析 -->
    <el-row>
      <el-col :span="24" :offset="0" class="card-box" style="font-size: 15px">
        <div slot="header" style="text-align: center; font-size: 26px">
          <span>综合体质分析</span>
        </div>
        <el-card v-show="MALE">
          <div class="test" style="height: 90px">
            <div style="text-align: center; line-height: 40px; font-size: 20px">
              <span>本园幼儿综合体质评估综合得分(男)</span>
            </div>
            <div
              class="el-table--enable-row-hover el-table--medium"
              style="
                margin: 0 auto;
                line-height: 40px;
                text-align: center;
                border-bottom: 1px solid #8fd6d9;
              "
            >
              <div style="display: inline-block">
                <span
                  style="
                    position: relative;
                    display: inline-block;
                    width: 200px;
                    text-align: center;
                  "
                  v-for="(item, index) in firstCategoryScoreListMALE"
                  :key="index"
                >
                  <span :style="index == 0 ? '' : 'margin-right:40px'">{{
                    index == 0 ? null : "+"
                  }}</span>
                  <span>
                    {{ item.categoryName }} ({{ item.avgCategoryFraction }})
                  </span>
                </span>
              </div>
              <div style="display: inline-block; position: relative">
                <span style="margin: 0 20px">= </span>
                <span style="display: inline-block; width: 120px"
                  >综合得分({{ totalAvgFraction }})</span
                >

                <span
                  style="
                    display: inline-block;
                    position: absolute;
                    top: 20px;
                    width: 100px;
                    left: 40px;
                    margin: 0 20px;
                  "
                ></span>
              </div>
            </div>
          </div>
          <div style="text-align: center; margin-top: 20px">
            <span>幼儿园综合体质分析图</span>
          </div>
          <div class="">
            <div
              ref="MALEchart"
              id="MALEchart"
              style="width: 1000px; height: 600px; margin: 0 auto"
            ></div>
          </div>
          <div
            style="margin: 0 auto; width: 100%; line-height: 60px"
            v-show="MALE"
          >
            <div style="font-size: 12px; width: 100%; height: 400px">
              <div
                style="
                  display: flex;
                  text-align: center;
                  justify-content: center;
                  color: black;
                "
              >
                <div style="border: 1px solid #f0f0f0; background: #f5f7fa">
                  <div style="width: 80px; line-height: 60px">年龄</div>
                </div>
                <div style="border: 1px solid #f0f0f0; background: #f5f7fa">
                  <div style="width: 80px; line-height: 60px">平均总分</div>
                </div>

                <div
                  v-for="item in categoryTableNameListMALE"
                  :key="item.prentId"
                >
                  <div
                    style="
                      text-align: center;
                      line-height: 30px;
                      border: 1px solid #f0f0f0;
                      background: #f5f7fa;
                    "
                  >
                    {{ item.parentName }}
                  </div>
                  <div
                    style="
                      display: flex;
                      line-height: 30px;
                      border: 1px solid #f0f0f0;
                      background: #f5f7fa;
                    "
                  >
                    <div
                      v-for="uitem in item.childrenTableNameList"
                      :key="uitem.categoryId"
                      style="
                        width: 90px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                    >
                      {{ uitem.categoryName }}
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div
                  style="
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    font-size: 14px;
                  "
                  v-for="item in categoryAgeFractionListMALE"
                  :key="item.prentId"
                >
                  <div style="border: 0.5px solid #f0f0f0">
                    <div style="width: 80px; line-height: 50px">
                      {{ item.studentAge }}
                    </div>
                  </div>
                  <div style="border: 0.5px solid #f0f0f0">
                    <div style="width: 80px; line-height: 50px">
                      {{ item.totalAvgFraction }}
                    </div>
                  </div>
                  <div>
                    <div style="display: flex; line-height: 50px">
                      <div
                        v-for="uitem in item.list"
                        :key="uitem.categoryId"
                        style="width: 90px; border: 0.5px solid #f0f0f0"
                      >
                        {{ uitem }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div></div>
            </div>
          </div>
        </el-card>
        <el-card  v-show="FEMALE">
          <!-- //FAMALE -->
          <div class="test" style="height: 90px">
            <div
              style="
                text-align: center;
                line-height: 40px;
                margin-top: 50px;
                font-size: 20px;
              "
            >
              <span>本园幼儿综合体质评估综合得分(女)</span>
            </div>
            <div
              class="el-table--enable-row-hover el-table--medium"
              style="
                margin: 0 auto;
                line-height: 40px;
                text-align: center;
                border-bottom: 1px solid #8fd6d9;
              "
            >
              <div style="display: inline-block">
                <span
                  style="
                    position: relative;
                    display: inline-block;
                    width: 200px;
                    text-align: center;
                  "
                  v-for="(item, index) in firstCategoryScoreListFEMALE"
                  :key="index"
                >
                  <span :style="index == 0 ? '' : 'margin-right:40px'">{{
                    index == 0 ? null : "+"
                  }}</span>
                  <span>
                    {{ item.categoryName }} ({{ item.avgCategoryFraction }})
                  </span>
                </span>
              </div>
              <div style="display: inline-block; position: relative">
                <span style="margin: 0 20px">= </span>
                <span style="display: inline-block; width: 120px"
                  >综合得分({{ totalAvgFraction }})</span
                >

                <span
                  style="
                    display: inline-block;
                    position: absolute;
                    top: 20px;
                    width: 100px;
                    left: 40px;
                    margin: 0 20px;
                  "
                ></span>
              </div>
            </div>
          </div>
          <div style="text-align: center; margin-top: 20px">
            <span>幼儿园综合体质分析图</span>
          </div>
          <div class="">
            <div
              ref="FEMALEchart"
              id="FEMALEchart"
              style="width: 1000px; height: 600px; margin: 0 auto"
            ></div>
          </div>
          <div style="width: 100%; margin: 0 auto; line-height: 60px">
            <div
              style="
                font-size: 12px;
                width: 100%;
                overflow: auto;
                height: 400px;
              "
            >
              <div
                style="
                  display: flex;
                  text-align: center;
                  justify-content: center;
                  color: black;
                "
              >
                <div style="border: 1px solid #f0f0f0; background: #f5f7fa">
                  <div style="width: 80px; line-height: 60px">年龄</div>
                </div>

                <div style="border: 1px solid #f0f0f0; background: #f5f7fa">
                  <div style="width: 80px; line-height: 60px">平均总分</div>
                </div>
                <div
                  v-for="item in categoryTableNameListFEMALE"
                  :key="item.prentId"
                >
                  <div
                    style="
                      text-align: center;
                      line-height: 30px;
                      border: 1px solid #f0f0f0;
                      background: #f5f7fa;
                      color: black;
                    "
                  >
                    {{ item.parentName }}
                  </div>
                  <div
                    style="
                      display: flex;
                      line-height: 30px;
                      border: 1px solid #f0f0f0;
                      background: #f5f7fa;
                      color: black;
                    "
                  >
                    <div
                      v-for="uitem in item.childrenTableNameList"
                      :key="uitem.categoryId"
                      style="
                        width: 90px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                    >
                      {{ uitem.categoryName }}
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div
                  style="
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    font-size: 14px;
                  "
                  v-for="item in categoryAgeFractionListFEMALE"
                  :key="item.prentId"
                >
                  <div style="line-height: 50px; border: 0.5px solid #f0f0f0">
                    <div style="width: 80px">
                      {{ item.studentAge }}
                    </div>
                  </div>
                  <div style="line-height: 50px; border: 0.5px solid #f0f0f0">
                    <div style="width: 80px">
                      {{ item.totalAvgFraction }}
                    </div>
                  </div>
                  <div>
                    <div style="display: flex; line-height: 50px">
                      <div
                        v-for="uitem in item.list"
                        :key="uitem.categoryId"
                        style="
                          width: 90px;
                          border: 0.5px solid #f0f0f0;
                          height: 54px;
                        "
                      >
                        {{ uitem }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- development 动作发展分析 -->
    <el-row>
      <el-col :span="24" :offset="0" class="card-box" style="font-size: 15px">
        <el-card>
          <div slot="header" style="text-align: center; font-size: 26px">
            <span>动作发展分析</span>
          </div>
          <div
            v-for="(item, index) in developmentList"
            :key="index"
            v-show="developmentshow"
          >
            <el-table :data="item.physicalActionList" style="margin: 20px auto">
              <el-table-column :label="item.classTypeName" align="center">
                <el-table-column prop="itemName" label="项目" align="center">
                </el-table-column>
                <el-table-column label="男孩" align="center">
                  <el-table-column
                    prop="maleAvgScore"
                    label="平均值"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="maleCityAvgScore"
                    label="全市平均值"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="malePassCount"
                    label="合格人数"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="malePassRate"
                    label="合格率"
                    align="center"
                  >
                    <template slot-scope="scope"
                      >{{ scope.row.malePassRate }}%</template
                    >
                  </el-table-column>
                </el-table-column>
                <el-table-column label="女孩" align="center">
                  <el-table-column
                    prop="feMaleAvgScore"
                    label="平均值"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="feMaleCityAvgScore"
                    label="全市平均值"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="feMalePassCount"
                    label="合格人数"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="feMalePassRate"
                    label="合格率"
                    align="center"
                  >
                    <template slot-scope="scope"
                      >{{ scope.row.feMalePassRate }}%</template
                    >
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--  -->
    <el-row>
      <el-col class="card-box" :span="24" :offset="0">
        <el-card>
          <div
            slot="header"
            style="text-align: center; font-size: 26px; margin-bottom: 20px"
          >
            <span>班级体质分析</span>
          </div>
          <div
            v-for="(ilist, index) in classconstitutionlist"
            :key="index"
          >
            <div
              slot="header"
              style="text-align: center; font-size: 22px; margin-bottom: 20px"
            >
              <span
                >班级体质分析({{ ilist.categoryScoreList[0].className }})</span
              >
            </div>
            <div style="margin: 0 auto; width: 1180px; line-height: 60px">
              <div style="font-size: 12px; width: 100%; overflow: auto">
                <div
                  style="
                    display: flex;
                    text-align: center;
                    justify-content: center;
                    color: black;
                    font-weight: 550;
                    height: 92px;
                  "
                >
                  <div
                    style="background: #f5f7fa; height: 92px; line-height: 92px"
                  >
                    <div
                      style="
                        width: 70px;
                        border: 1px solid #f0f0f0;
                        background: #f5f7fa;
                      "
                    >
                      班级
                    </div>
                  </div>
                  <div
                    style="background: #f5f7fa; height: 92px; line-height: 92px"
                  >
                    <div
                      style="
                        width: 70px;
                        border: 1px solid #f0f0f0;
                        background: #f5f7fa;
                      "
                    >
                      平均总分
                    </div>
                  </div>

                  <div
                    v-for="item in ilist.categoryTableNameList"
                    :key="item.prentId"
                  >
                    <div
                      style="
                        text-align: center;
                        border: 1px solid #f0f0f0;
                        background: #f5f7fa;
                        height: 30px;
                        line-height: 30px;
                      "
                    >
                      {{ item.parentName }}
                    </div>
                    <div
                      style="
                        display: flex;
                        border: 1px solid #f0f0f0;
                        background: #f5f7fa;
                        font-size: 10px;
                        width: 100%;
                      "
                    >
                      <div
                        v-for="uitem in item.childrenTableNameList"
                        :key="uitem.categoryId"
                        style="
                          width: 90px;
                          height: 60px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                      >
                        {{ uitem.categoryName }}
                      </div>
                    </div>
                  </div>
                </div>
                <div style="font-size: 12px; width: 100%">
                  <div
                    style="
                      text-align: center;
                      display: flex;
                      justify-content: center;
                      line-height: 30px;
                      width: 100%;
                    "
                    v-for="item in ilist.categoryScoreList"
                    :key="item.prentId"
                  >
                    <div style="border: 1px solid #f0f0f0">
                      <div style="width: 70px">
                        {{ item.className }}
                      </div>
                    </div>
                    <div style="border: 1px solid #f0f0f0">
                      <div style="width: 70px">
                        {{ item.totalAvScore }}
                      </div>
                    </div>

                    <div style="">
                      <div style="display: flex; height: 62px">
                        <div
                          v-for="uitem in item.list"
                          :key="uitem.categoryId"
                          style="width: 90px; border: 0.5px solid #f0f0f0"
                        >
                          {{ uitem }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="">
                <div
                  class="chart"
                  ref="chart"
                  id="chart"
                  style="width: 800px; height: 350px; margin: 50px auto"
                ></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { listClassinfo } from "@/api/system/classinfo";
import { tKindergartenInfo } from "@/api/system/kindergartenInfo";
import { KindergartenPhysicalTestanalysis } from "@/api/system/KindergartenPhysicalTest";
import { StudentList } from "@/api/system/survey";
import { heightAndWeightanalysis } from "@/api/system/heightAndWeight";
import { physiqueanalysis } from "@/api/system/physique";
import { developmentanalysis } from "@/api/system/development";
import { ClassList } from "@/api/system/classconstitution";
export default {
  name: "KindergartenEcharts",
  props: ["itemlists"],
  data() {
    return {
      echartslist: {
        pageNum: 1,
        pageSize: 999,
        kindergartenId: "",
        batchCode: "",
      },
      //KindergartenPhysicalTest体测达标分析
      KindergartenPhysicalTestshow: true,
      kindergartenType: "kindergarten_type",
      type: {},
      type2: {},
      KindergartenPhysicalTestlist: {},
      //survey体测概况分析
      surveyshow: true,
      studentlist: [],
      selectAllClassBylist: [],
      LARGECLASS: "LARGE_CLASS",
      MIDDLECLASS: "MIDDLE_CLASS",
      SMALLCLASS: "SMALL_CLASS",
      yclassname1: [],
      yclassname2: [],
      yclassname3: [],
      classscore1: [],
      classscore2: [],
      classscore3: [],
      //heightAndWeight平均身高体重
      heightAndWeightlist: [],
      heightAndWeightshow: true,
      //physique 综合体质分析
      FEMALE: false,
      MALE: false,
      categoryTableNameListMALE: [],
      categoryAgeFractionListMALE: [],
      categoryScoreListMALE: [],
      firstCategoryScoreListMALE: [],
      totalAvgFraction: "",
      totalAvgFractionFEMALE: "",
      categoryTableNameListFEMALE: [],
      categoryAgeFractionListFEMALE: [],
      categoryScoreListFEMALE: [],
      firstCategoryScoreListFEMALE: [],
      //    <!-- development 动作发展分析 -->
      //班级类型
      ClassType: "class_type",
      classtypelist: [],
      developmentList: [],
      developmentshow: false,
      //<!-- classconstitution 班级体质分析 -->
      classList: [],
      classconstitutionlist: [],
      categoryTableNameList: [],
      categoryAgeFractionList: [],
      categoryScoreList: [],
      totalAvgFraction: "",
      listname: [],
    };
  },
  mounted() {
    this.classinfo();
    this.getList();
    this.classtype();
    this.KindergartenPhysicalTestinfo();
    this.StudentListinfo();
    this.heightAndWeightinfo();
    this.physiqueinfoFEMALE();
    this.physiqueinfoMALE();
    console.log(this.KindergartenPhysicalTestlist);
  },
  //   watch: {
  //     itemlists: {
  //       handler(newName, oldName) {
  //         console.log(newName,oldName)
  //         this.echartslist = {
  //           kindergartenId: newName.kindergartenId,
  //           batchCode: newName.batchCode,
  //           pageNum: 1,
  //           pageSize: 999,
  //           studentSex: null,
  //         };
  //         console.log(this.echartslist);
  //         this.developmentList = [];
  //         this.getList();
  //         this.classtype();
  //         this.classinfo();
  //         this.KindergartenPhysicalTestinfo();
  //         this.StudentListinfo();
  //         this.heightAndWeightinfo();
  //         this.physiqueinfoMALE();
  //         this.physiqueinfoFEMALE();
  //       },
  //       deep: true,
  //     },
  //   },

  created() {
    this.echartslist = {
      kindergartenId: this.itemlists.kindergartenId,
      batchCode: this.itemlists.batchCode,
      pageNum: 1,
      pageSize: 999,
      classId: null,
    };
    console.log(this.echartslist);
    this.developmentList = [];
  },
  methods: {
    // <!-- classconstitution 班级体质分析 -->
    ClassListinfo() {
      this.classconstitutionlist = [];
      for (let i = 0; i < this.classList.length; i++) {
        this.echartslist.classId = this.classList[i].id;
        ClassList(this.echartslist).then((res) => {
          if (res.code == 500) {
          } else if (!res.data) {
          } else {
            this.classconstitutionlist.push(res.data);
          }
        });
      }
      this.info();
    },
    info() {
      setTimeout(() => {
        console.log(this.classconstitutionlist);
        var myEhart = document.getElementsByClassName("chart");
        for (let k = 0; k < this.classconstitutionlist.length; k++) {
          var yseries = [];
          var name = "";
          var names = [];
          var ydata = [];
          this.categoryTableNameList = [];
          this.categoryAgeFractionList = [];
          this.categoryScoreList = [];
          this.totalAvgFraction = [];
          this.listname = [];
          var myChart = echarts.init(myEhart[k]);
          this.totalAvgFraction =
            this.classconstitutionlist[k].totalAvgFraction;
          this.categoryAgeFractionList =
            this.classconstitutionlist[k].categoryAgeFractionList;
          var list = [];
          this.categoryTableNameList =
            this.classconstitutionlist[k].categoryTableNameList;
          this.categoryTableNameList.forEach((e) => {
            e.childrenTableNameList.forEach((el) => {
              list.push(el.categoryId);
            });
          });
          this.categoryScoreList =
            this.classconstitutionlist[k].categoryScoreList;
          let yname = [];
          this.categoryScoreList.forEach((el) => {
            yname.push(el.className);
            var listname = list.map((e) => {
              var num = 0;
              var number = el.categoryScoreList.findIndex(
                (o) => o.categoryId == e
              );
              if (number != -1) {
                num = el.categoryScoreList[number].categoryName;
              }
              return num;
            });
            this.listname = listname;
            var list1 = list.map((e) => {
              var num = 0;
              var number = el.categoryScoreList.findIndex(
                (o) => o.categoryId == e
              );
              if (number != -1) {
                num = el.categoryScoreList[number].avgScore;
              }
              if (num == null) {
                num = 0;
                return num;
              }
              return num;
            });
            el.list = list1;
          });
          for (let i = 0; i < this.listname.length; i++) {
            name = this.categoryScoreList[0].categoryScoreList[i].categoryName;
            ydata = [
              this.categoryScoreList[0].list[i],
              this.categoryScoreList[1].list[i],
              this.categoryScoreList[2].list[i],
            ];
            var obj = {
              name: name,
              type: "bar",
              label: labelOption,
              emphasis: {
                focus: "series",
              },
              data: ydata,
            };
            yseries.push(obj);
            names.push(name);
          }
          this.listname = [];
          var option;
          const posList = [
            "left",
            "right",
            "top",
            "bottom",
            "inside",
            "insideTop",
            "insideLeft",
            "insideRight",
            "insideBottom",
            "insideTopLeft",
            "insideTopRight",
            "insideBottomLeft",
            "insideBottomRight",
          ];
          app.configParameters = {
            rotate: {
              min: 0,
              max: 90,
            },
            align: {
              options: {
                left: "left",
                center: "center",
                right: "right",
              },
            },
            verticalAlign: {
              options: {
                top: "top",
                middle: "middle",
                bottom: "bottom",
              },
            },
            position: {
              options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
              }, {}),
            },
            distance: {
              min: 0,
              max: 100,
            },
          };
          app.config = {
            rotate: 0,
            align: "center",
            verticalAlign: "middle",
            position: "top",
            distance: 15,
            onChange: function () {
              const labelOption = {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance,
              };
              myChart.setOption({
                series: [
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                ],
              });
            },
          };
          const labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: "{c}",
            fontSize: 16,
            rich: {
              name: {},
            },
          };
          option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "",
              },
            },
            legend: {
              data: names,
            },
            xAxis: [
              {
                type: "category",
                axisTick: { show: false },
                data: yname,
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: yseries,
          };
          myChart.setOption(option, true);
        }
      }, 600);
    },
    //  <!-- development 动作发展分析 -->
    developmentinfo() {
      setTimeout(() => {
        this.developmentList = [];
        for (let i = 0; i < this.classtypelist.length; i++) {
          this.echartslist.classType = this.classtypelist[i].type;
          developmentanalysis(this.echartslist).then((res) => {
            if (res.data) {
              this.developmentList.push(res.data);
            } else {
            }
          });
        }
        this.developmentshow = true;
      }, 500);
    },
    //physique 综合体质分析
    physiqueinfoFEMALE() {
      setTimeout(() => {
        this.echartslist.studentSex = "FEMALE";
        physiqueanalysis(this.echartslist).then((res) => {
          if (res.data == [] || !res.data) {
            this.FEMALE = false;
          } else {
            this.totalAvgFractionFEMALE = res.data.totalAvgFraction;
            this.categoryTableNameListFEMALE = res.data.categoryTableNameList;
            this.categoryAgeFractionListFEMALE =
              res.data.categoryAgeFractionList;
            this.categoryScoreListFEMALE = res.data.categoryScoreList;
            this.firstCategoryScoreListFEMALE = res.data.firstCategoryScoreList;
            if (res.data == [] || !res.data) {
            } else {
              var list = [];
              this.categoryTableNameListFEMALE.forEach((e) => {
                e.childrenTableNameList.forEach((el) => {
                  list.push(el.categoryId);
                });
              });
              this.categoryAgeFractionListFEMALE.forEach((el) => {
                var list1 = list.map((e) => {
                  var num = 0;
                  var number = el.categoryAvgFractionList.findIndex(
                    (o) => o.categoryId == e
                  );
                  if (number != -1) {
                    num =
                      el.categoryAvgFractionList[number].avgCategoryFraction;
                  }
                  return num;
                });
                el.list = list1;
              });
              let seriesData = [];
              let yindicator = [];
              this.categoryScoreListFEMALE.forEach((el) => {
                seriesData.push(el.itemFraction);
                if (el.avgCategoryName == null) {
                  el.avgCategoryName = "暂无";
                }
                if (this.categoryScoreListFEMALE.length == 1) {
                  yindicator.push({
                    name:
                      el.categoryName +
                      " " +
                      "(" +
                      el.avgCategoryName +
                      "" +
                      ")",
                    max: el.maxFraction,
                  });
                  yindicator.push({
                    name: "暂无数据",
                    max: 100,
                  });
                  yindicator.push({
                    name: "暂无数据",
                    max: 100,
                  });
                } else if (this.categoryScoreListFEMALE.length == 2) {
                  yindicator.push({
                    name:
                      el.categoryName +
                      " " +
                      "(" +
                      el.avgCategoryName +
                      "" +
                      ")",
                    max: el.maxFraction,
                  });
                  yindicator.push({
                    name: "暂无数据",
                    max: 100,
                  });
                } else {
                  yindicator.push({
                    name:
                      el.categoryName +
                      " " +
                      "(" +
                      el.avgCategoryName +
                      "" +
                      ")",
                    max: el.maxFraction,
                  });
                }
              });
              var myChart = echarts.init(
                document.getElementById("FEMALEchart")
              );
              let option = {
                //配置维度的最大值
                color: "#D9A508",
                radar: {
                  name: {
                    show: true,
                    color: "black",
                  },
                  center: ["50%", "50%"],
                  //   雷达图的指示器，用来指定雷达图中的多个变量（维度）
                  indicator: yindicator,
                  shape: "polygon", //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
                },
                series: [
                  {
                    type: "radar",
                    label: {
                      show: true,
                      color: "#D9A508", //显示数值
                    },
                    areaStyle: {}, //每个雷达图形成一个阴影的面积
                    data: [
                      {
                        name: "成绩区域",
                        value: seriesData,
                      },
                    ],
                    areaStyle: {
                      color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                        {
                          color: "rgba(255,192,0, 0.8)",
                          offset: 0,
                        },
                        {
                          color: "rgba(255,192,0, 0.9)",
                          offset: 1,
                        },
                      ]),
                    },
                  },
                ],
              };
              // 绘制图表
              myChart.setOption(option);
              this.FEMALE = true;
            }
          }
        });
      }, 400);
    },
    physiqueinfoMALE() {
      setTimeout(() => {
        this.echartslist.studentSex = "MALE";
        physiqueanalysis(this.echartslist).then((res) => {
          if (res.data == [] || !res.data) {
            this.MALE = false;
          } else {
            this.totalAvgFraction = res.data.totalAvgFraction;
            this.categoryTableNameListMALE = res.data.categoryTableNameList;
            this.categoryAgeFractionListMALE = res.data.categoryAgeFractionList;
            this.categoryScoreListMALE = res.data.categoryScoreList;
            this.firstCategoryScoreListMALE = res.data.firstCategoryScoreList;
            if (res.data == [] || !res.data) {
            } else {
              var list = [];
              this.categoryTableNameListMALE.forEach((e) => {
                e.childrenTableNameList.forEach((el) => {
                  list.push(el.categoryId);
                });
              });
              this.categoryAgeFractionListMALE.forEach((el) => {
                var list1 = list.map((e) => {
                  var num = 0;
                  var number = el.categoryAvgFractionList.findIndex(
                    (o) => o.categoryId == e
                  );
                  if (number != -1) {
                    num =
                      el.categoryAvgFractionList[number].avgCategoryFraction;
                  }
                  return num;
                });
                el.list = list1;
              });
              let seriesData = [];
              let yindicator = [];
              this.categoryScoreListMALE.forEach((el) => {
                seriesData.push(el.itemFraction);
                if (el.avgCategoryName == null) {
                  el.avgCategoryName = "暂无";
                }
                if (this.categoryScoreListMALE.length == 1) {
                  yindicator.push({
                    name:
                      el.categoryName +
                      " " +
                      "(" +
                      el.avgCategoryName +
                      "" +
                      ")",
                    max: el.maxFraction,
                  });
                  yindicator.push({
                    name: "暂无数据",
                    max: 100,
                  });
                  yindicator.push({
                    name: "暂无数据",
                    max: 100,
                  });
                } else if (this.categoryScoreListMALE.length == 2) {
                  yindicator.push({
                    name:
                      el.categoryName +
                      " " +
                      "(" +
                      el.avgCategoryName +
                      "" +
                      ")",
                    max: el.maxFraction,
                  });
                  yindicator.push({
                    name: "暂无数据",
                    max: 100,
                  });
                } else {
                  yindicator.push({
                    name:
                      el.categoryName +
                      " " +
                      "(" +
                      el.avgCategoryName +
                      "" +
                      ")",
                    max: el.maxFraction,
                  });
                }
              });
              var myChart = echarts.init(document.getElementById("MALEchart"));
              let option = {
                //配置维度的最大值
                color: "#D9A508",
                radar: {
                  name: {
                    show: true,
                    color: "black",
                  },
                  center: ["50%", "50%"],
                  //   雷达图的指示器，用来指定雷达图中的多个变量（维度）
                  indicator: yindicator,
                  shape: "polygon", //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
                },
                series: [
                  {
                    type: "radar",
                    label: {
                      show: true,
                      color: "#D9A508", //显示数值
                    },
                    areaStyle: {}, //每个雷达图形成一个阴影的面积
                    data: [
                      {
                        name: "成绩区域",
                        value: seriesData,
                      },
                    ],
                    areaStyle: {
                      color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                        {
                          color: "rgba(255,192,0, 0.8)",
                          offset: 0,
                        },
                        {
                          color: "rgba(255,192,0, 0.9)",
                          offset: 1,
                        },
                      ]),
                    },
                  },
                ],
              };
              // 绘制图表
              myChart.setOption(option);
              this.MALE = true;
            }
          }
        });
      }, 350);
    },
    //平均身高体重
    heightAndWeightinfo() {
      setTimeout(() => {
        heightAndWeightanalysis(this.echartslist).then((res) => {
          if (!res.data) {
            this.heightAndWeightshow = false;
          } else {
            this.heightAndWeightlist = res.data;
            var yclassname = [];
            var grilsheight = [];
            var boyheight = [];
            var boyweight = [];
            var grilsweight = [];

            for (let i = 0; i < this.heightAndWeightlist.length; i++) {
              this.heightAndWeightlist[i].weightAndHeightAvgScoreList.forEach(
                (el) => {
                  if (el.itemCode == "H001" && el.studentSex == "MALE") {
                    boyheight.push(el.averageScore);
                  } else if (
                    el.itemCode == "H001" &&
                    el.studentSex == "FEMALE"
                  ) {
                    grilsheight.push(el.averageScore);
                  } else if (
                    el.itemCode == "W001" &&
                    el.studentSex == "FEMALE"
                  ) {
                    grilsweight.push(el.averageScore);
                  } else if (el.itemCode == "W001" && el.studentSex == "MALE") {
                    boyweight.push(el.averageScore);
                  }
                }
              );
              if (grilsheight.length == i) {
                grilsheight.push(0);
              }
              if (boyheight.length == i) {
                boyheight.push(0);
              }
              if (boyweight.length == i) {
                boyweight.push(0);
              }
              if (grilsweight.length == i) {
                grilsweight.push(0);
              }
            }

            this.heightAndWeightlist.forEach((e) => {
              yclassname.push(e.className);
            });
            var app = {};

            var myChart = echarts.init(
              document.getElementById("heightAndWeight1")
            );
            var myChart2 = echarts.init(
              document.getElementById("heightAndWeight2")
            );
            var option;
            var option2;
            const posList = [
              "left",
              "right",
              "top",
              "bottom",
              "inside",
              "insideTop",
              "insideLeft",
              "insideRight",
              "insideBottom",
              "insideTopLeft",
              "insideTopRight",
              "insideBottomLeft",
              "insideBottomRight",
            ];
            app.configParameters = {
              rotate: {
                min: 0,
                max: 90,
              },
              align: {
                options: {
                  left: "left",
                  center: "center",
                  right: "right",
                },
              },
              verticalAlign: {
                options: {
                  top: "top",
                  middle: "middle",
                  bottom: "bottom",
                },
              },
              position: {
                options: posList.reduce(function (map, pos) {
                  map[pos] = pos;
                  return map;
                }, {}),
              },
              distance: {
                min: 0,
                max: 100,
              },
            };
            app.config = {
              rotate: 0,
              align: "center",
              verticalAlign: "middle",
              position: "top",
              distance: 15,
              onChange: function () {
                const labelOption = {
                  rotate: app.config.rotate,
                  align: app.config.align,
                  verticalAlign: app.config.verticalAlign,
                  position: app.config.position,
                  distance: app.config.distance,
                };
                myChart.setOption({
                  series: [
                    {
                      label: labelOption,
                    },
                    {
                      label: labelOption,
                    },
                    {
                      label: labelOption,
                    },
                    {
                      label: labelOption,
                    },
                  ],
                });
              },
            };
            const labelOption = {
              show: true,
              position: app.config.position,
              distance: app.config.distance,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              rotate: app.config.rotate,
              formatter: "{c}",
              fontSize: 16,
              rich: {
                name: {},
              },
            };
            option = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              legend: {
                data: ["男", "女"],
              },
              xAxis: [
                {
                  type: "category",
                  axisTick: { show: false },
                  data: yclassname,
                },
              ],
              yAxis: [
                {
                  type: "value",
                },
              ],
              series: [
                {
                  name: "男",
                  type: "bar",
                  barWidth: 35,
                  barGap: 0,
                  color: "#00B050",
                  label: labelOption,
                  emphasis: {
                    focus: "series",
                  },
                  data: boyheight,
                },
                {
                  name: "女",
                  type: "bar",
                  barWidth: 35,
                  color: "red",
                  label: labelOption,
                  emphasis: {
                    focus: "series",
                  },
                  data: grilsheight,
                },
              ],
            };
            option2 = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              legend: {
                data: ["男", "女"],
              },
              xAxis: [
                {
                  type: "category",
                  axisTick: { show: false },
                  data: yclassname,
                },
              ],
              yAxis: [
                {
                  type: "value",
                },
              ],
              series: [
                {
                  name: "男",
                  barWidth: 35,
                  type: "bar",
                  barGap: 0,
                  color: "#00B050",
                  label: labelOption,
                  emphasis: {
                    focus: "series",
                  },
                  data: boyweight,
                },
                {
                  barWidth: 35,
                  name: "女",
                  type: "bar",
                  color: "red",
                  label: labelOption,
                  emphasis: {
                    focus: "series",
                  },
                  data: grilsweight,
                },
              ],
            };
            option && myChart.setOption(option);
            option2 && myChart2.setOption(option2);
            this.heightAndWeightshow = true;
          }
        });
      }, 300);
    },
    //survey体测概况分析
    StudentListinfo() {
      setTimeout(() => {
        StudentList(this.echartslist).then((res) => {
          if (res.data.testAllStudentScoreVOList != null) {
            this.studentlist = res.data.testAllStudentScoreVOList;
          }
          if (res.data.allStudentScoreVOList != null) {
            this.yclassname1 = [];
            this.yclassname2 = [];
            this.yclassname3 = [];
            this.classscore1 = [];
            this.classscore2 = [];
            this.classscore3 = [];
            res.data.allStudentScoreVOList.forEach((e) => {
              if (e.classType == this.LARGECLASS) {
                this.yclassname1.push(e.className);
                if (
                  e.itemScoreAll == "" ||
                  !e.itemScoreAll ||
                  e.itemScoreAll == null
                ) {
                  this.classscore1.push(0);
                } else {
                  this.classscore1.push(e.itemScoreAll);
                }
              } else if (e.classType == this.MIDDLECLASS) {
                this.yclassname2.push(e.className);
                if (
                  e.itemScoreAll == "" ||
                  !e.itemScoreAll ||
                  e.itemScoreAll == null
                ) {
                  this.classscore2.push(0);
                } else {
                  this.classscore2.push(e.itemScoreAll);
                }
              } else if (e.classType == this.SMALLCLASS) {
                this.yclassname3.push(e.className);
                if (
                  e.itemScoreAll == "" ||
                  !e.itemScoreAll ||
                  e.itemScoreAll == null
                ) {
                  this.classscore3.push(0);
                } else {
                  this.classscore3.push(e.itemScoreAll);
                }
              }
            });
            this.$nextTick((e) => {
              if (this.yclassname1.length != 0) {
                var myChart = echarts.init(document.getElementById("survey1"));
              }
              if (this.yclassname2.length != 0) {
                var myChart2 = echarts.init(document.getElementById("survey2"));
              }
              if (this.yclassname3.length != 0) {
                var myChart3 = echarts.init(document.getElementById("survey3"));
              }
              // var myChart = echarts.init(document.getElementById("main"));
              // var myChart2 = echarts.init(document.getElementById("main2"));
              // var myChart3 = echarts.init(document.getElementById("main3"));
              var app = {};
              var option;
              var option2;
              var option3;
              const posList = [
                "left",
                "right",
                "top",
                "bottom",
                "inside",
                "insideTop",
                "insideLeft",
                "insideRight",
                "insideBottom",
                "insideTopLeft",
                "insideTopRight",
                "insideBottomLeft",
                "insideBottomRight",
              ];
              app.configParameters = {
                rotate: {
                  min: 0,
                  max: 90,
                },
                align: {
                  options: {
                    left: "left",
                    center: "center",
                    right: "right",
                  },
                },
                verticalAlign: {
                  options: {
                    top: "top",
                    middle: "middle",
                    bottom: "bottom",
                  },
                },
                position: {
                  options: posList.reduce(function (map, pos) {
                    map[pos] = pos;
                    return map;
                  }, {}),
                },
                distance: {
                  min: 0,
                  max: 100,
                },
              };
              app.config = {
                rotate: 0,
                align: "center",
                verticalAlign: "middle",
                position: "top",
                distance: 15,
                onChange: function () {
                  const labelOption = {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance,
                  };
                  myChart.setOption({
                    series: [
                      {
                        label: labelOption,
                      },
                      {
                        label: labelOption,
                      },
                      {
                        label: labelOption,
                      },
                      {
                        label: labelOption,
                      },
                    ],
                  });
                },
              };
              const labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: "{c}",
                fontSize: 16,
                rich: {
                  name: {},
                },
              };
              option = {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow",
                  },
                },
                legend: {},
                xAxis: [
                  {
                    type: "category",
                    axisTick: { show: false },
                    data: this.yclassname1,
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                    // max: (value) => {
                    //   return Math.ceil(value.max / 100) * 100;
                    // },
                  },
                ],
                series: [
                  {
                    type: "bar",
                    barWidth: 35,
                    barGap: 0,
                    color: "#00B050",
                    label: labelOption,
                    emphasis: {
                      focus: "series",
                    },
                    data: this.classscore1,
                  },
                ],
              };
              option2 = {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow",
                  },
                },
                legend: {},
                xAxis: [
                  {
                    type: "category",
                    axisTick: { show: false },
                    data: this.yclassname2,
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                  },
                ],
                series: [
                  {
                    type: "bar",
                    barGap: 0,
                    barWidth: 35,

                    color: "#00B050",
                    label: labelOption,
                    emphasis: {
                      focus: "series",
                    },
                    data: this.classscore2,
                  },
                ],
              };
              option3 = {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow",
                  },
                },
                legend: {},
                xAxis: [
                  {
                    type: "category",
                    axisTick: { show: false },
                    data: this.yclassname3,
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                  },
                ],
                series: [
                  {
                    type: "bar",
                    barGap: 0,
                    barWidth: 35,
                    color: "#00B050",
                    label: labelOption,
                    emphasis: {
                      focus: "series",
                    },
                    data: this.classscore3,
                  },
                ],
              };

              if (this.yclassname1.length != 0) {
                option && myChart.setOption(option);
              }
              if (this.yclassname2.length != 0) {
                option2 && myChart2.setOption(option2);
              }
              if (this.yclassname3.length != 0) {
                option3 && myChart3.setOption(option3);
              }
              // option && myChart.setOption(option);
              // option2 && myChart2.setOption(option2);
              // option3 && myChart3.setOption(option3);
            });
          }
          if (res.data.allClassByVOList != null) {
            this.selectAllClassBylist = res.data.allClassByVOList;
          }
          if (
            res.data.allStudentScoreVOList == null &&
            res.data.testAllStudentScoreVOList == null &&
            res.data.allClassByVOList == null
          ) {
          }
        });
      }, 200);
    },
    //KindergartenPhysicalTest 体测达标分析
    KindergartenPhysicalTestinfo() {
      this.KindergartenPhysicalTestlist = {};
      KindergartenPhysicalTestanalysis(this.echartslist).then((res) => {
        if (res.data == [] || !res.data) {
          this.KindergartenPhysicalTestshow = false;
        } else {
          this.KindergartenPhysicalTestlist = res.data;
          var app = {};
          var myChart = echarts.init(
            document.getElementById("KindergartenPhysicalTest1")
          );
          var option;

          const posList = [
            "left",
            "right",
            "top",
            "bottom",
            "inside",
            "insideTop",
            "insideLeft",
            "insideRight",
            "insideBottom",
            "insideTopLeft",
            "insideTopRight",
            "insideBottomLeft",
            "insideBottomRight",
          ];
          app.configParameters = {
            rotate: {
              min: 0,
              max: 90,
            },
            align: {
              options: {
                left: "left",
                center: "center",
                right: "right",
              },
            },
            verticalAlign: {
              options: {
                top: "top",
                middle: "middle",
                bottom: "bottom",
              },
            },
            position: {
              options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
              }, {}),
            },
            distance: {
              min: 0,
              max: 100,
            },
          };
          app.config = {
            rotate: 0,
            align: "center",
            verticalAlign: "middle",
            position: "top",
            distance: 15,
            onChange: function () {
              const labelOption = {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance,
              };
              myChart.setOption({
                series: [
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                ],
              });
            },
          };
          const labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: "{c}",
            fontSize: 16,
            rich: {
              name: {},
            },
          };
          option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["男", "女"],
            },
            xAxis: [
              {
                type: "category",
                axisTick: { show: false },
                data: ["3-4岁", "4-5岁", "5-6岁", "6岁以上"],
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: "男",
                type: "bar",
                barGap: 0,
                color: "#60C5F1",
                label: labelOption,
                emphasis: {
                  focus: "series",
                },
                data: [
                  this.KindergartenPhysicalTestlist.threeAndFourMaleCount,
                  this.KindergartenPhysicalTestlist.fourAndFiveMaleCount,
                  this.KindergartenPhysicalTestlist.fiveAndSixMaleCount,
                  this.KindergartenPhysicalTestlist.sixAndMoreMaleCount,
                ],
              },
              {
                name: "女",
                type: "bar",
                color: "#98E0AD",
                label: labelOption,
                emphasis: {
                  focus: "series",
                },
                data: [
                  this.KindergartenPhysicalTestlist.threeAndFourFeMaleCount,
                  this.KindergartenPhysicalTestlist.fourAndFiveFeMaleCount,
                  this.KindergartenPhysicalTestlist.fiveAndSixFeMaleCount,
                  this.KindergartenPhysicalTestlist.sixAndMoreFeMaleCount,
                ],
              },
            ],
          };

          option && myChart.setOption(option);
          this.KindergartenPhysicalTestoptions();
          this.KindergartenPhysicalTestshow = true;
        }
      });
    },
    KindergartenPhysicalTestoptions() {
      var chartDom = document.getElementById("KindergartenPhysicalTest2");
      var myChart = echarts.init(chartDom);
      var option2;

      option2 = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            center: ["50%", "60%"],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%", //只要百分比
                  position: "inside",
                },
                labelLine: { show: true },
                color: function (colors) {
                  var colorList = [
                    "#5470c6",
                    "#fc8251",
                    "#91cd77",
                    "#ef6567",
                    "#f9c956",
                    "#75bedc",
                  ];
                  return colorList[colors.dataIndex];
                },
              },
            },
            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.KindergartenPhysicalTestlist.excellentRate,
                name: ">80优秀",
              },
              {
                value: this.KindergartenPhysicalTestlist.qualifyRate,
                name: "60-80合格",
              },
              {
                value: this.KindergartenPhysicalTestlist.unQualifyRate,
                name: "<60不合格",
              },
            ],
          },
        ],
      };

      option2 && myChart.setOption(option2);
    },
    //班级type
    getList() {
      tKindergartenInfo(this.kindergartenType).then((res) => {
        this.type = res.data[0];
        this.type2 = res.data[1];
      });
    },
    //班级类型
    classtype() {
      this.classtypelist = [];
      tKindergartenInfo(this.ClassType).then((res) => {
        res.data.forEach((e) => {
          var obj = {
            name: e.dictLabel,
            type: e.dictValue,
          };
          this.classtypelist.push(obj);
        });
        this.developmentinfo();
      });
    },
    //班级list
    classinfo() {
      listClassinfo(this.echartslist).then((response) => {
        this.classList = response.rows;
        this.ClassListinfo();
      });
    },
  },
};
</script>
<style scoped='scss'>
::v-deep .el-card__header {
  border: none;
}
::v-deep .el-form {
  display: inline;
}
.title {
  display: block;
  width: 350px;
  margin: 0 auto;
  line-height: 35px;
  background-color: #60c5f1;
  color: #fff;
  font-size: 15px;
  border-radius: 20px;
}
.text {
  font-size: 12px;
  position: absolute;
  left: 19%;
  top: 10%;
}
.header {
  text-align: center;
  font-size: 18px;
  width: 380px;
  height: 45px;
  line-height: 45px;
  margin: 0 auto;
  background-color: #f0f0f0;
  border-radius: 25px;
}
.surveytitle {
  width: 70px;
  background-color: #00d1da;
  color: #fff;
  line-height: 25px;
  height: 25px;
  font-size: 14px;
  text-align: center;
  border-radius: 15px;
  position: absolute;
  left: 7%;
  top: 8%;
}
::v-deep .el-card__header {
  border: none;
}
::v-deep .el-form {
  display: inline;
}
</style>
