<template>
  <div class="detail">
    <div class="pc-main">
      <Card shadow>
        <p slot="title">早起人数统计</p>
        <div class="dateBox">
          <DatePicker
            :value="value2"
            format="yyyy/MM/dd"
            type="daterange"
            placement="bottom-end"
            placeholder="Select date"
            style="width: 200px"
          ></DatePicker>
        </div>
        <Row>
             <div style="height: 310px;" ref="dom"></div>
        </Row>
      </Card>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { on, off } from "@/libs/tools";
export default {
  name: "categories",
  components: {
    
  },
  data() {
    return {
      pieData: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" }
      ],
      dom: null,
      tab: "1"
    };
  },
  methods: {
    resize() {
      this.dom.resize();
    }
  },
  mounted() {
    const option = {
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        }
    ]
};
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom);
      console.log(this.dom);
      this.dom.setOption(option);
      on(window, "resize", this.resize);
    });
  },
  beforeDestroy() {
    off(window, "resize", this.resize);
  }
};
</script>

<style lang="less" scoped>
.pc-main {
  padding: 20px;
  //margin-top: 20px;
  background-color: #fff;
  .dateBox {
    margin: 10px 0 20px 0;
    text-align: right;
  }
}
.btn {
  text-align: right;
  width: 80%;
  position: fixed;
  background-color: #fff;
  bottom: 10px;
  padding: 10px 30px;
}
</style>
