商务合作:179001057@qq.com

superset二次开发之旅

xiaoxiao2021-09-22  47

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. 后端部分

待续

商务合作:179001057@qq.com

CopyRight © 2010-至今 All Rights Reserved
Processed: 0.017, SQL: 9