1、echarts的自適應(yīng)袁稽,
import { addListener, removeListener } from "resize-detector";
mounted() {
this.renderChart();
addListener(this.$refs.chartDom, this.resize);
},
methods: {
renderChart() {
this.chart = echarts.init(this.$refs.chartDom);
},
// 配合防抖處理
resize() {
// 打日志檢測(cè)resize的變化
this.chart.resize();
},
}
2勿璃、echarts的銷(xiāo)毀,防止內(nèi)存泄漏:
beforeDestroy() {
// 組件銷(xiāo)毀的時(shí)候,要把組件的事件的組件監(jiān)聽(tīng)移除掉
removeListener(this.$refs.chartDom, this.resize);
// 組件銷(xiāo)毀的時(shí)候补疑,銷(xiāo)毀chart實(shí)例歧沪,防止內(nèi)存泄漏
this.chart.dispose();
this.chart = null;
},
3、利用
// 防抖處理莲组,提升性能
import debounce from "lodash/debounce";
created() {
// 防抖處理
this.resize = debounce(this.resize, 300);
},
4诊胞、完成。