查看原文
其他

【开源】Ant Design Charts:AntV 的 React 图表库

Ant Design 前端早读课 2021-12-13

前言

hi,在可视化方面又有一个选择。本期开源来自@Ant Design分享。

正文从这开始~~

导读

Ant Design Chart 作为蚂蚁中后台可视化组件库,从接入 G2Plot 开始就直接服务于蚂蚁各大系统、解决方案,在去年新增 G6 后,今年我们又注入了更多新鲜血液,保持着 Charts 该有的活力,一起来看看我们的改动吧。

AntV 是企业级数据可视化解决方案,今年 11.22 是 AntV 第五个品牌日,主题为「 格物·革悟 」。


「格物」意为在业务实践中不断深耕可视化技术,完善产品矩阵。今年将新增的三位成员:「F6」源于图可视化在移动端的实践,更小的体积,更快的响应速度。「XFlow」 源于图编辑业务,工程易用性的实践产物,基于 X6 引擎,拥抱 React 技术栈。「S2」则是在统计图表领域,根据业务的交叉表分析需求所产生的实践产物。

新面貌

官网

Ant Design Charts 作为 AntV 技术栈的 React 版图表类库,对内支撑着云凤碟和 TechUI, 对外和 Ant Design 形成闭环,但第一时间并没有使用 AntV 风格的官网,而是选择了和 antd 统一,主要原因如下

  • AntV 访问速度慢,耗时耗力

  • 本地启动慢,共建成本高

  • 不确定性,AntV 官网可能改版

在 AntV 新官网经历了一年的运行之后,我们收到了用户的大量反馈,有提改进意见的,有称赞的,这一年下来,官网已经趋于完善,短时间内不会再有调整,所以决定对 Ant Design Charts 官网进行升级,提升用户体验,解决用户可视化场景特有的述求。提供了在线编辑、图表快速切换、图表设备视图切换、层级文档、布局等新功能。

新成员

作为 AntV 的 React 版图表库,今年我们又迎来了两类全新的成员, 流程图和地理可视化,底层分别对应 X6 和 L7 ,解决了图编辑的述求,同时弥补了地理可视化相关的空缺。

流程图

千言万语抵不过一张图,流程图提供了足够的灵活度,内置了大部分通用功能,同时提供了丰富的个性化配置,可以通过调整配置和自定义满足各种业务需求,目前已在蚂蚁大型 BI 产品上充分验证。

地理可视化

地理可视化是 AntV 的重要一环,由于 L7 上手成本相对较高,团队倾力推出了 L7Plot ,降低用户使用成本的同时也不乏灵活性,给 React 用户送来更多关怀。

特性

  • 声明配置式地理的图表

  • 提供命令式动态交互 API

  • 图表种类及地图组件丰富

  • 图表交互能力强、3D 地理图表

  • 内置多粒度行政数据

  • 行政区域分布图支持多粒度钻取

新图表

  • 散点图

  • 热力图

  • 网格聚会图

  • 蜂窝聚会图

  • 区域图

  • 行政区域分布图

新体验

关系图

为了降低理解成本,今年我们对所有关系图进行了 API 的升级统一,具有足够的灵活性,你只需了解一个关系图 API,就可快速上手其它关系图,统一理念。同时新增了指标拆解图、来源去向图、组织架构图、辐射树图,支持默认层级、异步加载,并完善了节点自定义、个性化等功能。

拆包

为降低开发成本以及简化依赖,Ant Design Charts 从单包迁移到了 mono 模式,使其职责更加明确,使用者根据需求安装相关包即可,避免不必要的安装;开发阶段通过 lerna 进行了包抽取,避免了多目录安装依赖,减少磁盘空间的占用,并加快了构建速度;依赖清晰,易追踪;代码简洁,易维护;。

官网:https://charts.ant.design/

Github:https://github.com/ant-design/ant-design-charts

关于本文
原文:https://www.yuque.com/antv/blog/2021charts

: . Video Mini Program Like ,轻点两下取消赞 Wow ,轻点两下取消在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存