Vue中封装eCharts组件及优化方式

generateOptionFrom(originalChartData, options = {}) {
	// do something with originalData
	let series = doSomething(originalChartData);
	return {
		name: '',
		legend: [],
		tooltip: {},
		// ...
		series,
		...options
	};
}

<template>
	<div class="charts" ref="eCharts">
    </div>
</template>
<script>
import * as echart from 'echarts';
export default {
	 props: {
        options: {
            type: Object
        },
        height: {
            type: String,
            default: '300px'
        }
    },
    mounted() {
    	// eCharts在初始化的时候有时捕捉不到元素高度，这里手动设置一下
        this.$refs.eCharts.style.height = this.height;
        this.$nextTick(() => {
            this.initChart(this.options);
        });
    },
    beforeDestroy() {
    	// 组件销毁时主动释放eCharts内存空间
        const chartsInstance = echart.getInstanceByDom(this.$refs.eCharts);
        chartsInstance && chartsInstance.dispose();
        window.onresize = null;
    },
    watch: {
		options() {
			const chartsInstance = echart.getInstanceByDom(this.$refs.eCharts);
        	chartsInstance && chartsInstance.setOption(this.options);
		}
	},
	methods: {
		initChart() {
			if (!this.$refs.eCharts) {
				// 确保执行初始化时Container存在
				return;
			}
			const chartInstace = echart.init(this.$refs.eCharts);
			chartInstace.setOption(this.options);
			// 视口大小变化时调用resize调整eCharts大小，如果Container尺寸并非自适应则无需设置
			window.onresize = function () {
				chartInstace.resize();
			};
			// ...add other operations or events
		}
	}
}
</script>

//修改前 
<div id="vcharts" style="width: 100%; height: 500px"></div>
//修改后
<div ref="vcharts" style="width: 100%; height: 500px"></div>
   
//修改前
let myChart = this.$echarts.init(document.getElementById("vcharts"));
//修改后
let myChart = this.$echarts.init(this.$refs.vcharts);