superset是airbnb开源的一款BI产品，支持多种数据库连接，拥有丰富的图表类型，其部署方便，制作看板迅速，是小企业自助BI的不错选择。但是，里面的图表类型虽然多，很多常见的图表依然没有，最近遇到一个需求：添加echarts到superset图表类型。以下是研究过程。 下面以添加echarts 韦恩图为例，展示如何添加superset新图表类型： echarts官网演示链接：echarts韦恩图官网演示链接
1. 重写前端
1.1 新增venn_diagram.js文件
在以下目录新建文件venn_diagram.js
cd /superset/static/assets/visualizations
touch venn_diagram.js
将一下内容替换到venn_diagram.js
import echarts
from 'echarts';
function echartsFunnelVis(slice
, payload
) {
const { data
= [] } = payload
;
const div
= d3
.select(slice
.selector
);
const divId
= slice
.selector
+ '-main'
var html
= `<div id="${divId}" style="width: ${slice.width()}px;
height: ${slice.height()}px;"></div>`;
div
.html(html
);
var myChart
= echarts
.init(document
.getElementById(divId
));
option
= {
tooltip
: {
trigger
: 'item',
formatter
: "{b}: {c}"
},
toolbox
: {
show
: true,
feature
: {
dataView
: {show
: true, readOnly
: false},
restore
: {show
: true},
saveAsImage
: {show
: true}
}
},
calculable
: false,
series
: [
{
name
:'韦恩图',
type
:'venn',
itemStyle
: {
normal
: {
label
: {
show
: true,
textStyle
: {
fontFamily
: 'Arial, Verdana, sans-serif',
fontSize
: 16,
fontStyle
: 'italic',
fontWeight
: 'bolder'
}
},
labelLine
: {
show
: false,
length
: 10,
lineStyle
: {
width
: 1,
type
: 'solid'
}
}
},
emphasis
: {
color
: '#cc99cc',
borderWidth
: 3,
borderColor
: '#996699'
}
},
# 此处数据由后台准备
,传入到payload的data里面
data
: data
}
]
};
myChart
.setOption(option
);
}
module
.exports
= echartsFunnelVis
;
解释 option= 来源于echarts官网案例，可以直接copy粘贴，由于superset的图表类型已经提供标题，所以删除标题配置信息。根据分析发现，只需要后台准备data数据即可，data的数据格式为一个字典列表
data
:[
{value
:60, name
:'访问'},
{value
:50, name
:'咨询'},
{value
:20, name
:'公共'}
]
1.2 更新main.js
main.js目录为：/superset/static/assets/visualizations
1.3 添加可视化类型
目录superset/assets/javascripts/explore/stores/vistypes.js
1.4 在superset中导入echarts
superset中导入echarts的方式： 1、 superset/static/assets/package.json中添加如下代码：
2、命令行：cd superset/static/assets/
npm run dev-fast
3、superset/templates/superset/basic.html中导入js的文件，（js文件可以自己编译得到，也可以直接官网下载）
前端完毕！
2. 后端部分
待续
