<template>
  <div class="trade-situation">
    <div v-if="showChart">
      <p><span/>成交量占比</p>
      <m-chart class="chart" :config="config" :data="data"/>
    </div>
    <div v-if="showChart">
      <p><span/>销售额</p>
      <span class="unit">单位：万元</span>
      <m-chart class="chart" :config="config2" :data="data2"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TradeSituation',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#3967fc', '#38fd8d', '#f3ff33', '#ffb529', '#ff4747'],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'pie', radius: [0, 60], roseType: 'radius', label: {show: true, formatter: '{b}: {c}%'}}
        ]
      },
      data: [
        {name: '鱼类', value: 36},
        {name: '虾类', value: 24},
        {name: '蟹类', value: 12},
        {name: '贝类', value: 12},
        {name: '其他', value: 8},
      ],
      config2: {
        colors: [['#18a6ee', '#6f63ed']],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'bar', barWidth: '20%', key: 'value', borderRadius: [10, 10, 10, 10]},
        ],
        xAxis: {
          key: 'name',
        },
        yAxis: {
          max: 500000,
        }
      },
      data2: [
        {name: '鱼类', value: 450000},
        {name: '虾类', value: 350000},
        {name: '贝类', value: 400000},
        {name: '蟹类', value: 210000},
        {name: '藻类', value: 430000},
        {name: '其他', value: 310000},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  },
}
</script>

<style lang="stylus" scoped>
.trade-situation
  width 100%
  height 100%
  >div
    width 100%
    height 50%
    position relative
    .unit
      position absolute
      right 1rem
      top 1rem
    p
      display flex
      font-size 1.2rem
      font-weight bold
      align-items center
      span
        display inline-block
        width .3rem
        height 1.2rem
        background $edgeColor
        margin-right .5rem
    >.chart
      height calc(100% - 2rem)
</style>
