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

<script>
export default {
  name: 'DataComparison',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      showChart: false,
      config: {
        colors: [['#18a6ee', '#6f63ed'], ['#feb570', '#fd6a6c']],
        legend: {
          hide: true,
        },
        shape: [
          {key: 'area', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 0, borderRadius: [10, 10, 10, 10]},
          {key: 'product', 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)
  },
}
</script>

<style lang="stylus" scoped>
.data-comparison
  width 100%
  height 100%
  p
    position absolute
    top 2rem
    font-size .8rem
    font-weight bold
    color #0292d5
    &:first-child
      left 1rem
    &:last-child
      color #e24d68
      right 1rem
</style>
