import { defineComponent, ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import './common.less'
import { isEmptyObject } from '@cip/utils/util'
export default defineComponent({
  name: 'CipCharts',
  props: {
    options: Object
  },
  setup (props) {
    const dom = ref()
    onMounted(() => {
      const chartInstance = echarts.init(dom.value)

      watch(() => props.options, (val) => {
        if (!isEmptyObject(val)) chartInstance.setOption(val)
      }, { immediate: true, deep: true })
    })
    return () => (
      <div ref={dom} class={'cip-chart-wrapper'}/>
    )
  }
})