superset 二次开发之看板渲染为深色大屏（图表文字颜色更改）

公司在对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…又得维护一波。。。
• 目前修改的话，颜色是写死代码的，除非你全都渲染深色屏，那么可以直接改，如果不是，那么就需要让用户自行选择，所以更好的方式是暴露属性到前端代码去控制颜色，进而让用户配置

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