公司在对superset进行二次开发,由于superset没有高大上的深色背景模式,而现在的潮流都是深色bi大屏看板,便需要调整看板的样式,所以教程来咯~
版本
superset1.3
实现步骤
-
直接通过css模板修改
你会发现你更改后,看板变成下面这黑乎乎的模样,总觉得哪里怪怪的,怪就怪在图表的文字还是黑的。。。 然后你就开始翻文档,发现配色方案和label_colors这两个参数可能能实现这种效果😀 当你用这两个参数配了一波之后,实现结果如下👇,文字颜色纹丝不动,改的还是图表图形颜色。。。 总结以上,你会发现通过css模板仅可以更改图表里图形itemStyle样式/(ㄒoㄒ)/~~
-
接下来,我们就得扒扒代码了。。。
通过审查原色元素,你会发现,图表的渲染由svg和canvas绘制👇
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...又得维护一波。。。 - 目前修改的话,颜色是写死代码的,除非你全都渲染深色屏,那么可以直接改,如果不是,那么就需要让用户自行选择,所以更好的方式是暴露属性到前端代码去控制颜色,进而让用户配置
目前我也还在研究阶段,也是今天才实现这效果,如果后续有更好的实现方式,我也会分享给小伙伴们,你们如果有更好的方案也欢迎补充,希望可以一起学习和交流啦😜