<template>
  <div class="area-count" v-if="showChart">
    <m-chart :config="config" :data="data" :options="{xAxis}"/>
    <p>面积（亩）</p>
    <p>数量（个）</p>
  </div>
</template>

<script>
export default {
  name: 'AreaCount',
  props: {
    data: {
      type: Array,
      default() {
        return [
          {year: '2015', area: 97200, count: 81},
          {year: '2016', area: 106800, count: 89},
          {year: '2017', area: 114000, count: 95},
          {year: '2018', area: 123600, count: 103},
          {year: '2019', area: 129600, count: 108},
        ]
      }
    }
  },
  data() {
    return {
      showChart: false,
      config: {
        colors: [['#1ca4ec', '#7060e8'], ['#fd912a', '#fb5d4c']],
        legend: {
          hide: true,
        },
        shape: [
          {key: 'area', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 0, borderRadius: [10, 10, 10, 10]},
          {key: 'count', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 1, borderRadius: [10, 10, 10, 10]},
        ],
        xAxis: {
          key: 'year',
        },
      },
      xAxis: {
        axisLabel: {
          rotate: 0,
          interval: 0,
          fontSize: 12 * Number((screen.height / 800).toFixed(1)),
          textStyle: {
            color: '#fff',
          },
        }
      }
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  },
}
</script>

<style lang="stylus" scoped>
.area-count
  width 100%
  height 80%
  margin-top 2rem
  overflow hidden
  p
    position absolute
    top 3rem
    font-size .8rem
    font-weight bold
    color #0597e6
    &:first-child
      left 1rem
    &:last-child
      color #ea7c37
      right 1rem
</style>
