<template>
  <div />
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import Logo from "@/layout/components/Sidebar/Logo";

export default {
  watch:{
    chartOption: {
      handler(newVal, oldVal) {
        if(newVal){
          this.initChart(newVal)
        }
      },
      deep: true, // 是否深度监听
    }
  },
  props:['chartOption'],
  expose: ['setData'],
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    if(this.chartOption){
      this.initChart(this.chartOption)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setData(option) {
      this.initChart(option)
    },
    initChart(option) {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption(option)
    }
  }
}
</script>
