快捷導(dǎo)航

Vue中封裝eCharts組件及優(yōu)化方式

更新時(shí)間：2024年03月12日 08:36:26 作者：Lim_J

這篇文章主要介紹了Vue中封裝eCharts組件及優(yōu)化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue封裝eCharts組件及優(yōu)化

Vue中想要使用eCharts作為一個(gè)單獨(dú)的組件進(jìn)行封裝，一般需要考慮的是option的封裝、視口變化或數(shù)據(jù)變化更新eCharts視圖，以及在組件銷毀之前注銷eCharts組件以釋放其占用的內(nèi)存。

option的封裝思路

一般情況下，一個(gè)業(yè)務(wù)模塊內(nèi)eCharts的風(fēng)格只有固定的幾種內(nèi)容，因此僅需要對(duì)固定的幾種模式進(jìn)行封裝即可，我這里采用生成option的方式節(jié)約代碼量

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

eCharts組件封裝要點(diǎn)

eCharts組件和直接在js中更新eCharts有些許不同，js調(diào)用時(shí)，數(shù)據(jù)更新需要調(diào)用API中的setOption，Vue組件中想要更新組件，由于數(shù)據(jù)并不是掛載到DOM屬性上的，因此需要用watch監(jiān)聽數(shù)據(jù)更新

<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在初始化的時(shí)候有時(shí)捕捉不到元素高度，這里手動(dòng)設(shè)置一下
        this.$refs.eCharts.style.height = this.height;
        this.$nextTick(() => {
            this.initChart(this.options);
        });
    },
    beforeDestroy() {
    	// 組件銷毀時(shí)主動(dòng)釋放eCharts內(nèi)存空間
        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) {
				// 確保執(zhí)行初始化時(shí)Container存在
				return;
			}
			const chartInstace = echart.init(this.$refs.eCharts);
			chartInstace.setOption(this.options);
			// 視口大小變化時(shí)調(diào)用resize調(diào)整eCharts大小，如果Container尺寸并非自適應(yīng)則無需設(shè)置
			window.onresize = function () {
				chartInstace.resize();
			};
			// ...add other operations or events
		}
	}
}
</script>

這里使用ref去找Container元素是利用Vue的優(yōu)勢，比起使用選取dom的方式方便很多

Vue封裝echarts組件多次調(diào)用出現(xiàn)id重復(fù)

問題描述

封裝的echarts組件多次被調(diào)用，id重復(fù)，導(dǎo)致頁面不渲染、數(shù)據(jù)覆蓋等一系列問題

解決方法

1、把id改成動(dòng)態(tài)傳參（這里就不作代碼展示了）

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