<!--
 * @Author: zwq
 * @Date: 2024-10-29 09:47:40
 * @LastEditors: zwq
 * @LastEditTime: 2024-11-26 14:41:52
 * @Description:
-->
<!--
    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();
	},
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chart) {
      this.echart.resize();
    }
  },
	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,true);
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
		},
	},
};
</script>

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