<template>
  <div>
    <div :id="domId" :style="{'width':'100%','height': height + 'px','margin':'auto'}"></div>
  </div>
</template>

<script>
// 小图
import { generateUUID } from '@/utils/index'
export default {
  name: 'mini-chart',
  props: {
    height: {
      type: [Number, String],
      default: 50
    },
    option: {
      type: [Object, Array],
      default: () => {}
    }
  },
  data () {
    return {
      domId: generateUUID(),
      chart: {}
    }
  },
  watch: {
    option: {
      handler (newVal, oldVal) {
        if (!Object.keys(this.chart).length) return
        this.chart.clear()
        this.initMap()
      },
      deep: true
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.chart = this.$echarts.init(document.getElementById(this.domId), null, { renderer: 'svg' })
      this.chart.setOption(this.option)

      // this.chart.on('click', (e) => {
      //   this.$emit('click', e)
      // })
      // this.chart.on('mousemove', (e) => {
      //   this.$emit('mousemove', e, this.chart)
      // })
    },
    getChart () {
      return this.chart
    }
  }
}
</script>
