开眼界！阿里用这样的组件开发大屏（三）

前文再续，书接上回：

开眼界！阿里用这样的组件开发大屏（一）

开眼界！阿里用这样的组件开发大屏（一）

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 看到具体进展：传送门

记得持续关注我们哦～