<template>
  <div class="moreInfo">
    <div class="moreTop">
      <a href="#">南华凯个人作业报告</a>
      <div class="moreRight">
        <el-date-picker
          v-model="value1"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          size="mini"
        ></el-date-picker>
        <el-button type="primary" size="mini">添加</el-button>
      </div>
    </div>
    <div class="Moreline">
      <div class="in">名次变化</div>
    </div>

    <!-- 折线图  -->
    <div id="main" style="width: 1100px;height:400px;"></div>
    <div class="Moreline">
      <div class="in">题型正确率</div>
    </div>

    <!-- 柱形图 -->

    <div id="main1" style="width: 600px;height:400px;"></div>
    <!-- 柱形图右侧表格区域 -->
    <div class="main1Table">
      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{background:'#FAFAFA'}"
        align="center"
      >
        <el-table-column align="center" prop="tx" label="题型" width="90"></el-table-column>
        <el-table-column align="center" prop="num" label="数量" width></el-table-column>
        <el-table-column align="center" prop="fenbu" label="试题分布" width></el-table-column>
        <el-table-column align="center" prop="total" label="总分值" width></el-table-column>
      </el-table>
    </div>
    <!-- 错误原因分析 -->
    <div class="Moreline">
      <div class="in">知识点正确率</div>
    </div>
    <!-- 横行柱状图区域 -->
     <!-- 右侧图形 -->
    <div id="main2" style="width: 500px;height:300px;"></div>
    <!-- 左侧表格 -->
    <div class="main2Table">
      <!-- 表格区域 -->
      <el-table
        :data="tableData2"
        border
        style="width: 100%"
        :header-cell-style="{background:'#FAFAFA'}"
        align="center"
      >
        <el-table-column align="center" prop="id" label="序号" width="90"></el-table-column>
        <el-table-column align="center" prop="tips" label="知识点" width></el-table-column>
        <el-table-column align="center" prop="much" label="题量" width></el-table-column>
        <el-table-column align="center" prop="fenbu" label="试题分布" width></el-table-column>
        <el-table-column align="center" prop="total" label="总分值" width></el-table-column>
      </el-table>
    </div>
   

   <!-- 错误原因分析 -->
    <div class="Moreline">
      <div class="in">错误原因分析</div>
    </div>
   <!-- 饼图 -->
    <div id="main3" style="width: 500px;height:300px;"></div>
    
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      value1: "",
      //关于表格数据
      tableData: [{ total: 6, fenbu: "1.2.3.4", num: "9题", tx: "选择题" }],
    tableData2:[{id:1,tips:'体积变化',much:'5道',fenbu:'1.3.3',total:'90'}]
  }
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
      left: "auto",
      top: "auto",
      right: "auto",
      bottom: "auto",
      color: ["#529BFF"],
      xAxis: {
        type: "category",
        data: [
          "20191001",
          "2019002",
          "2019003",
          "2019004",
          "2019005",
          "2019006",
          "2019007",
          "2019008",
          "2019009",
          "2019010"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [1, 4, 3, 8, 5, 7, 5, 10, 2, 12],
          type: "line"
        }
      ]
    };

    myChart.setOption(option);

    // 柱形图
    var myChart1 = echarts.init(document.getElementById("main1"));
    var options1 = {
        left: "10%",
      color: ["#5665EC", "#EE5356"],
      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: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: "bar" }, { type: "bar" }],
      grid:{
              x:100,
              y:45}
    };
    myChart1.setOption(options1);
    //横行柱形图
    var myChart2 = echarts.init(document.getElementById("main2"));

    var options2 = {
    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]
                }
            }
        }
    ]
};
myChart2.setOption(options2);

//饼图
var myChart3 = echarts.init(document.getElementById("main3"));
var options3 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
       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)'
                }
            }
        }
    ]
};
myChart3.setOption(options3);
  }
};
</script>
<style lang="less" scoped>
.moreInfo {
  position: relative;
}
.moreTop {
  border-bottom: 1px solid #ccc;
  height: 40px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  a {
    font-size: 14px;
  }
  .el-button {
    margin-left: 10px;
  }
}
.Moreline {
  position: relative;
  height: 17px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  .in {
    position: absolute;
    left: 13px;
    bottom: -7px;
    background-color: #fff;
    padding: 0 3px;
  }
}
.main1Table {
  width: 500px;
  height: 300px;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 545px;
}
.main2Table {
   position:absolute;
   left: 0;
   top: 925px;
    width: 500px;
    height: 300px;
   
}
#main2 {
   left: 600px;
}
</style>