<template>
  <div class="product-area">
    <div v-if="showChart">
      <p class="title"><span/>面积</p>
      <m-chart v-if="showChart" :config="config" :data="data" />
      <div class="legend">
        <div v-for="(item,i) in config.colors" :key="item">
          <span :style="`background:${item}`"/>
          <p>{{data[i].name}}</p>
        </div>
      </div>
    </div>
    <div v-if="showChart">
      <p class="title"><span/>产量</p>
      <m-chart v-if="showChart" :config="config2" :data="data2"/>
      <div class="legend">
        <div v-for="(item,i) in config2.colors" :key="item">
          <span :style="`background:${item}`"/>
          <p>{{data2[i].name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductArea',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#9478f5', '#4ef4e9', '#05bcfe'],
        legend: {hide: true},
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data: [
        {name: '品种1', value: 52},
        {name: '品种2', value: 26},
        {name: '品种3', value: 22},
      ],
      config2: {
        colors: ['#ff4d4c', '#f7ff14', '#5eec64'],
        legend: {hide: true},
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data2: [
        {name: '品种1', value: 52},
        {name: '品种2', value: 26},
        {name: '品种3', value: 22},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 100)
  }
}
</script>

<style lang="stylus" scoped>
.product-area
  width 100%
  height 100%
  overflow hidden
  display flex
  >div
    position relative
    flex 1
  .title
    position absolute
    left 1rem
    top 0
    display flex
    align-items center
    font-weight bold
    font-size 1rem
    >span
      display block
      width .3rem
      height 1.2rem
      background $edgeColor
      margin-right .6rem
  .legend
    position absolute
    bottom 1rem
    display flex
    justify-content space-around
    width 100%
    div
      display flex
      flex-direction column
      align-items center
    span
      display block
      width .8rem
      height @width
      border-radius 50%
</style>
