1、echarts的自适应,
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() {
// 打日志检测resize的变化
this.chart.resize();
},
}
2、echarts的销毁,防止内存泄漏:
beforeDestroy() {
// 组件销毁的时候,要把组件的事件的组件监听移除掉
removeListener(this.$refs.chartDom, this.resize);
// 组件销毁的时候,销毁chart实例,防止内存泄漏
this.chart.dispose();
this.chart = null;
},
3、利用
// 防抖处理,提升性能
import debounce from "lodash/debounce";
created() {
// 防抖处理
this.resize = debounce(this.resize, 300);
},
4、完成。