<template>
  <div class="custom-chart" ref="containerRef" :style="{ height: height + 'px' }"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    height: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.chart = echarts.init(this.$refs.containerRef)
    this.chart.setOption(this.option)
    this.initEventListener()
  },
  methods: {
    initEventListener() {
      const zr = this.getZRender()
      zr.on('mousemove', (params) => {
        this.$emit('zr:mousemove', params)
      })
    },

    resize() {
      this.chart && this.chart.resize()
    },

    // 获取echart实例
    getChartInstance() {
      return this.chart
    },

    getZRender() {
      return this.chart.getZr()
    }
  },
  watch : {
    option: {
      handler() {
        if(this.chart) {
          this.chart.setOption(this.option)
        }
      },
      deep: true
    },
    height() {
      this.$nextTick(() => {
        this.chart && this.chart.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.custom-chart {
  height: 100% !important;
}
</style>
