Fixed echart, echarts-for-react Can't get DOM width or height. problem

报错信息: Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

对应 echart 官方的 issue

我目前的解决方案: github.com/apache/echa…, 如下:

给你的 echart DOM 设置一个 height 和 width. echartjs 原码中, 先去获取 ReactECharts 组件的 height 与 width 属性. 如果没有得到这个值, 才会去计算, 计算的时候无法获取 DOM 而报错. 所以我们可以提前设置好height 与 width 属性, 来避免报错.

添加这样一段 style: style={{ width: 3000, height: 400, minWidth: 800, minHeight: 400 }}

import ReactECharts from "echarts-for-react";

const option = {
  // ...
  // option defines
  // ...
}

<ReactECharts
      option={option}
      style={{ width: 800, height: 400, minWidth: 800, minHeight: 400 }}
    />

如果你想自适应整个宽度, 你可以用"100vw" 替换 800. 你也可以 calc() 函数来切除多余的200px, 比如: "calc(100vw - 200px)"

希望 it saved your time.