<template>
  <div class="app-weekAndDayBox">
    <el-row :gutter="10" style="height:100%;">
      <el-col :span="12" class="aside-padding" style="height:100%;">
        <uWeek class="u-uWeek">W</uWeek>
      </el-col>
      <el-col :span="12" class="aside-padding" style="height:100%;">
        <uDay class="u-uDay">D</uDay>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import uDay from './uDay'
  import uWeek from './uWeek'
  import echarts from 'echarts'
    export default {
      name: "weekAndDay",
      components: {
        uDay,
        uWeek,
      },
      data() {
        return {
          legendArr: [],
          //color: this.$store.state.color,
          lineChart: {},
          name: '折线图'
        }
      },
      methods: {
        createLine(){
          // 基于准备好的dom，初始化echarts实例
          this.lineChart = echarts.init(document.querySelector('.lineChart'));
          const option={
            color: ['#325B69', '#698570', '#AE5548', '#6D9EA8', '#9CC2B0', '#C98769'],
            grid: {
              top: '5%',
              left: '2%',
              right: '5%',
              bottom: '8%',
              containLabel: true
            },
            title: {
              show: false
            },
            tooltip: {
              trigger: 'axis',
              show:false
            },
            legend: {
              show: false
            },
            toolbox: {
              show: false
            },
            xAxis: [{
              name: '产品',
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              nameTextStyle: {
                color: 'rgba(255, 255, 255, 0.69)'
              },
              axisLabel: {
                textStyle: {
                  color: 'white'
                }
              },
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }],
            yAxis: [{
              axisLine: {
                show: false
              },
              nameLocation: 'end',
              nameGap: 20,
              nameRotate: 0,
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: ['rgba(230, 230, 230, 0.2)']
                }
              },
              axisLabel: {
                textStyle: {
                  color: 'white',
                  fontSize: 14
                }
              },
              name: '数量',
              type: 'value',
              nameTextStyle: {
                color: 'rgba(255, 255, 255, 0.69)'
              }
            }],
            series: [{
              name: '标签3',
              type: 'line',
              stack: '总量',
              data: [50, 32, 21, 14, 20, 30, 40]
            }, {
              name: '标签4',
              type: 'line',
              stack: '总量',
              data: [30, 32, 31, 34, 30, 30, 20]
            }, {
              name: '标签5',
              type: 'line',
              stack: '总量',
              data: [20, 32, 1, 34, 20, 13, 10]
            }]
          };
          this.lineChart.setOption(option);
          window.addEventListener('resize', function() {
            this.lineChart.resize();
            console.log("resize");
          }.bind(this));
        }
      }
    }
</script>

<style scoped  lang="scss">
  .app-weekAndDayBox {
    width: 100%;
    .theme-card{
      height: 100%;
    }
    .lineChart{
      position: absolute;
      margin: 0 auto;
      top:0;
      bottom: 0;
      left:0;
      width: 100%;
      height: 100%;
    }
    .u-uWeek,.u-uDay{
      height: 100%;

    }
  }
</style>
