阅读 10749
开眼界!阿里用这样的组件开发大屏(三)

开眼界!阿里用这样的组件开发大屏(三)

前文再续,书接上回:

开眼界!阿里用这样的组件开发大屏(一)

开眼界!阿里用这样的组件开发大屏(二)


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

本期是系列最后一篇,解答最后两个问题:

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

如何低代码构建图表?

什么是图表主题?

CloudCharts 是一个数据驱动型图表,数据决定了图表展示的内容。而主题系统控制着图表的非数据元素外观,它不能改变图表的感官性质,但是可以使图表变得更具美感,满足整体视觉一致性的要求。

主题控制的细节包括图表的坐标轴、图例、网格线和几何标记的颜色搭配等样式。

我们默认提供了两种主题,分别针对亮色和暗色场景:

主题切换

如何实现主题系统?

CloudCharts 的主题系统主要由 主题包、主题管理器和组件调用 三部分组成:

1、主题包

主题包是由多个主题变量值组成的KV-Map,通常是设计师针对某个场景给定颜色值、字体字号、间距等。如默认提供的亮色主题和暗色主题就是两个主题包。类似这样的:

{
  "widgets-color-background": "#ffffff",
  "widgets-color-blue": "#3f90ff",
  "widgets-color-orange": "#fa8c15",
  ...
}
复制代码

2、主题管理器

管理器负责主题包的CUR(增加、修改和查询,这里没有删除),对外暴露接口,让用户可以切换主题、设置自定义主题包。同时让内部的图表组件能够获取当前的主题包,进行绘制。

// 获取主题包,不传名称则返回当前主题
function getTheme(name) { ... }

// 设置主题包,传入名称或主题包
function setTheme(nameOrTheme) { ... }

// 定义一个map,存储当前主题变量和 get/set 方法
const themes = {
  // 接口方法
  getTheme,
  setTheme,
  // 主题变量
  ...
};

// themes 直接导出,通过引用保证各组件间拿到的主题是一致的
export default themes;
复制代码

3、组件调用

图表库中存在 G2组件和自定义React组件,基于G2的组件需要使用JS主题变量,而自定义的React组件使用CSS主题变量。所以有两种调用方式:JS调用和CSS调用。

JS调用

在管理器中我们 export 了 themes 对象,该对象可以直接获取当前的主题变量,在JS中调用就很简单了:

import themes from '../themes';

// 使用变量
const mainColor = themes['widgets-color-blue'];
复制代码

CSS调用

在图表初始化时,我们会把主题变量转换为CSS变量(CSS variable),通过style标签插入文档中,这样自定义React组件的CSS中就能直接使用主题包的CSS变量了:

// HTML 中插入
<style>
  .cloud-charts {
    --widgets-color-background: #ffffff;
    --widgets-color-blue: #3f90ff;
    --widgets-color-orange: #fa8c15;
    ...
  }
</style>

// CSS 调用
.cloud-wcontainer {
  background: var(--widgets-color-background);
  padding: var(--widgets-container-padding);
  ...
}
复制代码

主题管理器还会在 setTheme 调用时,动态更新CSS变量,保证主题一致性。

通过这三部分处理,我们的主题系统就基本完成了。

增强 - 主题设计器

我们的主题包依赖设计师提供视觉方案,以前需要设计师先出设计稿,前端根据设计稿调整主题变量。双方联调费时费力,如果只是一两个场景还好,但随着业务发展场景越来越多,这么做效率太低。

所以我们做了“主题设计器”这个小工具:

设计师可以在线配置图表主题包,动态查看主题包在不同组件的效果。工具还能通过算法辅助,在修改主色后自动补充部分色板,减少设计工作量。设计完成后,工具直接导出前端可以使用的主题包,让整个设计交付流程更简便,所见即所得。

大家可以在官网直接体验:主题设计器

低代码图表方案

经过包装后的图表库使用起来比较简单,参考示例和文档就能快速完成开发。但有没有更简单的方案,不看文档也能配置好图表呢?

答案是有的,那就是 可视化编辑

通过可视化的表单配置,生成图表所需的配置项。开发者点点鼠标就能完成图表配置,一键复制到自己的项目中使用。算是比较简便的低代码方案。

而且图表库是配置化的,也可以很方便的接入各种更复杂的低代码搭建系统。例如我们将物料输出到 宜搭 和 DataV 等产品。

结尾的分割线

通过增加 主题设计器可视化编辑 功能,我们打通了图表的上下游,完善"从设计师到开发者再到低代码搭建系统"的可视化链路。

我们的《用这样的组件开发大屏》系列也到此结束。大家有什么疑问欢迎在评论提出~ 有什么感兴趣想看的内容也可以评论,后续会不断分享的~

📢 📢 还有一件事,很多人关注的 Vue 版本,目前已经加入开发计划啦,大家可以在 Issue 看到具体进展:传送门

记得持续关注我们哦~

团队名片

文章分类
前端