React 组件中如何自动更新图表数据？

Question

使用React封装的图表组件，如何实现自动更新图表数据？

Answer 1

解决方案 Solution

在VChart中，可以调用updateSpec或者updateData进行图表更新。

你可以在初始化图表实例时，在React组件中使用ref保存图表实例。随后使用useEffect，将deps设置为数据更新的依赖项，在回调函数中调用图表实例的updateData实现数据更新。

VChart还提供了React-VChart封装：

https://www.visactor.io/vchart/guide/tutorial_docs/Cross-term...

你可以参考下面的代码示例，使用React-VChart实现图表数据更新。

代码示例 Code Example

代码参考 Code Example

点击 Update the data of bar chart 按钮，可以实现更新图表数据。

import "./styles.css";
import { BarChart } from "./BarChart";
import { LineChart } from "./LineChart";
import { AreaChart } from "./AreaChart";
import { getBarData } from "./bar-data";
import { useState } from "react";

const colorMaps = {
  default: [
    "#6690F2",
    "#70D6A3",
    "#B4E6E2",
    "#63B5FC",
    "#FF8F62",
    "#FFDC83",
    "#BCC5FD",
    "#A29BFE",
    "#63C4C7",
    "#F68484"
  ],
  red: [
    "#c12e34",
    "#e6b600",
    "#0098d9",
    "#2b821d",
    "#005eaa",
    "#339ca8",
    "#cda819",
    "#32a487"
  ]
};

export default function App() {
  const [barData, setBarData] = useState<any[]>(getBarData());
  const [colors, setColors] = useState<string[]>(colorMaps.default);
  const handleUpdateBarData = () => {
    setBarData(getBarData());
  };

  const handleUpdateColors = () => {
    if (colors === colorMaps.default) {
      setColors(colorMaps.red);
    } else {
      setColors(colorMaps.default);
    }
  };

  return (
    <div className="App">
      <div>
        <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/logo_500_200_light.png" />
      </div>
      <button onClick={handleUpdateBarData}>
        Update the data of bar chart
      </button>

      <button onClick={handleUpdateColors}>update colors</button>

      <h2>A Bar Chart</h2>

      <BarChart data={barData} colors={colors} />

      <h2>A Line Chart</h2>
      <LineChart colors={colors} />

      <h2>A Area Chart</h2>
      <AreaChart colors={colors} />
    </div>
  );
}

结果展示 Results

在线效果参考：https://codesandbox.io/s/visactor-vchart-react-demo-forked-js...

相关文档 Related Documentation

react-vchart教程：https://www.visactor.io/vchart/guide/tutorial_docs/Cross-term...

github：https://github.com/VisActor/VChart

Answer 2

作为组件肯定有传入的数据对象，比如叫 data；

那在父组件起一个定时器，每几秒进行 setData 即可。

然后在 react 图表组件里，监听数据变化，Echarts 重新进行 setOptions 即可。

Answer 3

这个vchart和大名鼎鼎的echarts,哪个好用些啊