<template>
	<div ref="chartsRef" :style="{height:height, width:width}"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import T from './echarts-theme-T.js';
import {ref, watch, computed, onActivated, onDeactivated, nextTick, onMounted} from "vue";
echarts.registerTheme('T', T);

const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
const chartsRef = ref(null)
const props = defineProps({
	height: {type: String, default: "100%"},
	width: {type: String, default: "100%"},
	nodata: {type: Boolean, default: false},
	option: {
		type: Object, default: () => {
		}
	}
})

let isActive = ref(false)
let chart = ref(null)

watch(() => props.option, (v) => {
	unwarp(chart.value).setOption(v);
}, {deep: true})

const options = computed(() => {
	return props.option || {}
})


onActivated(() => {
	if (!isActive.value) {
		nextTick(() => {
			chart.value.resize()
		})
	}
})

onDeactivated(() => {
	isActive.value = false
})

onMounted(() => {
	isActive.value = true
	nextTick(() => {
		draw()
	})
})

function draw() {
	var myChart = echarts.init(chartsRef.value, 'T');
	myChart.setOption(options.value);
	chart.value = myChart;
	window.addEventListener('resize', () => myChart.resize());
}
</script>

<style scoped>

</style>
