Vue ECharts 二次渲染/重新渲染宽高为0，图表不显示，改变浏览器窗口大小即可显示图表的问题

ECharts：一个基于 JavaScript 的开源可视化图表库。

---

前言：这篇博客是基于父组件传值（option）给子组件即echart页面为基础的渲染图标的。话不多说，直接看代码

目录

一、介绍

二、解决办法

tips

 欢迎扫描下方二维码关注VX公众号

---

一、介绍

1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

二、解决办法

data() {
      return {
        chart: null,
        drawTiming: null
      };
    },
    watch: {
      options: {
        handler(options) {
          this.$nextTick(() => {
            this.initChart();
          });
        },
        deep: true,
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
      });
      window.addEventListener('resize', this.resize);
    },
    beforeUnmount() {
      window.removeEventListener('resize', this.resize);
      this.chart.dispose();
      this.chart = null;
      clearTimeout(this.drawTiming);
      this.drawTiming = null;
    },
    methods: {
      resize() {
        clearTimeout(this.drawTiming);
        this.drawTiming = setTimeout(() => {
          console.log('setTimeout');
          let { clientWidth: width, clientHeight: height } = this.$el.parentElement;
          this.chart.resize({ width, height });
        }, 200);
      },
      initChart() {
        // 初始化echart
        let { clientWidth: width, clientHeight: height } = this.$el.parentElement;
        this.chart.resize({ width, height });
        this.chart.setOption(this.options, true); // 设置true清空echart缓存
      },
    },

tips

        无论是在mouted还是watch初始echarts，一定要加上nextTick，否则很有可能找不到DOM节点，导致图表不能正常显示。

 欢迎扫描下方二维码关注VX公众号