Apache Superset集成Echarts

一、环境准备

1.1 软件环境

• npm，nodejs

二、主要步骤

2.1、添加漏斗图模型

 cd venv/lib/python2.7/site-packages/superset
 vi viz.py

• 在class TableViz(BaseViz):上方加入以下代码：

 class EchartsFunnelViz(BaseViz):
     """ Funnel Chart"""
     viz_type = 'echarts_funnel'
     is_timeseries = False
     def get_data(self, df):
         df = df.pivot_table(
         index=self.groupby)
         df = df.reset_index()
         df.columns = ['name', 'value']
         return df.to_dict(orient='records')

2.2、新建echarts主要文件

 cd venv/lib/python2.7/site-packages/superset/static/assets/src/visualizations
 touch echarts_funnel.js

• 将以下代码粘贴到里面

 import echarts from 'echarts';
 function echartsFunnelVis(slice, payload) {
 const div = d3.select(slice.selector);
 const slice_id = "echarts_slice_"+slice.formData.slice_id;
 var html = '<div id='+slice_id+' style="width: '+slice.width() +'' +
  'px;height:'+slice.height()+'px;"></div>';
 div.html(html);
 const fd = slice.formData;
 const json = payload.data;
 var data_name = [];
 const data = json;
 data.forEach(function (item, index, array) {
 data_name.push(item['name']);
 });
 var myChart =echarts.init(document.getElementById(slice_id));
 var option = {
tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c}"
},
legend: {data: data_name},
calculable: true,
series: [
     {
        name:'漏斗图',
        type:'funnel',
        left: '10%',
        top: 60,
        //x2: 80,
        bottom: 60,
        width: '80%',
        // height: {totalHeight} - y - y2,
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
            normal: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                textStyle: {
                    fontSize: 20
                }
            }
        },
        labelLine: {
            normal: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            }
        },
        itemStyle: {
            normal: {
                borderColor: '#fff',
                borderWidth: 1
            }
        },
        data: data
    }
]
 };
 myChart.setOption(option);
 }
 module.exports = echartsFunnelVis;

2.3、在index.js中添加viz.py中的类型和echarts_funnel.js的对应关系

 cd venv/lib/python2.7/site-packages/superset/static/assets/src/visualizations
 vi index.js

• 在export const VIZ_TYPES 代码块的最后面加入echarts_funnel: ‘echarts_funnel’,

• 加入后如下图所示：
  
  在const vizMap 代码块的最后面加入[VIZ_TYPES.echarts_funnel]: require(‘./echarts_funnel.js’),

• 加入后如下图所示：
  

2.4、添加一种可视化类型

 cd venv/lib/python2.7/site-packages/superset/static/assets/src/explore
 vi visTypes.js

• 在export const visTypes代码块里面加入以下代码

 echarts_funnel: {
    label: t('Funnel View'),
    showOnExplore: true,
    controlPanelSections: [
      {
        label: t('Query'),
        expanded: true,
        controlSetRows: [
          ['metrics'],
          ['adhoc_filters'],
          ['groupby'],
          ['limit'],
        ],
      },
      {
        label: t('Chart Options'),
        controlSetRows: [
          ['color_scheme'],
        ],
      },
    ],
 },

2.5、添加漏斗图图片

• 自己先在echarts官网上截一张漏斗图的图片，命名为echarts_funnel.png
• 如下图所示：
  

 cd venv/lib/python2.7/site-packages/superset/static/assets/images/viz_thumbnails

• 将echarts_funnel.png图片放到这个路径下

2.6、用npm搭建echarts环境

 cd venv/lib/python2.7/site-packages/superset/static/assets
 npm install --save echarts@3.8.5(版本尽量要保持一致)

2.7、重新编译supersets源码

 cd venv/lib/python2.7/site-packages/superset/static/assets
 npm run dev

• 如果报错就先执行js_build.sh脚本再执行npm run dev
• 编译成功的标志，如下图所示：
  

2.8、用mysql中的测试数据展现漏斗图

• 在mysql中新建一张test_funnel的表，

• 字段设计如下图所示：
  

• 测试数据如下图所示：
  

• 打开superset主界面的sqllab页面，输入select * from test_funnel查询语句查询表中的数据，然后生成图表

• 如下图所示：
  

• 点击Visualize生成以下界面
  

• 点击Visualize转到以下界面
  

• 至此superset集成echarts成功