echarts的使用

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、完成。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容