<template>
  <div>
    <Card style="width:100%;">
      <div class="config_meta">
        <p class="fl">年度检测量统计</p>
        <div class="fr">
          <Tooltip content="刷新" placement="left-start">
            <Icon @click="_request" type="ios-refresh" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
          </Tooltip>
        </div>
        <div class="clear"></div>
      </div>
      <Row>
        <Col span="24" style="margin-bottom: 10px">
        日期：
        <DatePicker v-model="date" :editable="false" @on-change="_dateChange" type="year"
                    style="width:90px"></DatePicker>
        </Col>
        <Col span="24">
        <div style="width:100%">
          <!--柱状图-->
          <IEcharts :option="option" :style="{width}" style="height: 238px"></IEcharts>
        </div>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3/src/full.js'

export default {
  components: {},
  data() {
    return {
      width: '',
      date: new Date(),
      option: {
        color: this.$echartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          x: 130
        },
        legend: {
          data: ['样品量', '项目未超标量', '项目超标量']
        },
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '样品量',
            splitLine: { show: false }
          },
          {
            type: 'value',
            name: '检测项目量',
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: '样品量',
            type: 'bar',
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
          },
          {
            name: '项目未超标量',
            type: 'bar',
            yAxisIndex: 1,
            stack: '检测项目量',
            data: [6, 7, 8, 9, 10, 11, 12, 13, 14]
          },
          {
            name: '项目超标量',
            type: 'bar',
            yAxisIndex: 1,
            stack: '检测项目量',
            data: [11, 12, 13, 14, 15, 16, 17, 18, 19]
          }
        ]
      },
      // 临时存储x轴数据
      tempXAxis: []
    }
  },
  mounted() {
    this.width = (document.documentElement.clientWidth - 300) / 2 + 'px'
    this._dateChange(this.$dateformat(new Date(), 'yyyy'))
  },
  methods: {
    _request() {
      // this._openBar(this.year)
    },
    // 改变年份
    _dateChange(data) {
      // this._openBar(data)
    }
  }
}
</script>
