<template>
  <div class="area-count" v-if="showChart">
    <m-chart :config="config" :data="data"/>
    <p>面积（公顷）</p>
    <p>数量（个）</p>
  </div>
</template>

<script>
export default {
  name: 'AreaCount',
  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',
        },
      },
      data: [
        {year: '2015', area: 200000, count: 300000},
        {year: '2016', area: 300000, count: 450000},
        {year: '2017', area: 400000, count: 500000},
        {year: '2018', area: 500000, count: 650000},
        {year: '2019', area: 600000, count: 750000},
      ]
    }
  },
  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>
