<template>
  <div>
    <common></common>
    <el-card class="con">
      <!-- 上部导航栏 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-date"></i> 学生信息
          </span>
          <!-- 内容上部区域 -->
          <div class="workTop">
            <div class="Topleft">
              <span>2019年10月20日模拟训练测试1</span>
              <span>六年级二班</span>
            </div>
            <div class="Topright">
              <div class="block1"></div>未提交
              <div class="block2"></div>已提交
              <div class="block3"></div>已批阅
            </div>
          </div>
          <!-- 内容表格区域 -->
          <!-- 下方内容区域 -->
          <div class="botTable">
            <el-table :show-header="false" :data="tableData" style="width: 100%">
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
            </el-table>
            <div class="botRight">
              <div>
                共
                <span>40</span>人
              </div>
              <div>
                已提交
                <span>22</span>人
              </div>
              <div>
                已批阅
                <span>2</span>人
              </div>
            </div>
          </div>

          <div class="undone">
            <a href="javescript:;" @click="unread">还没有批阅完成？</a>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-date"></i> 班级学情
          </span>
          <div class="homeworkline">
            <div class="scorePage">成绩单</div>
          </div>
          <!-- 班级学情表格 -->
          <div class>
            <el-table
              :data="tableData2"
              border
              style="width: 100%"
              :header-cell-style="{background:'#FAFAFA'}"
            >
              <el-table-column align="center" prop="id" label="序号" width></el-table-column>
              <el-table-column align="center" prop="id" label="序号" width></el-table-column>
              <el-table-column align="center" prop="id" label="序号" width></el-table-column>
              <el-table-column align="center" prop="id" label="序号" width></el-table-column>
              <el-table-column align="center" prop="id" label="序号" width></el-table-column>
              <el-table-column align="center" prop="id" label="序号" width></el-table-column>
              <el-table-column align="center" prop="id" label="序号" width></el-table-column>
            </el-table>
          </div>
          <!-- 纵向柱状图 -->
          <div class="homeworkline">
            <div class="scorePage">题型得分率</div>
          </div>
          <div id="main01" style="width: 1200px;height:400px;"></div>
          <!-- 横行柱状图 -->
          <div class="homeworkline">
            <div class="scorePage">知识点得分率</div>
          </div>
          <div id="main02" style="width: 1200px;height:400px;"></div>
          <!-- 饼图 -->
          <div class="homeworkline">
            <div class="scorePage">错误原因分析</div>
          </div>
          <div id="main03" style="width: 1000px;height:400px;"></div>
          <!-- 图表 -->
          <div class="classTab">
            <el-table
              :data="tableData3"
              border
              style="width: 100%"
              :header-cell-style="{background:'#FAFAFA'}"
            >
              <el-table-column align="center" prop="id" label="序号" ></el-table-column>
              <el-table-column align="center" prop="id" label="序号"></el-table-column>
              <el-table-column align="center" prop="id" label="序号" ></el-table-column>
              <el-table-column align="center" prop="id" label="序号"></el-table-column>
              <el-table-column align="center" prop="id" label="序号"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-date"></i> 精准推送
          </span>
          精准推送
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-date"></i> 套题分析
          </span>
         <div class="homeworkline">
            <div class="scorePage">难易度</div>
          </div>
          <!-- 饼状图 -->
          <div id="main04" style="width: 500px;height:300px;"></div>
          <!-- 饼图右侧表格 -->
          <div class="table4">
            <el-table
              :data="tableData4"
              border
              style="width: 100%"
              :header-cell-style="{background:'#FAFAFA'}"
            >
              <el-table-column align="center" prop="id" label="序号" ></el-table-column>
              <el-table-column align="center" prop="id" label="序号"></el-table-column>
              <el-table-column align="center" prop="id" label="序号" ></el-table-column>
              <el-table-column align="center" prop="id" label="序号"></el-table-column>
            </el-table>
          </div>
          <div class="homeworkline">
            <div class="scorePage">题型分布</div>
          </div>
          <!-- 空心饼图 -->
          <div class="kong" style="width: 500px;height:300px;">
            <!-- 左侧图表 -->
            <div class="table5">
            <el-table
              :data="tableData5"
              border
              style="width: 100%"
              :header-cell-style="{background:'#FAFAFA'}"
            >
              <el-table-column align="center" prop="id" label="序号" ></el-table-column>
              <el-table-column align="center" prop="id" label="序号"></el-table-column>
              <el-table-column align="center" prop="id" label="序号" ></el-table-column>
              <el-table-column align="center" prop="id" label="序号"></el-table-column>
            </el-table>
          </div>
          <div id="main05" style="width: 500px;height:300px;"></div>
          <!-- 空心饼图左侧表格 -->
          </div>

          <div class="homeworkline">
            <div class="scorePage">知识点分析</div>
          </div>
          <!-- 左侧横行柱状图 -->

          <!-- 右侧表格 -->
        <el-button type="primary" class="initPage">原始试卷</el-button>
        </el-tab-pane>
      </el-tabs>
      
    </el-card>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      activeName: "",
      tableData: [
        {
          name: 1
        }
      ],
      tableData2: [{}],
      tableData3: [{}],
      tableData4:[{}],
      tableData5:[{}]
    };
  },
  methods: {
    unread() {
      this.$router.push("./unread");
    }
  },
  mounted() {
    // 柱形图
    var myChart01 = echarts.init(document.getElementById("main01"));
    var options01 = {
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ["product", "平均正确率", "最高正确率"],
          ["选择题", 43.3, 85.8, 93.7],
          ["填空题", 83.1, 73.4, 55.1],
          ["解答题", 86.4, 65.2, 82.5],
          ["计算题", 72.4, 53.9, 39.1],
          ["综合题", 72.4, 53.9, 39.1]
        ]
      },
      xAxis: { type: "category" },
      yAxis: {},
     
      series: [{ type: "bar", barWidth: 54 }, { type: "bar", barWidth: 54 }]
    };
    myChart01.setOption(options01);

    //横向柱状图
    var myChart02 = echarts.init(document.getElementById("main02"));

    var options02 = {
      color: "#5DAAFF",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },

      grid: {
        top: "2%",
        left: "3%",
        right: "4%",
        bottom: "5%",
        containLabel: true
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: "category",
        data: [
          "方差",
          "数轴",
          "三视图",
          "平年闰年",
          "正负数",
          "数的读法",
          "体积变化",
          "数的简单结算"
        ]
      },
      series: [
        {
          barWidth: 20,
          name: "2011年",
          type: "bar",
          data: [18203, 23489, 29034, 104970, 131744, 630230, 12345, 12345],
          itemStyle: {
            emphasis: {
              barBorderRadius: 9
            },
            normal: {
              barBorderRadius: [0, 9, 9, 0]
            }
          }
        }
      ]
    };
    myChart02.setOption(options02);

    // 饼图
    var myChart03 = echarts.init(document.getElementById("main03"));
    var options03 = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        left: "80%",
        y: "40%",
        icon: "circle",
        itemWidth: 5,
        itemHeight: 5,
        itemGap: 20,

        orient: "vertical",
        right: "left",
        data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
            { value: 1548, name: "搜索引擎" }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
    myChart03.setOption(options03);

    // 套题分析里面的饼状图
    // 饼图
    var myChart04 = echarts.init(document.getElementById("main04"));
    var options04 = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
       right: "15%",
        y: "center",
        icon: "circle",
        itemWidth: 5,
        itemHeight: 5,
        itemGap: 20,

        orient: "vertical",
        right: "left",
        data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
      },
      series: [
        {
         
          name: "访问来源",
          type: "pie",
          radius: "55%",
          center: ["30%", "50%"],
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
            { value: 1548, name: "搜索引擎" }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
    myChart04.setOption(options04);
    // 空心饼图
     var myChart05 = echarts.init(document.getElementById("main05"));
     var options05 = {
       
    tooltip: {
      x: 'right',
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
         right: "15%",
        y: "center",
        
        icon: "circle",
        itemWidth: 5,
        itemHeight: 5,
        itemGap: 20,

        orient: 'vertical',
        x: 'right',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
           center: ["30%", "50%"],
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
  myChart05.setOption(options05);
  }
};
</script>
<style lang="less" scoped>
.con {
  position: relative;
  margin: 15px auto 0;
  width: 1200px;
  min-width: 800px;
  height: 100%;
  background-color: #fff;
}
.workTop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .Topright {
    width: 210px;
    height: 14px;
  }
  .block1,
  .block2,
  .block3 {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #ced8e7;
    margin: 0 2px;
  }
  .block2 {
    background-color: #4597ff;
  }
  .block3 {
    background-color: #e58d37;
  }
}

.botTable {
  position: relative;
  width: 100%;
  height: 205px;
  border: 1px solid #ccc;
  .botRight {
    position: absolute;
    bottom: 15px;
    right: 5px;
    width: 250px;
    height: 20px;
    div {
      margin-left: 10px;
      font-size: 14px;
      float: left;
    }
    span:nth-child(1) {
      color: #ff0000;
    }
    div:nth-child(2) span {
      color: #68a7ff;
    }
    div:nth-child(3) span {
      color: #e58d37;
    }
  }
}
.undone {
  margin: 15px;
  float: right;
  a {
    color: #ff0000;
  }
}

// 班级学情
.homeworkline {
  font-size: 10px;
  height: 15px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  position: relative;
  margin-bottom: 20px;
  .scorePage {
    width: 72px;
    text-align: center;
    height: 18px;
    background-color: #fff;
    padding: 0 5px;
    position: absolute;
    bottom: -8px;
    left: 15px;
  }
}
.table4 {
  width: 580px;
  height: 250px;
  position:absolute;
  right: 0;
  top: 100px;
}
.kong{
  overflow: hidden;
  #main05 {
  width: 500px;
  height: 300px;
  position:absolute;
  right: 100px;
  top: 400px;
}
}
.initPage {
 position: relative;
 left: 50%;
 transform: translateX(-50%)
}
</style>