<template>
  <div class="line-chart" id="line-chart">

  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      chart: {}
    }
  },
  mounted() {
    this.initOption()
    window.addEventListener('resize', () => {
      this.chart.resize()
    })
  },
  methods: {
    resizeChart() {
      if (Object.keys(this.chart).length) {
        this.chart.resize()
      }
    },
    disposeChart() {
      if (Object.keys(this.chart).length) {
        this.chart.dispose()
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('line-chart'))
    },
    initOption() {
      this.disposeChart()
      this.initChart()
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      }
      this.chart.on('click','series',(param)=>{
        console.log(param)
      })
      this.chart.setOption(option)
    }
  }
}
</script>
<style scoped>
.line-chart {
  width: 100%;
  height: 500px;
}
</style>
