<template>
  <div class="mode-rate">
    <div class="legend">
      <p v-for="(item, i) in data" :key="item.name"><span :style="`background:${config.colors[i]}`"/> {{item.name}}</p>
    </div>
    <div class="chart-wrapper" v-if="showChart">
      <div>
        <p class="title"><span/>面积</p>
        <m-chart :config="config" :data="data"/>
      </div>
      <div>
        <p class="title"><span/>水稻产量</p>
        <m-chart style="z-index:99;" :config="config2" :data="data2"/>
        <div class="border" />
      </div>
      <div>
        <p class="title"><span/>水稻产值</p>
        <m-chart style="z-index:99;" :config="config3" :data="data3"/>
        <div class="border" />
      </div>
      <div>
        <p class="title"><span/>水产品产量</p>
        <m-chart style="z-index:99;" :config="config2" :data="data4"/>
        <div class="border" />
      </div>
      <div>
        <p class="title"><span/>水产品产值</p>
        <m-chart style="z-index:99;" :config="config3" :data="data5"/>
        <div class="border" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModeRate2',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
        legend: {
          hide: true,
        },
        tooltip: {
          formatter: '{b}：{c}亩'
        },
        shape: [
          {type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data: [
        {name: '稻小龙虾', value: 19824},
        {name: '稻青虾', value: 0},
        {name: '稻蟹', value: 780},
        {name: '稻鲤', value: 0},
        {name: '稻鳅', value: 0},
        {name: '稻鳖', value: 0},
        {name: '稻蛙', value: 0},
        {name: '稻螺', value: 0},
        {name: '其他', value: 0},
      ],
      config2: {
        colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
        legend: {
          hide: true,
        },
        tooltip: {
          formatter: '{b}：{c}吨'
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data2: [
        {name: '稻小龙虾', value: 10650.02},
        {name: '稻青虾', value: 0},
        {name: '稻蟹', value: 385.28},
        {name: '稻鲤', value: 0},
        {name: '稻鳅', value: 0},
        {name: '稻鳖', value: 0},
        {name: '稻蛙', value: 0},
        {name: '稻螺', value: 0},
        {name: '其他', value: 0},
      ],
      config3: {
        colors: ['#fe3c3a', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
        legend: {
          hide: true,
        },
        tooltip: {
          formatter: '{b}：{c}万元'
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data3: [
        {name: '稻小龙虾', value: 3863},
        {name: '稻青虾', value: 0},
        {name: '稻蟹', value: 316},
        {name: '稻鲤', value: 0},
        {name: '稻鳅', value: 0},
        {name: '稻鳖', value: 0},
        {name: '稻蛙', value: 0},
        {name: '稻螺', value: 0},
        {name: '其他', value: 0},
      ],
      data4: [
        {name: '稻小龙虾', value: 2305.104},
        {name: '稻青虾', value: 0},
        {name: '稻蟹', value: 75.546},
        {name: '稻鲤', value: 0},
        {name: '稻鳅', value: 0},
        {name: '稻鳖', value: 0},
        {name: '稻蛙', value: 0},
        {name: '稻螺', value: 0},
        {name: '其他', value: 0},
      ],
      data5: [
        {name: '稻小龙虾', value: 8190},
        {name: '稻青虾', value: 0},
        {name: '稻蟹', value: 334},
        {name: '稻鲤', value: 0},
        {name: '稻鳅', value: 0},
        {name: '稻鳖', value: 0},
        {name: '稻蛙', value: 0},
        {name: '稻螺', value: 0},
        {name: '其他', value: 0},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true)
  },
}
</script>

<style lang="stylus" scoped>
.mode-rate
  width 100%
  height 100%
  overflow hidden
  .legend
    display flex
    align-items center
    justify-content space-around
    width 80%
    margin 0 auto .5rem
    span
      display inline-block
      width .8rem
      height @width
      border-radius 50%
      margin-right .4rem
  .chart-wrapper
    width inherit
    height inherit
    display flex
    >div
      position relative
      flex 1
      height calc(100% - 1rem)
      .border
        width 8rem
        height @width
        border 0.2rem solid #00f2ff
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        border-radius 50%
        box-shadow 0 0 1rem 0.2rem rgba(255,255,255,0.3), inset 0 0 1rem 0.2rem rgba(255,255,255,0.3)
        opacity .9
    .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
</style>
