<!-- 
    filename: lineChart.vue
    author: liubin
    date: 2023-09-04 13:45:00
    description: 
-->

<template>
	<div class="line-chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: 'LineChart',
	components: {},
	props: ['config'],
	data() {
		return {
			chart: null,
		};
	},
	watch: {
		config: {
			handler(value) {
				if (value != null) this.setOption(value);
			},
			deep: true,
		},
	},
	mounted() {
		this.init();
	},
	beforeDestroy() {
		if (this.chart) {
			this.chart.dispose();
		}
	},
	methods: {
		init() {
			if (!this.chart) this.chart = echarts.init(this.$el);
			this.setOption(this.config);
		},
		setOption(option) {
			if (this.chart) this.chart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.line-chart {
	padding: 0 12px;
	// background: #e1e1e1;
	min-height: 320px;
}
</style>
