<template>
  <div style="background-color: #FFFFFF;width:100%;height: 100%;position: relative;">
    <div ref="chartsRef" style="width:100%;height: 100%"></div>
  </div>
</template>
  
<script lang="ts" setup="">
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
const chartsRef = ref();
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
	xdata: {
		type: Array,
		default: [],
	},
	seriesdata: {
		type: Array,
		default: [],
	},
});
const initCharts = () => {
	const myChart = echarts.init(chartsRef.value);
	const option = {
		title: {
			text: props.title,
			left: 'center',
			top: '10px',
		},
		xAxis: {
			type: 'category',
			data: props.xdata,
		},
		yAxis: {
			type: 'value'
		},
		series: props.seriesdata,
	};
	myChart.clear();
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
};
watch(
	() => props.seriesdata,
	(newValue, oldValue) => {
		initCharts();
	}
); 
onMounted(() => {
	initCharts();
});
</script>
  
  <style lang="scss" scoped>
</style>