解锁FinClip上开发图表新姿势

4,147 阅读5分钟

最近关注的几个前端公众号频频提到 FinClip ,抱着学(mo)习(yu)的心态,我决定一探究竟。

1 FinClip 简介

FinClip是一款小程序容器技术,其使得任何 App 均可通过引入此小程序容器来获得运行小程序的能力,使研发人员能够快速响应一线业务诉求,达到降本增效的目的,进一步提升移动应用业务运营能力。

通俗易懂来讲就是:用了它,你家的APP也能像微信、支付宝等平台一样跑自家的小程序,就问你香不香!

2 FinClip 亮点功能

  • 手机,电脑,IoT 哪都能用

    FinClip 自带多终端小程序 SDK,简单集成后即可在 iPhone,Android,Windows,Linux,macOS,国产操作系统或平台下的应用中运行你的小程序。

  • App 集成体积更加轻量

    市面上常见的小程序厂商,在引入 SDK 后可能会导致移动 App 体积增长至少 10MB,而选择集成 FinClip SDK 后,安装包的体积仅仅增大了不到 3MB,用户在安装 App 时不再需要因为庞大的应用体积与有限的设备内存感到苦恼。

  • 从开发到调试的工具一应俱全

    FinClip 提供小程序从「开发」「调试」到「发布」的完善生态工具。不仅 IDE 可以支持小程序在线编译 ,开发文档和“手把手教程”还能快速带你入门,预览代码效果。此外还有开发者社群和博客等你来看。

  • 语法遵循主流小程序规范

    企业 App 集成 FinClip 小程序运行时 SDK,即可将微信小程序上架至自身 App,FinClip 遵循微信与主流小程序开发标准与规范, 无需额外学习成本,体验效果与原有小程序保持一致。

  • 扩展方式可基于业务灵活配置

    企业可根据自己的业务灵活配置 API 和第三方 SDK 插件,同时提供开放的 API 接口,支持二次开发。

  • 原生支持自定义规则引擎

    FinClip提供了面向业务与运营的灰度发布功能,可针对营销场景、用户画像、功能开发阶段等不同需求,进行小程序的精准、分群、分时投放,满足产品迭代、运营活动、开发管理的多种诉求。同时包含 APM 数据上报系统,实时了解功能投放数据。

image.png

然而,不管是在微信平台还是FinClip平台上开发可视化报表功能,都是比较困难的。有同学开始疑惑,市面上有很多可视化工具例如 ECharts、F2 等知名大厂的图表库,还不足以支撑吗?

首先不得不说 ECharts、F2 是真的太强大了,但如果想把 ECharts 或者 F2 运行到各个小程序平台,并且要保持各端显示效果一致,这还真是一件非常难的事情。即便成功运行到小程序端,还涉及到兼容性问题、包体积过大问题、原生小程序canvas组件层级过高问题、长时间运行内存溢出问题以及页面大量调用图表时的页面性能等问题。

而今天介绍的uCharts ,正是为了解决这些痛点问题的!

3 uCharts 简介

uCharts 是一款基于canvas API开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro / FinClip)、以及各种小程序(微信/支付宝/FinClip/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等更多支持 canvas API 的平台。

微信截图_20220419165652.png

4 uCharts 优点

  • 横跨各大小程序及前端框架,兼容性最好,增强一致性体验
  • 体积小巧、图表丰富,压缩后仅 120kb,响应速度超快
  • 提供在线定制,我们还可以更小、更快
  • 配置简单、调用方便,即便新手也不迷路
  • 提供可视化在线配置工具,让天下没有难配的图表
  • 小程序原生组件与 canvas2d 一键切换,渲染模式随您选
  • 独特支持横屏模式,小手机也可以看大图表
  • 源码开源免费、通俗易懂,特殊需求新手也可以改源码
  • 官方社群 7 X 24 小时在线支持,不懂的您尽管问,秒回

5 使用 uCharts 姿势

uCharts作者为了让用户使用起来更加便捷,可谓耗尽心思,其官网提供了详细的文档外,还支持强大的在线生成工具,今天随着小编一起领略风骚!

5.1 使用指南

11.png

如图,uCharts提供了原生引入方式与组件引入方式,相应的引入说明文档都提及,除此之外,还提供了大量的文字说明与注意事项

5.2 在线演示 == CV代码

image.png

令人心动的是:uCharts提供了许多图表类型的案例,每个案例又有许多特殊的配置用法,使得新手在开发时能面面俱到,而且能随时查看各个图表的代码

5.3 组件文档

33.png

组件文档可以说是相当丰富,其中涉及:组件props、基础配置、X轴配置、Y轴配置、图例配置、扩展配置、提示窗配置、组件事件配置、数据配置;仅从上图的一个配置项组件props就能看到其下方有多达十几项细致配置,如此丰富的配置也决定了uCharts的可拓展性强

5.4 uCharts相关

444.gif