pbl-teacher-table/src/components/pages/testPerson/portrait/eChartView.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.getChartData();
		},
	},
	methods: {
		getChartData() {
			this.chartObj = echarts.init(this.$refs.chartRef);
			this.chartObj.setOption(this.data);
			window.addEventListener("resize", () => {
					this.chartObj.resize();
      });
		},
	},
	mounted() {
		// this.$nextTick(()=>{
			this.getChartData();
		// })
	},
};
</script>

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