很多时候我们都需要一个美观大方的图表页来充当首页,在快速展示大盘信息的同时还能吸引眼球,提升系统的质感。所以我们也做了一个图表库 Ant Design Charts。
Ant Design Charts 是 G2Plot 的 React 版本,基于 React、TypeScript 封装了所有的 G2Plot 图表,继承了 G2Plot 的所有配置,对 React 技术栈的同学更加友好,统一团队开发。
开箱即用:默认呈现高质量图表,将对开发体验及用户体验的研究沉淀入图表的默认配置项
易于配置:用户能够根据具体业务需要较为轻松的调整图表细节
体验良好:视觉和交互体验聚焦于如何能够"展示和发现信息"这一图表本源的职能上
像使用组件一样生成图表,开箱即用,你甚至不需要修改任何配置项就可以满足需求,真正的默认好用,有没有心动想试试的感觉?
图表的选型上我们做过很多挣扎,许多技术栈有些混乱。如果你想要了解,可以看看这个文档。
如果使用 yarn 或者 npm 可以直接安装:
有些时候图表体积比较大就需要通过 CDN 的方式来加快加载。 CDN 模式下由于底层依赖不一样,为了降低包体积,从 1.0.5 版本开始,组织架构图、流程图、资金流向图、缩进树图被打包到 charts_g6.min.js 里,其它图表打包到 charts.min.js 里,使用时按需引入即可。
我们首先需要在 config/config.ts
中的 scripts
中配置:
同时在 config/config.ts
中的 externals
中配置:
接下来我们就可以在代码中使用了。
效果如下:
ant design chart 有 27 种图表类型,上百种图表基本可以满足所有开发的需求。你可以在 官网 看到所有的图表,并且查询它们的 API。