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

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

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

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

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

option的封裝思路

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

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

eCharts組件封裝要點

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

<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) {
				// 確保執(zhí)行初始化時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的優(yōu)勢，比起使用選取dom的方式方便很多

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

問題描述

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

解決方法

1、把id改成動態(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);