<template lang="html">
    <div class="sheet_demo">
        <el-container class="container">
            <!-- main -->
            <el-container class="main">
                <el-header class="main-header">
                    <el-row class="main-header-row">
                        <el-col :span="3" class="search-input-area">
                          <el-date-picker
                            v-model="value6"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-table
                        :data="bill_list"
                        ref="multipleTable"
                        :border=true
                        :max-height="bill_height - 120"
                        :fit=true
                        @selection-change="selection_change"
                        style="width: 100%; overflowY: hidden"
                        :row-style="set_row_style"
                        >
                <el-table-column  type="selection" width="40"></el-table-column>
                <el-table-column width="150" prop="bill_no" sortable :show-overflow-tooltip=true label="5天以下"></el-table-column>
                <el-table-column prop="order_no" :show-overflow-tooltip=true label="5-10天"></el-table-column>
                <el-table-column prop="style_code" label="11-15天"></el-table-column>
                <el-table-column prop="customer_name" label="16-20天"></el-table-column>
                <el-table-column prop="customer_name"label="21-25天"></el-table-column>
                <el-table-column prop="style_code" label="26-30天"></el-table-column>
                <el-table-column prop="customer_name" label="1-3月"></el-table-column>
                <el-table-column prop="customer_name"label="3-6月"></el-table-column>
                <el-table-column prop="product_line" label="6月以上" :show-overflow-tooltip=true></el-table-column>
              </el-table>
                </el-main>
            <div>
                  <div id="myChartTwo" :style="{width:'100%',height:'500px',float:'left'}"></div>
            </div>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import utilSingeUc from '@basicClass/util_singe_uc.js'
export default {
  mixins: [utilSingeUc],
  components: {

  },
  data() {
    return {
      value6: '',
      option: {
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [5, 10, 15, 25, 30, '1-3月', '3-6月', '6月以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [150, 200, 600, 1000, 1900, 1330, 5000, 10],
          type: 'line',
          smooth: true
        }]
      }
    }
  },
  mounted() {
    this.myChartTwo = this.$echarts.init(document.getElementById('myChartTwo'))
    var _this = this
    setTimeout(function() {
      _this.myChartTwo.setOption(_this.option, true)
    }, 200)
  },
  methods: {
  }
}
</script>
<style scoped  src="../../components/common/sheet_demo.css"></style>

