superset二次开发之旅__如何添加echarts图表之韦恩图

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

待续