1. 首页

长知识!阿里用这样的组件开发大屏(二)

前文再续,书接上回:开眼界!阿里用这样的组件开发大屏(一)

Hi~ 我是前端学徒业枫,今天继续向大家分享可视化系列文章,介绍我们的前端开源图表库📈 CloudCharts(Github 欢迎试用&Issue&PR) 如何基于 G2 封装,解决其在大规模使用场景中遇到的问题,通过少量配置项即可绘制图表,服务内部近两百个产品和许多对外云产品。感兴趣的同学可以来官网在线体验:传送门

长知识!阿里用这样的组件开发大屏(二)

本期是系列第二篇,着重解答第三个问题:如何做到开箱即用,降低使用门槛?

为什么要做开箱即用?

为什么要做包装呢,直接用 G2 不是挺好的吗?

蚂蚁AntV G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。
JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个程序员都会上的平台,每天都可以在这里找到技术世界的Javascript头条内容
图形语法

G2 的功能十分强大,但初学者从零开始学习图形语法,理解“视觉通道”、“数据映射”等专业可视化概念成本太高。直接使用G2很难支撑业务快速发展,还有让设计师们头秃的视觉对接成本,所以我们决定做开箱即用包装,降低大家的使用成本。

解法思路

1、配置化

既然图形语法难学,那就将其变为简单的配置项,通过向React组件传入配置即可完成图表。

2、功能增强

在实际使用中,G2 有一些常用的功能点缺失,不能上手即用。我们补充了常用的功能,降低使用的难度。

3、智能化

功能越多,配置越复杂,我们尝试用一些智能化配置,降低用户编写配置项的难度。

1、配置化

我们在组件库内部增加了“翻译器”函数,将用户传入的配置项转化为图形语法。翻译器会与G2的图形语法划分匹配。

长知识!阿里用这样的组件开发大屏(二)

我们先来看看 G2 图形语法的有哪些部分:

  • 顶层配置 ✅
  • 数据度量 Scale
  • 坐标系 Crood
  • 坐标轴 Axis ✅
  • 提示信息 Tooltip ✅
  • 图例 Legend ✅
  • 辅助标记 Guide ✅
  • 图形元素 Geom
  • 文本标签 Label ✅

其中打✅ 的部分在大多数图表中逻辑一致,可以抽象为统一的函数:


// 设置X轴 xAxis(this, chart, config); // 设置Y轴 yAxis(this, chart, config); // 设置图例 legend(this, chart, config); // 设置tooltip tooltip(this, chart, config); // 设置辅助线,辅助背景区域 guide(this, chart, config);

例如在 xAxis 函数内,包装X轴相关的图形语法逻辑:


if (config.xAxis === false) { // 关闭 X 轴 chart.axis('x', false); return; } const { alias, autoRotate, labelFormatter } = config.xAxis || {}; const xAxisConfig = { title: null, label: { autoRotate, formatter: labelFormatter, }, }; // 开启坐标轴标题 if (alias) { xAxisConfig.title = { position: 'center', offset: 38, textStyle: { rotate: 0, }, }; } chart.axis('x', xAxisConfig);

通过组合不同的“翻译器”函数,我们可以很方便的维护图表库,而用户只需要传入少量配置项即可完成图表绘制。

长知识!阿里用这样的组件开发大屏(二)

2、功能增强

我们还在翻译器的基础上增加了许多功能,同时修复一些Bug,让其使用起来更顺畅:

自动适配尺寸大小

G2默认只适配宽度,我们增加了对高度的适配,自动读取外层元素的高度。

长知识!阿里用这样的组件开发大屏(二)

自动响应数据更新

Props 传入的数据更新会自动刷新数据。

长知识!阿里用这样的组件开发大屏(二)

自动响应配置更新

Props 传入的配置项更新会自动更新图表。

长知识!阿里用这样的组件开发大屏(二)

图例折叠

图例项数量过多会挤占图表展示的空间,我们增加了图例折叠的功能,能收起过多的图例,保证展示效果。

长知识!阿里用这样的组件开发大屏(二)

地图等比例绘制

使用 G2 绘制地图时,图形会填满画布导致变形,我们通过一些算法保证图形能按“正确”的尺寸绘制。具体代码可以参考我在这个Issue antvis/G2#1364 中的回复。

长知识!阿里用这样的组件开发大屏(二)

CSS 缩放不影响 Tooltip 定位

我们在一些大屏中对图表应用CSS缩放,发现缩放后图表 Tooltip 的位置会错位。因为开发计划的原因无法PR修复,我们通过AOP的方式解决了这个问题。具体代码可以参考我在这个Issue antvis/G2#912 中的回复。

3、智能化

随着我们包装的功能越来越多,对应的配置也会越来越复杂,逐渐演变为一种新的“图形语法”。我们尝试加入一些智能化配置,让用户可以用简单的配置项代替复杂的配置,由图表内部针对当前上下文计算出合适的配置项:

自动计算时间格式

我们发现很多用户的时间格式设置不合理,于是增加这个功能。当用户不指定格式时,在内部读取数据中的时间跨度和时间间隔,计算得比较合适的时间格式。

间隔 \ 跨度

大于一个月

大于一天

大于一小时

大于一分钟

大于一个月

YYYY-MM

-

-

-

大于一天

MM-DD

MM-DD

-

-

大于一小时

MM-DD HH:mm

MM-DD HH:mm

HH:mm

-

大于一分钟

MM-DD HH:mm

MM-DD HH:mm

HH:mm

HH:mm

图例过多自动折叠

前面提到了图例折叠功能,我们可以再进一步,让图表在图例占用一定高度时自动开启折叠展示功能。


// 自动适配图例折叠高度 const chartHeight = '图表高度'; const legendHeight = '图例总体高度'; const itemHeight = '图例单行高度'; // 行数最多占图表高度的三分之一,最小为2。 const collapseRow = Math.max(2, Math.round((chartHeight / itemHeight) / 3)); // 开启图例折叠 if (legendHeight > itemHeight * collapseRow) {...}

中场休息的分割线

经过上面的封装,图表库使用起来简单许多,大多数用户依靠文档和示例就能完成绘制。我们的目标基本达到啦~

由于篇幅有限,本期就到这里,我们下期再见!

📢 📢 大家对此有什么想法呢?欢迎在评论提出~


✏️ 下期预告

解答剩下两个问题,关注如何保证图表展示质量,并与上下游打通,形成完整的可视化操作链路。

4、如何收敛图表主题展现并快速切换主题?

5、如何低代码构建图表?

记得持续关注我们哦~

团队名片

作者:阿里巴巴TXD
链接:https://juejin.im/post/6887978301608951815

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:长知识!阿里用这样的组件开发大屏(二)

链接:https://www.javascriptc.com/4594.html

« LeetCode 091. 解码方法
带你快速手写自己的Vuex»
Flutter 中文教程资源

相关推荐

QR code