<template>
  <div ref="chart" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'
import { simpleChart } from '../option'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    sizeRatio: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    testData() {
      return [{
        name: 'series1',
        data: [{
          name: '07/20',
          value: 10
        }, {
          name: '07/21',
          value: 11
        }]
      }, {
        name: 'series2',
        data: [{
          name: '07/20',
          value: 13
        }, {
          name: '07/21',
          value: 15
        }]
      }]
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(simpleChart(this.testData(), 1, {
        type: 'line',
        yAxisName: '大小',
        showLegend: true
      }))
    }
  }
}
</script>
