轻松解决Echarts+<el-tab-pane>的警告：Can't get DOM width or height

理解Echarts和el-tab-pane

Echarts是一个强大的JavaScript图表库，可用于创建各种类型的图表。el-tab-pane是Vue.js中常用的选项卡组件，可用于在页面中切换不同内容。

为什么会出现“Can't get DOM width or height”的警告

当在el-tab-pane组件中使用Echarts图表时，可能会出现“Can't get DOM width or height”的警告。这是因为Echarts需要获取DOM元素的宽度和高度来渲染图表，而在选项卡切换时，DOM元素的宽度和高度可能会发生变化。

解决“Can't get DOM width or height”的警告

要解决此警告，可以采用以下方法：

1. 在el-tab-pane组件中使用resize事件

在el-tab-pane组件中，可以使用resize事件来监听DOM元素的宽度和高度变化。当DOM元素的宽度和高度发生变化时，可以使用Echarts的resize方法来重新渲染图表。

<el-tab-pane
  @resize="handleResize"
>
  <echarts
    :options="options"
    ref="chart"
  />
</el-tab-pane>

export default {
  methods: {
    handleResize() {
      this.$refs.chart.resize();
    },
  },
};

2. 在Echarts图表中使用width和height选项

在Echarts图表中，可以使用width和height选项来指定图表的宽度和高度。这样，Echarts就会根据指定的宽度和高度来渲染图表，而不会出现“Can't get DOM width or height”的警告。

const options = {
  width: '100%',
  height: '300px',
  // 其他图表选项
};

3. 在Echarts图表中使用lazy

在Echarts图表中，可以使用lazy选项来延迟渲染图表。这样，Echarts就会在DOM元素的宽度和高度确定后才渲染图表，从而避免出现“Can't get DOM width or height”的警告。

const options = {
  lazy: true,
  // 其他图表选项
};

4. 在Echarts图表中使用watch

在Vue.js中，可以使用watch选项来监听Echarts图表的宽度和高度变化。当Echarts图表的宽度和高度发生变化时，可以使用Echarts的resize方法来重新渲染图表。

export default {
  watch: {
    '$refs.chart.offsetWidth'(val) {
      this.$refs.chart.resize();
    },
    '$refs.chart.offsetHeight'(val) {
      this.$refs.chart.resize();
    },
  },
};

注意：当设置了默认tab这是无法监听到的。 但是这需要手动点击tab才能监听到。 也是不行。 这样就不会出现警告了。