<!--  -->
<template>
  <div :id="id" :data="data" />
</template>

<script>
export default {
  // props: ['id', 'data'],
  props: {
    id: { type: String, default: null },
    data: { type: Object, default: null },
    activeName: { type: String, default: '异常事件' }
  },
  data() {
    // 这里存放数据
    return {
      barChartGraph: null
    }
  },

  watch: {
    data: {
      handler(newVal, oldVal) {
        this.drawGraph(this.id, newVal)
      },
      deep: true
    },
    activeName(newValue, oldValue) {
      if (newValue === 'event' || newValue === 'bridge' || newValue === 'flowMonitor') {
        this.drawGraph(this.id, this.data)
      }
    }
  },

  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(function() {
      this.drawGraph(this.id, this.data)
    })
  },
  beforeDestroy() {
    if (self.barChartGraph) {
      self.barChartGraph.clear()
    }
  },
  // 方法集合
  methods: {
    drawGraph(id, data) {
      const self = this
      const myChart = document.getElementById(id)
      self.barChartGraph = self.$echarts.init(myChart)
      self.barChartGraph.setOption(data)
      self.barChartGraph.resize()
      window.addEventListener('resize', () => {
        self.barChartGraph.resize()
      })
    }
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>
