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); // reset
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: {
// color: 各异,
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. 后端部分
待续