Antd Pro 中嵌入多折线图表

安装 Ant Design Charts 依赖

参考

https://charts.ant.design/zh-CN/guide/start

tyarn add @ant-design/charts

多数据曲线

Ant Design Charts 并没有给出同一图表多条曲线的配置方法。

查了一下，Ant Design Charts 是基于 G2Plot 的，所以看一下 G2Plot 的文档。

Ant Design Charts 是 G2Plot 的 React 版本，基于 React、TypeScript 封装了所有的 G2Plot 图表，继承了 G2Plot 的所有配置，对 React 技术栈的同学更加友好

https://antv-g2plot.gitee.io/zh/examples/line/multiple#line-large-data

参考示例中的请求数据

多折线数据：

[
  {
    "year": "1850",
    "value": 0,
    "category": "Liquid fuel"
  },
  {
    "year": "1850",
    "value": 54,
    "category": "Solid fuel"
  },
  {
    "year": "1850",
    "value": 0,
    "category": "Gas fuel"
  },
  ...
]

单折线数据：

[
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
]

对比可见，多折线数据多了一个 category 字段。对应的需要在配置中添加：

seriesField: ‘category’,

如何异步加载数据

示例中是写死了数据，如何通过异步接口获取数据呢？

const Metrics: React.FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];

  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };

• 异步获取数据
  
• 在切换设备时，可以重新获取数据
  
• 使用 api 文件中的封装
  

React Function Component 中异步加载数据

找到的一个非常非常详细的教程，作者不愧是专业写教程的：

https://www.robinwieruch.de/react-hooks-fetch-data

前提是要 了解 React Effect Hook

如何判断 Antd Pro 搜索条件变化

https://procomponents.ant.design/components/table#%E6%9F%A5%E8%AF%A2%E8%A1%A8%E6%A0%BC

有个 ProTable 有个 beforeSearchSubmit 的属性。

beforeSearchSubmit={(args) => {
	console.log(args);
	return args;
}}

可以在这里对搜索参数进行记录，当发生变化时重新异步获取图表数据。

既然可以监听到提交搜索，那实际上我都不需要再使用 useEffect，可以直接这里发起请求，
然后将返回数据进行 setData。而且还能够在此处一并限制了时间区间范围。

      beforeSearchSubmit={(args) => {
        if (args.DeviceId) {
          setLineVisible(true);
          (async (args) => {
            let result = await getLineMetrics(args);
            setLineData(result);
          })(args);
        } else {
          setLineVisible(false);
        }
        return args;
      }}

如何设置字段别名

https://github.com/antvis/G2Plot/issues/702

鼠标悬浮时的 title 时间格式设置

https://antv-g2plot.gitee.io/zh/docs/api/plots/line#title

tooltip: {
  title: (title) => {
	return moment(title).format("YYYY-MM-DD HH:mm:ss.SSS");
  },
},

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式