Echarts 动态更改数据

<template>
  <div>
    <div     
      :class="['chart',{'bigClass':chartClass}]"
      :id="id"
      ref="charts"
    ></div>
  </div>
</template>
<script>
var echarts = require('echarts');
// import echarts from 'echarts'
export default {
  name: 'lineChart',
  data () {
    return {
      myChart: null,
    }
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    chartClass: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: {}
    },
    h: {
      type: Number,
      default: 130

    }
  },
  mounted () {
    // console.log(9)
    this.$nextTick(() => {
      // console.log(this.myChart)
      if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
        this.myChart.dispose();
      }

      this.drawLine()
      window.addEventListener('resize', this.handleWindowResize);

    })
    console.log('echart')

  },
  methods: {
    drawLine () {
      // console.log(8)
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById(this.id))
      this.myChart.setOption(this.options)
    },
    /**
    * 当窗口缩放时，echart动态调整自身大小
    */
    handleWindowResize () {
      if (!this.myChart) return;
      this.myChart.resize();
    }
  },
  watch: {
    /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
    options: {
      deep: true,
      handler (val) {
        console.log( this.chartClass)
        console.log(val)
        // this.setOptions(val)
        this.myChart.setOption(val, true)
      }
    },
  },
  beforeDestroy () {
    if (!this.myChart) {
      return
    }
    /* 释放图表实例 */
    this.myChart.dispose()
    /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
    this.myChart = null
  },

}
</script>
<style scoped>
.chart {
  height: 200px;
}
.chart.bigClass {
  height: 600px;
}
</style>