首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue中封装eCharts组件及优化

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

2024-03-12 08:33:43 作者：Lim_J

这篇文章主要介绍了Vue中封装eCharts组件及优化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue封装eCharts组件及优化

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

option的封装思路

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

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

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的方式方便很多

Vue封装echarts组件多次调用出现id重复

问题描述

封装的echarts组件多次被调用，id重复，导致页面不渲染、数据覆盖等一系列问题

解决方法

1、把id改成动态传参（这里就不作代码展示了）

2、把id换成ref

//修改前 
<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);

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。