增长分析(DataFinder)是火山引擎旗下的一站式用户分析与运营平台,为企业提供数字化消费者行为分析洞见,优化数字化触点、用户体验,支撑精细化用户运营,发现业务的关键增长点,提升企业效益。
VisActor是字节跳动开源的面向叙事的智能可视化解决方案,由 VChart、VTable、VGrammar、VMind、VRender等多个组件组成。本文将为大家一文详解DataFinder的可视化升级实践,呈现DataFinder 将原有图表升级到 VChart 的思考及过程。
注:文中所含图表均为脱敏后数据,非真实数据。
作者:秉书
火山引擎DataFinder前端团队
图:DataFinder主要产品场景
01
背景
作为一个增长分析平台,DataFinder具备强大的数据采集、数据分析能力,而数据及数据分析的结果,最终需要通过精准美观的可视化形式向用户展现。因此,数据可视化在 DataFinder 的产品能力中,扮演了重要的角色。
在过去,DataFinder中大量的数据可视化场景通过其他图表库实现。
2023年6月,VisActor开源,并对图表库进行了全面更新,更名为VChart。新图表库在易用性、性能、动画、标注、扩展能力等方面都有显著提升。
DataFinder团队非常关注新版图表库VChart,希望将新版图表库更强大的能力应用到产品中,为DataFinder 的用户提供更好的使用体验。同时,团队也希望以此为契机,为DataFinder 的所有图表制定统一的规范化样式,并修复产品中与图表相关的历史遗留问题。
经过全面评估,DataFinder团队决定将图表库升级到VChart。在VisActor团队的协助下,顺利地在预期时间内完成了升级工作,并达到了预期的产品收益。如果你正在寻找一些参考和启示,或是想要了解更多关于数据可视化在业务中的实践经验,请继续阅读~
02
探索的起点
作为一个增长分析平台,DataFinder具备强大的数据采集、数据分析能力,而数据及数据分析的结果,最终需要通过精准美观的可视化形式向用户展现。因此, 数据可视化在 DataFinder 的产品能力中,扮演了重要的角色。
/ DataFinder可视化形式和场景
DataFinder 为用户提供了丰富的行为分析能力,如事件分析、留存分析、转化分析、分布分析、成分分析、用户路径分析、归因分析、用户分析、LTV分析等等,数据分析结果通过各种类型的图表呈现给用户,以方便用户更直观高效地了解数据的趋势、关系和分布。
在 DataFinder 中,常用的图表类型包括折线图、柱状图、条型图、饼图、面积图、双轴图、桑基图等,不同类型的图表适用于不同的数据类型和分析目的。
例如,用户可以使用折线图来展示数据随时间变化的趋势,用柱状图展示不同类别数据的数值对比,用饼图展示各类数据的占比,也可以通过双轴图将不同类型的数据展示在同一个图表中。
/ 现状和问题
在功能迭代的过程中,DataFinder在图表的使用上积存了一些历史问题。
● 性能问题
在页面数据量较大、图表数量较多的情况下,会出现页面初次加载的卡顿和后续交互的卡顿。
●
交互问题
在图表交互效果上需要优化,如图例切换时的动画、提示信息 Tooltip 的显示、以及图表的入场、离场动画。
● 样式规范问题
DataFinder 各使用场景下的各类型的图表种类繁多,但是各类图表没有一个统一的样式规范,影响 DataFinder 整体的一致性和美观性。
/ VChart 调研
带着以上问题,DataFinder与VisActor团队的同学进行了详细的交流,了解到新版图表库 VChart 的诸多优势:
-
设计原则和理念:更易用、更合理、更规范、更高效
-
架构优化:做到性能翻倍、功能增强、灵活性和扩展性增强
-
设计提升:专业的设计师、更强大和专业的主题功能
-
扩展能力:图元、组件、图表全方面提供扩展机制,便于业务自定义需求
经过评估,确认此次升级会为 DataFinder 在性能、美观度、交互效果等方面带来收益,解决目前存在的种种问题,并且考虑到后续潜在的与可视化相关的需求,最终决定开始升级的工作。
03
升级过程
/ 整体原则与方案
图表库的升级将会涵盖 DataFinder 中所有的业务场景,影响范围广,工作量大,因此在开始升级的工作之前,我们需要对升级方案进行整体全面的设计。本次升级以最小化业务逻辑修改成本为主要原则,兼顾交互、视觉、性能上的优化,并保证升级质量达标、平稳上线。
图表库的业务层封装
在 DataFinder 中,VChart对图表库进行了一层业务封装。通过封装通用的业务逻辑,可以减少重复业务代码,减轻业务开发负担,同时,图表库的封装也方便 DataFinder 内图表的统一管理和图表库的升级。
图表库升级的第一步,就是将 DataFinder 的图表库业务封装组件从依赖旧图表库的 实现改为依赖 VChart 实现。
在新版组件的设计上,业务接口尽可能与旧版兼容,以减少使用者的升级成本。在开发过程中和上线之初,我们也保留了切换旧版本的能力,使用者可以通过参数控制使用新版或旧版的图表组件,方便开发时多业务场景的逐个进行、以及在可能发现问题时能够回退到旧版本。
自定义图表组件的实现
图表的图例组件和提示信息组件在 DataFinder 中有许多定制能力,因此是使用自定义组件接口来实现的。
在原本的实现中,由于设计上的缺陷,图例组件和提示信息组件在交互上存在一些问题,在此次升级中,借助更完善易用的新版图表库 API,修复了这些历史问题。
●
更合理的图例切换效果
在旧版本中,图例的操作由业务代码实现,这会导致在图例切换时图表的全量更新,不能展示正确的图例切换动画;而且也会导致渲染性能降低,增加业务逻辑的负担。
在新版中,将图例的交互逻辑全部由图表封装层实现,既优化了交互效果,又减轻了各业务逻辑侧的负担。
**●
更顺滑的提示信息展示**
我们需要对图表库提供的自定义提示信息接口进行封装,实现其的显示、消失、移动、固定等基础交互,并对数据进行初步的处理。在新版提示信息的开发中,也修复了旧版本不跟手、边界处造成页面抖动的问题。
业务场景的逐个适配
新版图表封装组件开发完成后,下一步需要将各业务场景的逐个适配到新组件上来。
经统计,DataFinder 涉及的图表类型主要包括 线图、柱状图、堆积柱状图、面积图、箱线图、饼图、仪表盘、以及各种组合图等,不同的业务使用场景共计 60 余个。
● 简单场景的适配
在大部分的简单使用场景中,升级涉及到的仅是图表 spec 中相关字段名称、格式的修改,如
-
stackBy、groups -> xField
-
nameField -> categoryField
-
legend、dataZoom、markLine、color 等配置项的格式变化
这部分的业务升级成本较低,对照可视化团队提供的升级指南清单,可以在较短时间内完成业务逻辑的改造。
● 复杂场景的适配
在一些复杂场景下,会涉及图表类型的修改和数据处理的修改。
如组合图在VChart中使用统一的 common 类型,舍弃了旧版本中双轴图、xy组合图等的区分,且 spec 格式发生了较大的变动,这时就需要对业务逻辑进行较大的改动,甚至重写业务逻辑。
质量保证
本次升级覆盖 DataFinder 所有图表使用场景,涉及面积广,因此需要严格把控质量,保证上线平稳。
因此,DataFinder研发团队在启动开发前,对技术方案进行详细组内的讨论;在开发和测试过程中,梳理了详细的 checklist 清单,研发自测,提供提测文档;在升级完成后,选取了 Finder 图表库使用的代表场景,录入到VisActor团队的用例库,保证后续版本升级的稳定性。
04
收获与成果
从启动开始,历经了一个月的时间,DataFinder 的新版可视化顺利上线,宣告整个图表升级之旅圆满完成 ,图表库升级正式上线后,在性能、样式、交互上都为 DataFinder 带来了新的改变。
/ 性能提升
我们选取几个典型的多图表看板页面,对比升级前后的性能数据。经分析,页面的整体加载时长平均下降 30% ,页面初始化时的卡顿时长平均下降约 20% ,整体性能有了明显的提升。
上报的统计数据也表明,在新版图表库上线后,看板的平均首屏加载时长TTU指标有了约1000ms的下降。
/ 交互效果优化
新版图例组件、提示信息组件的实现,也为DataFinder的交互效果带来了很大的提升。
● 图例组件
原效果:图例选中/取消选中时全量刷新没有过渡动画、视觉体验差
VChart 效果:局部更新,性能更好;平滑的过渡动画,更美观
● 提示信息组件
原效果:不跟手、边界处页面抖动
VChart效果:更顺畅、无页面抖动
/ 规范化的可视化展示
除了新图表库主题在美观度、配色、布局、动画等方面的提升之外,在升级过程中,制定了更适合于 DataFinder 的可视化规范,并将这套规范全面落地。这为 DataFinder 带来了更和谐统一的配色、更一致的样式、以及更合理的布局,在很大程度上提升了 DataFinder 可视化的科学性和美观性。
● eg1:文字标签布局不统一,点、线样式不统一
升级前
升级后
● eg2: 文字标签布局一致,点、线样式一致,图例样式不一致
升级前
升级后
● eg3: 图例样式一致,点、线等大小不一致
升级前
升级后
05
归纳与展望
/ 未来展望
目前,DataFinder 的图表库已经完成了到 VChart 的升级,未来,将有更多的与可视化相关的需求在 DataFinder 中落地,为用户提供更加科学、丰富、美观的数据可视化形式。
/ 欢迎交流
欢迎大家与VisActor进行交流
●VisActor 微信订阅号留言(可以通过订阅号菜单加入微信群)
●VisActor官网:www.visactor.io/
今夜无月,期待你点亮星空,感谢
Github:https://github.com/VisActor/VChart
往期推荐
点击阅读原文,了解更多