<template>
  <div class="product-area">
    <div v-if="showChart">
      <p class="title"><span/>面积</p>
      <m-chart v-if="showChart" :config="config" :data="data" />
    </div>
    <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 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: ['#1890FF',
          '#41D9C7',
          '#2FC25B',
          '#FACC14',
          '#E6965C',
          '#223273',
          '#7564CC',
          '#8543E0'],
        legend: {hide: true},
        tooltip: {
          formatter: '{b}：{c}亩 ({d}%)',
          confine: true,
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '30%']}
        ]
      },
      data: [
        {name: '长春鳊', value: 189},
        {name: '鳜鱼', value: 142},
        {name: '青鱼', value: 156},
        {name: '鲶鱼', value: 173},
        {name: '鳙鱼', value: 165},
        {name: '鲈鱼', value: 176.5},
        {name: '鲫鱼', value: 154},
        {name: '白丝', value: 165},
      ],
      config2: {
        colors: ['#1890FF',
          '#41D9C7',
          '#2FC25B',
          '#FACC14',
          '#E6965C',
          '#223273',
          '#7564CC',
          '#8543E0'],
        legend: {hide: true},
        tooltip: {
          formatter: '{b}：{c}吨 ({d}%)',
          confine: true,
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '30%']}
        ]
      },
      data2: [
        {name: '长春鳊', value: 23678},
        {name: '鳜鱼', value: 34981},
        {name: '青鱼', value: 65143},
        {name: '鲶鱼', value: 47189},
        {name: '鳙鱼', value: 41191},
        {name: '鲈鱼', value: 81912},
        {name: '鲫鱼', value: 71023},
        {name: '白丝', value: 37181},
      ],
    }
  },
  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 .5rem
    display flex
    justify-content space-around
    width 90%
    margin 0 auto
    div
      display flex
      flex-direction column
      align-items center
      width 1rem
    span
      display block
      width .8rem
      height @width
      border-radius 50%
</style>
