<template>
  <div class="process-situation" v-if="showChart">
    <m-chart :config="config" :data="data"/>
  </div>
</template>

<script>
export default {
  name: 'ProcessSituation2',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#7e78f8', '#40bdf9', '#21f4f9', '#4ffb8b', '#faef3a'],
        legend: {
          align: 'right',
          orient: 'horizontal',
        },
        shape: [
          {name: '整虾加工量', key: 'val1', type: 'bar', stack: '1', barWidth: '50%', borderRadius: [0, 0, 3, 3]},
          {name: '虾仁加工量', key: 'val2', type: 'bar', stack: '1', barWidth: '50%', },
          {name: '虾尾加工量', key: 'val3', type: 'bar', stack: '1', barWidth: '50%', },
          {name: '精深加工量', key: 'val4', type: 'bar', stack: '1', barWidth: '50%', },
          {name: '其他产品加工量', key: 'val5', type: 'bar', stack: '1', barWidth: '50%', borderRadius: [3, 3, 0, 0]},
        ],
        xAxis: {
          key: 'month',
        },
        yAxis: {
          name: '单位：吨'
        }
      },
      data: [
        {month: '1月', val1: 8, val2: 6, val3: 3, val4: 2, val5: 2},
        {month: '2月', val1: 9, val2: 5, val3: 2, val4: 3, val5: 3},
        {month: '3月', val1: 9, val2: 7, val3: 4, val4: 3, val5: 4},
        {month: '4月', val1: 30, val2: 21, val3: 12, val4: 14, val5: 8},
        {month: '5月', val1: 58, val2: 29, val3: 19, val4: 12, val5: 7},
        {month: '6月', val1: 85, val2: 61, val3: 25, val4: 14, val5: 4},
        {month: '7月', val1: 94, val2: 62, val3: 32, val4: 11, val5: 5},
        {month: '8月', val1: 102, val2: 68, val3: 29, val4: 14, val5: 3},
        {month: '9月', val1: 65, val2: 32, val3: 21, val4: 18, val5: 6},
        {month: '10月', val1: 32, val2: 25, val3: 15, val4: 10, val5: 7},
        {month: '11月', val1: 28, val2: 12, val3: 14, val4: 8, val5: 2},
        {month: '12月', val1: 17, val2: 10, val3: 9, val4: 6, val5: 4},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true)
  },
}
</script>

<style lang="stylus" scoped>
.process-situation
  width 100%
  height 100%
</style>
