<!--
 * @Date: 2023-10-10 15:32:47
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-10-10 17:26:42
 * @FilePath: \TelpoH5FrontendWeb\src\components\echarts\index.vue
 * @description:
-->
<template>
    <div :ref="id" id="charDom" class="charDom"/>
</template>

<script>
export default {
  name: 'Echart',
  props: {
    option: {
        type: Object,
        default: () => {}
    },
    id: {
        type: String,
        default: 'charDom'
    },
  },
  data(){
   return {
       chart: null,
   }
  },
  watch: {
    option: {
      handler(val) {
        this.chart.setOption(this.option)
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.renderCharts();
  },
  beforeDestroy() {
    // 销毁echarts实例
    /* this.chart.dispose()
    this.chart = null */
  },
  methods: {
       // 初始化
    renderCharts() {
        this.chart = this.$echarts.init(this.$refs[this.id]);
        console.log("初始化中");
        if (this.option) {
            this.chart.setOption(this.option)
        };
        const _this = this;
        // 注册点击事件
        this.chart.on('click', function(params) {
            _this.$emit('onClick', params)
        })
    }
  }
}
</script>

<style scoped lang="scss">
    @import "./index.scss";
</style>
