图表

chenshuai2144zombieJperanyycjcl868
上次修改时间:2021-05-07 14:47:83

很多时候我们都需要一个美观大方的图表页来充当首页,在快速展示大盘信息的同时还能吸引眼球,提升系统的质感。所以我们也做了一个图表库 Ant Design Charts。

Ant Design ChartsG2Plot 的 React 版本,基于 React、TypeScript 封装了所有的 G2Plot 图表,继承了 G2Plot 的所有配置,对 React 技术栈的同学更加友好,同一团队开发

  • 开箱即用:默认呈现高质量图表,将对开发体验及用户体验的研究沉淀入图表的默认配置项
  • 易于配置:用户能够根据具体业务需要较为轻松的调整图表细节
  • 体验良好:视觉和交互体验聚焦于如何能够"展示和发现信息"这一图表本源的职能上

像使用组件一样生成图表,开箱即用,你甚至不需要修改任何配置项就可以满足需求,真正的默认好用,有没有心动想试试的感觉?

image.png

图表的选型上我们做过很多挣扎,许多技术栈有些混乱。如果你想要了解,可以看看这个文档

快速上手

如果使用 yarn 或者 npm 可以直接安装:

 npm install @ant-design/charts --save
 // yarn
 yarn add @ant-design/charts

有些时候图表体积比较大就需要通过 CDN 的方式来加快加载。 CDN 模式下由于底层依赖不一样,为了降低包体积,从 1.0.5 版本开始,组织架构图、流程图、资金流向图、缩进树图被打包到 charts_g6.min.js 里,其它图表打包到 charts.min.js 里,使用时按需引入即可。

我们首先需要在 config/config.ts 中的 script 中配置:

script: [
  'https://unpkg.com/[email protected]/umd/react.production.min.js',
  'https://unpkg.com/[email protected]/umd/react-dom.production.min.js',
  'https://unpkg.com/@ant-design/[email protected]/dist/charts.min.js',
  //使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用
  'https://unpkg.com/@ant-design/[email protected]/dist/charts_g6.min.js',
];

同时在 config/config.ts 中的 externals 中配置:

externals: {
  react: 'React',
  'react-dom': 'ReactDOM',
  "@ant-design/charts": "charts"
};

简单使用

接下来我们就可以在代码中使用了。

import React from 'react';
import { Line } from '@ant-design/charts';

const Page: 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',
    },
  };
  return <Line {...config} />;
};
export default Page;

效果如下:

charts

图表类型

ant design chart 有 27 种图表类型,上百种图表基本可以满足所有开发的需求。你可以在 官网 看到所有的图表,并且查询它们的 API。