superset 接入可視化echarts圖表

步入社會後我才發現，我拼不了爹媽，我只能拼多多

爲支持更多可視化圖表，我司準備在seperset原始D3圖表基礎上，繼續增長echarts可視化圖表的類型，以供客戶更直觀的看到數據。這篇文章裏將分爲四個步驟，每一個步驟緊密聯繫，缺一不可。

效果圖：

目前已添加echarts圖表。

最後經過查詢，咱們獲得的實體數據經過添加的echarts圖表已經顯示。

步驟一：選擇添加的echarts圖，[charts官方實例]echarts.baidu.com/examples/

我選擇了堆疊條形圖：bar-y-category-stack（這個英文名稱就是對應頂部連接最後的名稱，本文添加的圖表的全部名稱都叫bar-y-category-stack，由於添加的多了方便辨別區分）

1.1 在visualizations文件夾下創建echarts_bar_y_category.js文件，這個文件是作echarts配置項。

import echarts from 'echarts';

function echartsAngularGaugeVis(slice, payload) {

    const div = d3.select(slice.selector);
    const sliceId = 'echarts_slice_' + slice.formData.slice_id;
    const html = '<div id="main" style="width: ' + slice.width() + '' + 'px;height:' + slice.height() + 'px;">hahah</div>';
    div.html(html); // reset

    var myChart = echarts.init(document.getElementById('main'));
    const params = payload.data;
    console.log(params, 123);

    var data_name = [];
    var series = [];
    var data_values = [];
    var series_data = [];
    params.forEach(function (item, index, array) {
        data_name.push(item['key']);
        item['values'].forEach(function (i, index, array) {
        data_values.push(i['y']);
        });
        series_data = {
            name:item['key'],
            type: 'bar',
            data: data_values
        };
        series.push(series_data)
    });

    var category_name = [];
    params[0]['values'].forEach(function (item, index, array) {
        category_name.push(item['x'])
    });

    const option = {
        // title: {
        //     text: 'undefined - 無標題'
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: category_name
        },
        series: series
    };
    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
}

module.exports = echartsAngularGaugeVis;
複製代碼

1.2 保存圖片（路徑是\superset\static\assets\images\viz_thumbnails）

步驟二：添加文件。找到superset\static\assets\images\viz_thumbnails下的index.js

2.1 VIZ_TYPES這個對象裏添加 echarts_bar_y_category: 'echarts_bar_y_category'

2.2 vizMap添加 [VIZ_TYPES.echarts_bar_y_category]: require('./echarts_bar_y_category.js'),

步驟三：查詢條件配置。找到superset\static\assets\src\explore目錄下的visTypes.js

echarts_bar_y_category: {
        label: t('Echarts Bar Y Category'),  // 表的名稱
        showOnExplore: true,
        controlPanelSections: [   // 查詢條件配置參數，每一個圖的參數都不同   
            {
                label: t('Query'),
                expanded: true,
                controlSetRows: [
                    ['metrics'],
                    ['groupby'],
                    ['columns'],
                    ['row_limit'],
                    ['contribution'],
                ],
            },
            {
                label: t('Chart Options'),
                expanded: true,
                controlSetRows: [
                    ['color_scheme'],
                    ['show_legend', 'show_bar_value'],
                    ['bar_stacked', 'order_bars'],
                    ['y_axis_format', 'y_axis_label'],
                    ['show_controls', null],
                ],
            },
            {
                label: t('X Axis'),
                expanded: true,
                controlSetRows: [
                    ['x_axis_label', 'bottom_margin'],
                    ['x_ticks_layout', 'reduce_x_ticks'],
                ],
            },
        ],
        controlOverrides: {
            groupby: {
                label: t('Series'),
            },
            columns: {
                label: t('Breakdowns'),
                description: t('Defines how each series is broken down'),
            },
        },
    },
複製代碼

步驟三：後端數據導出給前端的viz.py文件配置。

class Echarts_Bar_Y_Category(DistributionPieViz):

    """A good old bar chart"""

    viz_type = 'echarts_bar_y_category'
    verbose_name = _('Bar Y Category')
    is_timeseries = False

    def query_obj(self):
        d = super(Echarts_Bar_Y_Category, self).query_obj()  # noqa
        fd = self.form_data
        if (
            len(d['groupby']) <
            len(fd.get('groupby') or []) + len(fd.get('columns') or [])
        ):
            raise Exception(
                _("Can't have overlap between Series and Breakdowns"))
        if not fd.get('metrics'):
            raise Exception(_('Pick at least one metric'))
        if not fd.get('groupby'):
            raise Exception(_('Pick at least one field for [Series]'))
        return d

    def get_data(self, df):
        fd = self.form_data

        row = df.groupby(self.groupby).sum()[self.metrics[0]].copy()
        row.sort_values(ascending=False, inplace=True)
        columns = fd.get('columns') or []
        pt = df.pivot_table(
            index=self.groupby,
            columns=columns,
            values=self.metrics)
        if fd.get('contribution'):
            pt = pt.fillna(0)
            pt = pt.T
            pt = (pt / pt.sum()).T
        pt = pt.reindex(row.index)
        chart_data = []
        for name, ys in pt.items():
            if pt[name].dtype.kind not in 'biufc' or name in self.groupby:
                continue
            if isinstance(name, string_types):
                series_title = name
            elif len(self.metrics) > 1:
                series_title = ', '.join(name)
            else:
                l = [str(s) for s in name[1:]]  # noqa: E741
                series_title = ', '.join(l)
            values = []
            for i, v in ys.items():
                x = i
                if isinstance(x, (tuple, list)):
                    x = ', '.join([text_type(s) for s in x])
                else:
                    x = text_type(x)
                values.append({
                    'x': x,
                    'y': v,
                })
            d = {
                'key': series_title,
                'values': values,
            }
            chart_data.append(d)
        return chart_data
        
複製代碼

至此 完結！best regards！