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

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '97%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
watch: {
     chartData: {
       deep: true,
       handler(val) {
         this.setOptions(val)
       }
     }
   },
   data() {
     return {
       chart: null
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
     })
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
     this.chart.dispose()
     this.chart = null
   },
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons');
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
	   console.log(this.chartData)
     },
       setOptions({ Y2, X } = {}) {
         console.log(Y2, X ,56)
        this.chart.setOption({
                 title: {
                        text: '历史体重统计图(单位KG)'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    color:['#2396D6'],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                          lineStyle: {
                            color: '#343434',
                            width: 1 //这里是为了突出显示加上的
                          }
                        },
                        data: X,
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                          lineStyle: {
                            color: '#343434',
                            width: 1 //这里是为了突出显示加上的
                          }
                        }
                    },
                    series: [
                        {
                            name: '体重',
                            type: 'line',
                            stack: '千克',
                            data: Y2
                        },
                    ]
              })
       }
   }
}
</script>
