<template>
    <div :id="idstr"></div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      dataObj: {},
      option: {},
      chart: null,
      clickNum: [1, 1, 1, 1, 1]
    }
  },
  props: ['message', 'idstr'],
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      let vm = this
      // 基于准备好的dom，初始化echarts实例
      vm.chart = echarts.init(document.getElementById(vm.idstr))
      // 清空图表
      vm.chart.clear()
      vm.option = {
        legend: {},
        tooltip: {
          transitionDuration: 0,
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        series: [
          { type: 'line', smooth: true, seriesLayoutBy: 'row' }
        ]
      }
      vm.drawBar()
      // window.addEventListener("resize",()=>{
      //     chart.resize();
      // });
    },
    drawBar () {
      // 绘制图表
      let vm = this
      vm.chart.setOption(vm.option)
      vm.eventList()
    },
    eventList () {
      let vm = this
      vm.chart.on('click', function (params) {
      })
    }
  },
  watch: {
    message: function () {
      let vm = this
      setTimeout(function () {
        vm.drawLine()
      }, 1000)
      // console.log(this.message)
    }
  }
}
</script>

<style lang="less">

</style>