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

待續