改变浏览器宽度时水波图报错

[zsxing99]

BizCharts Version: 4

code:

              <LiquidChart
                max={100}
                min={0}
                value={20}
              />

error:

TypeError: preData.forEach is not a function

BasePlot.diffData
./node_modules/bizcharts/umd/BizCharts.js:3439
  3436 | }
  3437 | 
  3438 | var isEqual = true;
> 3439 | preData.forEach(function (element, index) {
       | ^  3440 |   if (!Object(_utils_shallowEqual__WEBPACK_IMPORTED_MODULE_16__[/* default */ "a"])(element, data[index])) {
  3441 |     isEqual = false;
  3442 |   }

这个地方我怀疑是 preData 大部分是array 但是这里水波图是一个单独的数字 ， 所以在跑 diff 的时候报错了。 但是除了在我的项目里面， 其他地方都复现不出来。。。

[zsxing99]

workaround：用 antv 的水波图自己写了一个

代码放这里：

import React, {useRef, useEffect} from "react";
import { Liquid } from '@antv/g2plot';

const WaterWave = ({ value }) => {
  const container = useRef(null);

  useEffect(() => {
    if (!container.current) {
      return;
    }
    const liquidPlot = new Liquid(container.current, {
      percent: value,
      height: 200
    });
    liquidPlot.render();
  }, [container]);

  return (
      <div ref={container} />
  );
};
export default WaterWave;

这是综合几种方案 bundle size 最小的 workaround， 而且UI完全一样