pbl-teacher-table/src/components/pages/test/checkAi/eChartTemplate.vue

<template>
	<div class="chart" id="charts_canvas" ref="chartRef"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	props: {
		data: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			chartObj: null,
			chartData: null,
		};
	},
	watch: {
		data() {
      this.chartData = JSON.parse(JSON.stringify(this.data))
			this.getChartData();
    },
	},
	methods: {
		getChartData() {
      if(!this.chartObj){
        this.chartObj = echarts.init(this.$refs.chartRef);
      }
      if(!this.chartData){
        this.chartData = JSON.parse(JSON.stringify(this.data))
      }
			this.chartObj.setOption(this.chartData);
			window.addEventListener("resize", () => {
					this.chartObj.resize();
      });
		},
	},
	mounted() {
		this.getChartData();
	},
};
</script>

<style scoped>
.chart {
	max-width: 100%;
	width: 100%;
	height: 100%;
}
</style>