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

<script>
export default {
  name: 'PriceAnalysis',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#eeb514', '#5eec67', '#01adfe'],
        legend: {align: 'right'},
        shape: [
          {key: 'fish1', name: '草鱼', type: 'line'},
          {key: 'fish2', name: '鲫鱼', type: 'line'},
          {key: 'fish3', name: '南美白对虾', type: 'line'},
        ],
        yAxis: {
          name: '元',
          max: 50,
        },
        xAxis: {
          key: 'date',
        }
      },
      data: [
        {date: '2020.3', fish1: 10, fish2: 15, fish3: 25},
        {date: '2020.4', fish1: 10, fish2: 18, fish3: 28},
        {date: '2020.5', fish1: 20, fish2: 25, fish3: 27},
        {date: '2020.6', fish1: 15, fish2: 15, fish3: 29},
        {date: '2020.7', fish1: 10, fish2: 12, fish3: 31},
        {date: '2020.8', fish1: 11, fish2: 18, fish3: 24},
        {date: '2020.9', fish1: 12, fish2: 11, fish3: 29},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  },
}
</script>

<style lang="stylus" scoped>
.price-analysis
  width 100%
  height 100%
</style>
