superset 二次开发之看板渲染为深色大屏

1,826 阅读2分钟

公司在对superset进行二次开发,由于superset没有高大上的深色背景模式,而现在的潮流都是深色bi大屏看板,便需要调整看板的样式,所以教程来咯~

版本

superset1.3

实现步骤

  • 直接通过css模板修改在这里插入图片描述

你会发现你更改后,看板变成下面这黑乎乎的模样,总觉得哪里怪怪的,怪就怪在图表的文字还是黑的。。。 在这里插入图片描述 然后你就开始翻文档,发现配色方案和label_colors这两个参数可能能实现这种效果😀 在这里插入图片描述 当你用这两个参数配了一波之后,实现结果如下👇,文字颜色纹丝不动,改的还是图表图形颜色。。。在这里插入图片描述 总结以上,你会发现通过css模板仅可以更改图表里图形itemStyle样式/(ㄒoㄒ)/~~

  • 接下来,我们就得扒扒代码了。。。

通过审查原色元素,你会发现,图表的渲染由svg和canvas绘制👇 svg在这里插入图片描述

svg直接css模板用fill属性就可以简单实现~

.nvd3 text{
  fill: #fff;
}

头疼的事儿来了。。。canvas怎么改呢。。。 我们扒前端代码可以发现是从下图👇渲染图表的,然后可以发现是调用了@superset-ui/core依赖包 在这里插入图片描述 经过层层扒,你会发现它最后是用了echart 在这里插入图片描述

再深扒,你可以看到代码配置echart的参数文件,再对比echart的官网api,你可以发现更改label的color和将legend加上textStyle的color就ok啦~ 在这里插入图片描述 最终实现效果如下图👇 在这里插入图片描述

  • 最后的最后

虽然这种方式实现了深色大屏效果,但存在两个问题:

  • 修改的是node_modules包,部署是直接npm i的,所以emmm...目前仅是本地,需要线上也实现的话,要么把依赖包抽出来,要么抽出来自己发布调整...同时如果这个依赖包surperset更新的话,emmm...又得维护一波。。。
  • 目前修改的话,颜色是写死代码的,除非你全都渲染深色屏,那么可以直接改,如果不是,那么就需要让用户自行选择,所以更好的方式是暴露属性到前端代码去控制颜色,进而让用户配置

目前我也还在研究阶段,也是今天才实现这效果,如果后续有更好的实现方式,我也会分享给小伙伴们,你们如果有更好的方案也欢迎补充,希望可以一起学习和交流啦😜