文章目录

• 前言
• 例子

前言

技术栈：echarts、lodash、resize-detector

例子

<template>
  <div ref="chartDom"></div>
</template>

<script>
import echarts from "echarts";
import debounce from "lodash/debounce"; // 引入个去抖工具
import { addListener, removeListener } from "resize-detector"; 
export default {
  props: {
    option: { // 父组件传来的echart配置
      type: Object,
      default: () => {}
    }
  },
  watch: {
    option(val) { 
      // 这里不用深度监听是因为图表数据量大，深度监听会非常损耗性能。
      // 解决方法：父组件修改option配置后，直接重新赋值 this.chartOption = { ...this.chartOption };
      this.chart.setOption(val);
    }
  },
  created() {
    this.resize = debounce(this.resize, 300); // 将resize附加一个去抖算法
  },
  mounted() {
    this.renderChart();
    // 因为在echart实例化的时候，会出现其他组件的标签样式还没生效，导致在样式生成的过程中，echart误将当前的高度当作渲染时的高度进行渲染，
    // 从而导致展示问题，所以应该在页面都渲染完后再去调用echart的重新计算大小的方法。
    addListener(this.$refs.chartDom, this.resize); // 开启监听echart的dom实例是否有改变，比如渲染完或者大小被强制改变都重新计算大小。
  },
  beforeDestroy() {
    // 防止内存泄漏
    removeListener(this.$refs.chartDom, this.resize);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    resize() { 
      console.log("resize");
      this.chart.resize();
    },
    renderChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.chartDom);
      this.chart.setOption(this.option);
    }
  }
};
</script>

注：

1. 没必要把echart实例放在data中，不需要作成响应式的，vue3底层的更新机制改变了，这样作会有问题。实在想要，就在data中直接this.chart = null，不要写在return中。

2. 想看echart误将当前的高度当作渲染时的高度进行渲染的问题，就在init() 的位置上打个断点。

3. 在类chart库中，echarts是比较悠久的，ant的chart也是echarts的原版人马打造，功能更多，学习成本也更大。

水~