<template>
<div class="line">

<div id="main"></div>

</div>

</template>

<script>
import echarts from 'echarts'
export default {

name: "waveshow",
data() {
  return {
    name: '折線圖',
    color:['#ff840c','#0295fc','#02d547','#fcc402','#7802fc'],
    myChart:''
  }
},
methods: {

},
components: {

},
mounted() {
  $("#main").css( 'width', $(".line").width());
  $("#main").css( 'height', $(".line").height());
  let option = {
    color: this.color,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      left: '10%',
      right: '10%'
    },
    legend: {
      data: ['蒸發(fā)量', '降水量', '平均溫度']
    },
    xAxis: [{
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      data: this.$store.state.Time
    }],
    yAxis: [{
      type: 'value',
      position: 'left',
      axisLine: {
        lineStyle: {
          color: this.color[0]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    },{
      type: 'value',
      position: 'right',
      axisLine: {
        lineStyle: {
          color: this.color[1]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    },{
      type: 'value',
      position: 'left',
      offset:55,
      axisLine: {
        lineStyle: {
          color: this.color[2]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    },{
      type: 'value',
      position: 'right',
      offset:55,
      axisLine: {
        lineStyle: {
          color: this.color[3]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    },{
      type: 'value',
      position: 'left',
      offset:110,
      axisLine: {
        lineStyle: {
          color: this.color[4]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    }],
    dataZoom: [{
      startValue: ''
    }, {
      type: 'inside'
    }],
    series: []
  }
  let leng = this.$store.state.nameList.length;
  option.legend.data=this.$store.state.nameList;
  for (let i = 4;i>=leng;i--){
    option.yAxis[i].show = false;
  }
  for (let i = 0;i<leng;i++){
    option.series.push({
      name: this.$store.state.nameList[i],
      type: 'line',
      yAxisIndex: i,
      data: this.$store.state.listDataList[i]
    })
  }
  console.log(this.$store.state.listDataList);
  this.init(option);
},
methods: {
  init(options) {
    this.myChart = echarts.init(document.querySelector('.line #main'))
    this.myChart.setOption(options)
    window.addEventListener('resize', function() {
      amount.resize();
    });
  },
}

}

</script>

<!-- 層疊柱狀圖 -->
<style scoped>
.line{

width: 85%;
height: 750px;

}
</style>