Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

Bizcharts使用value属性报错

使用AntV的react版本图表Bizcharts的仪表盘时遇到问题,无法使用value属性,只要写上value就报错,报错如下图所示

image.png

代码就是官网的源示例代码
仪表盘示例

请问有什么解决的办法吗?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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完全一样。
请参考:https://github.com/alibaba/Bi...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...