<template>
  <v-chart ref="lineChart" :option="option" autoresize />
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent])

export default {
  name: 'LineChart',
  props: {
    data: { type: Object, default: () => {} }
  },
  components: {
    VChart,
  },
  computed: {
    option() {
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.data.series.map(ser => ser.name) || []
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.data.xData || [],
          axisLabel: {
            showMaxLabel: true,
            showMinLabel: true
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: this.data.series || []
      }
      return option
    }
  },
  beforeUnmount() {
    // 手动销毁实例
    if (this.$refs.lineChart && this.$refs.lineChart.dispose) {
      this.$refs.lineChart.dispose();
    }
  }
}
</script>

<style lang="scss" scoped>
</style>