<template>
  <div class="app-container">
    <!--    <div id="gradeEcharts" :style="{ width: '100%', height: '600px' }"></div>-->
    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="gradeName"
        label="年级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="num13"
        label="13岁"
        width="180">
      </el-table-column>
      <el-table-column
        prop="num14"
        label="14岁"
        width="180">
      </el-table-column>
      <el-table-column
        prop="num15"
        label="15岁">
      </el-table-column>
      <el-table-column
        prop="num16"
        label="16岁">
      </el-table-column>
      <el-table-column
        prop="num17"
        label="17岁">
      </el-table-column>
      <el-table-column
        prop="num18"
        label="18岁">
      </el-table-column>
      <el-table-column
        prop="num19"
        label="19岁">
      </el-table-column>
      <el-table-column
        prop="num20"
        label="20岁">
      </el-table-column>
      <el-table-column
        prop="num21"
        label="21岁">
      </el-table-column>
      <el-table-column
        prop="num22"
        label="22岁">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {listGradeAge} from "@/api/smartSchool/teachAffairAdministration/ageStatistics";

export default {
  name: "index",
  created() {
    this.gradeAgeList()
  },
  mounted() {
//     console.log(echarts, 'create')
// // 基于准备好的dom，初始化echarts实例
//     let myChart = echarts.init(document.getElementById('gradeEcharts'));
// // 绘制图表
//     myChart.setOption(this.gradeData);
//     window.addEventListener("resize", function () {
//       myChart.resize()
//     })
  },
  data() {
    return {
      tableData: [],
      gradeData: {
        title: {
          text: '年级年龄统计图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            // console.log(params, 67)
            return `<span>${params[0].seriesName}</span>：<span>${params[0].value}人</span><br/>
                    ${params[1].seriesName}：${params[1].value}人<br/>
                    ${params[2].seriesName}：${params[2].value}人<br/>
                    总计：${Number(params[0].value) + Number(params[1].value) + Number(params[2].value)}人
                    `
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {},
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          name: "年龄",
          // min: 13,
          // max: 22,
          // splitNumber: 9,
          axisLabel: {
            fontSize: 20,
            fontWeight: "bold"
          },
          nameTextStyle: {
            fontStyle: "italic",
            fontWeight: "bold"
          },
          data: ['13', '14', '15', '16', '17', '18', '19', '20', '21', '22']
        },
        yAxis: {
          name: "人数",
          type: 'value',
          nameTextStyle: {
            fontStyle: "italic",
            fontWeight: "bold"
          },
        },
        series: [
          {
            name: '高一',
            type: 'bar',
            barWidth: 25,
            data: ['9', '4', '5', '10', '7', '8', '1', '0', '0', '1'],
          },
          {
            name: '高二',
            type: 'bar',
            barWidth: 25,
            data: ['13', '14', '15', '16', '17', '18', '19', '30', '21', '22'],
          },
          {
            name: '高三',
            type: 'bar',
            barWidth: 25,
            data: ['3', '14', '15', '26', '17', '18', '29', '20', '21', '2'],
          }
        ]
      },
      // 遮罩层
      loading: false,

    }
  },
  methods: {
    gradeAgeList() {
      listGradeAge().then((res) => {
        this.tableData = res.rows
      })
    },
    /** 【导出】按钮 */
    handleExport() {
      this.throttle(() => {
        this.download('/statistics/exportAge', {}, `级部学生年龄${new Date().getTime()}.xlsx`)
      })
    },
  }
}
</script>

<style scoped>

</style>
