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

<script>
export default {
  name: 'ProcessSituation',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#7e78f8', '#40bdf9', '#21f4f9', '#4ffb8b', '#faef3a'],
        legend: {
          align: 'right',
          orient: 'horizontal',
        },
        shape: [
          {name: '整虾加工量', key: 'val1', type: 'line', areaStyle: {opacity: 0.8}},
          {name: '虾仁加工量', key: 'val2', type: 'line', areaStyle: {opacity: 0.7}},
          {name: '虾尾加工量', key: 'val3', type: 'line', areaStyle: {opacity: 0.6}},
          {name: '精深加工量', key: 'val4', type: 'line', areaStyle: {opacity: 0.5}},
          {name: '其他产品加工量', key: 'val5', type: 'line', areaStyle: {opacity: 0.4}},
        ],
        xAxis: {
          key: 'month',
        },
        yAxis: {
          name: '单位：吨'
        }
      },
      data: [
        {month: '1月', val1: 80, val2: 60, val3: 300, val4: 20, val5: 20},
        {month: '2月', val1: 90, val2: 50, val3: 20, val4: 30, val5: 30},
        {month: '3月', val1: 90, val2: 70, val3: 40, val4: 30, val5: 40},
        {month: '4月', val1: 300, val2: 210, val3: 120, val4: 140, val5: 80},
        {month: '5月', val1: 580, val2: 290, val3: 190, val4: 120, val5: 70},
        {month: '6月', val1: 850, val2: 610, val3: 250, val4: 140, val5: 40},
        {month: '7月', val1: 940, val2: 620, val3: 320, val4: 110, val5: 50},
        {month: '8月', val1: 1020, val2: 680, val3: 290, val4: 140, val5: 30},
        {month: '9月', val1: 650, val2: 320, val3: 210, val4: 180, val5: 60},
        {month: '10月', val1: 320, val2: 250, val3: 150, val4: 100, val5: 70},
        {month: '11月', val1: 280, val2: 120, val3: 140, val4: 80, val5: 20},
        {month: '12月', val1: 170, val2: 100, val3: 90, val4: 60, val5: 40},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true)
  },
}
</script>

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