Vue中封装eCharts组件及优化

Vue中封装eCharts组件及优化

Vue中想要使用eCharts作为一个单独的组件进行封装，一般需要考虑的是option的封装、视口变化或数据变化更新eCharts视图，以及在组件销毁之前注销eCharts组件以释放其占用的内存。

1. option的封装思路
   一般情况下，一个业务模块内eCharts的风格只有固定的几种内容，因此仅需要对固定的几种模式进行封装即可，我这里采用生成option的方式节约代码量

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

2. eCharts组件封装要点
   eCharts组件和直接在js中更新eCharts有些许不同，js调用时，数据更新需要调用API中的setOption，Vue组件中想要更新组件，由于数据并不是挂载到DOM属性上的，因此需要用watch监听数据更新

<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>

这里使用ref去找Container元素是利用Vue的优势，比起使用选取dom的方式方便很多