Superset集成Basic Line Chart（二重奏:mapStateToProps）

superset版本：0.28

echarts版本：3.8.5

这篇我们来到Basic Line chart的集成，这之前安装各种软件巴拉巴拉的不再赘述，可以去我上一篇查看哦。
之所以写集成Basic Line chart是因为这小伙一直报错，困扰了我好几天┭┮﹏┭┮，接下来详细介绍一下我是如何一步步驯服它的。

集成基本线图

依旧是那五个步骤，以及基本的四个文件，划重点：还有专为线图要更改的神秘文件（就是因为没改这个file，让我多日郁郁寡欢）

1. 导入图片，把基本线片echarts_line_basic.png放入superset/static/assets/images/viz_thumbnails/文件夹下（图片戳这里，太好看了有木有！）

2. ecahrts官网上下载echarts.js包，放到 superset/static/assets/src/exploer中，再把漏斗echarts_line_basic.js文件（官网下载吧）拷贝到superset/static/assets/src/visualizations目录下(注意js文件名和图要一致),这个js文件内容太~长，想要的私信我吧。

3. 修改superset/static/assets/src/visualizations/index.js文件，在export const VIZ_TYPES里加入echarts_line_basic: 'echarts_line_basic',。
   在const vizMap里加入[VIZ_TYPES.echarts_line_basic]: () => loadVis(import(/*webpackChunkName: 'echarts_line_basic' */ './echarts_line_basic.js')),
   index文件至关重要哦。要不然页面显示不出基本线图的选项（记得命名不可以不一样哦）

4. 修改superset/static/assets/src/explore/visTypes.jsx文件,在export const visTypes下加如下代码（不要烦心哦，马上完事啦~坚持就是胜利）

 echarts_line_basic: {
        label: t('Echarts Line Basic'),
        showOnExplore: true,
        controlPanelSections: [
            {
                label: t('GROUP BY'),
                controlSetRows: [
                    ['groupby'],
                    ['metrics'],
                    ['percent_metrics'],
                    ['include_time'],
                    ['timeseries_limit_metric', 'order_desc'],
                ],
            },
            {
                label: t('Options'),
                controlSetRows: [
				    ['echarts_theme'],
                    ['graph_type'],
                    ['smooths', 'data_zoom'],
                ]
            },
        ],
        controlOverrides: {
            metrics: {
                validators: [],
            },
            time_grain_sqla: {
                default: null,
            },
        },
    },

重点来了，地狱空荡荡我要在此说注意代码中红框里的内容，前端页面之所以一致直报错原因就在于这个红框里的选项我们没有定义，对于一个小白来说这是致命的，一直报(ControlPanelsContainer, ) TypeError: Cannot read property 'mapStateToProps' of undefined这个错误，经过漫长的调试终于是知道具体原因了┭┮﹏┭┮。

我们找到superset/static/assets/src/explore/controls.jsx文件，打开它在里面定义红框里这几个选项。在export const controls = {里加入如下代码

    smooths: {
        type: 'CheckboxControl',
        label: t('Line Smooth'),
        default: true,
    },
    data_zoom: {
        type: 'CheckboxControl',
        label: t('Data Zoom'),
        default: false,
    },
    graph_type: {
        type: 'SelectControl',
        label: t('Graph Type Select'),
        choices: [
            ['Basic', 'Basic'],
            ['Stack', 'Stack'],
            ['StackArea', 'StackArea'],
            ['Area Double Axis', 'Area Double Axis'],
        ],
        default: 'Basic',
    },
    echarts_theme: {
        type: 'SelectControl',
        label: t('Echarts图表主题'),
        choices: [
            ['default'],
            ['dark'],
            ['infographic'],
            ['macarons'],
            ['roma'],
            ['shine'],
            ['vintage']
        ],
        description: t('echarts官方提供的六种主题，空白选项为默认值'),
        default: ''
    },

完美~~~
5. 修改superset/viz.py 加入如下代码

class EchartsLineBasicViz(BaseViz):

    viz_type = 'echarts_line_basic'
    is_timeseries = False

    def should_be_timeseries(self):
        fd = self.form_data
        conditions_met = (
            (fd.get('granularity') and fd.get('granularity') != 'all') or
            (fd.get('granularity_sqla') and fd.get('time_grain_sqla'))
        )
        if fd.get('include_time') and not conditions_met:
            raise Exception(_(
                'Pick a granularity in the Time section or '
                "uncheck 'Include Time'"))
        return fd.get('include_time')

    def query_obj(self):
        d = super(EchartsLineBasicViz, self).query_obj()
        fd = self.form_data

        if fd.get('all_columns') and (fd.get('groupby') or fd.get('metrics')):
            raise Exception(_(
                'Choose either fields to [Group By] and [Metrics] or '
                '[Columns], not both'))

        sort_by = fd.get('timeseries_limit_metric')
        if fd.get('all_columns'):
            d['columns'] = fd.get('all_columns')
            d['groupby'] = []
            order_by_cols = fd.get('order_by_cols') or []
            d['orderby'] = [json.loads(t) for t in order_by_cols]
        elif sort_by:
            if sort_by not in d['metrics']:
                d['metrics'] += [sort_by]
            d['orderby'] = [(sort_by, not fd.get('order_desc', True))]

        # Add all percent metrics that are not already in the list
        if 'percent_metrics' in fd:
            d['metrics'] = d['metrics'] + list(filter(
                lambda m: m not in d['metrics'],
                fd['percent_metrics'],
            ))

        d['is_timeseries'] = self.should_be_timeseries()
        return d

    def get_data(self, df):
        fd = self.form_data
        if not self.should_be_timeseries() and DTTM_ALIAS in df:
            del df[DTTM_ALIAS]
        return dict(
            records=df.to_dict(orient='records'),
            columns=list(df.columns),
        )

6.进入superset/static/assets/package.json文件，找到一栏里添加"echarts": "^3.8.5",，关闭文件。这个文件里定义所有superset需要依赖的软件，因此运行项目之前需要将这里的软件安装上，只需在superset/static/assets目录下运行npm install即可。
编写完所有文件后在superset/static/assets下运行npm run dev 进行编译
欧了，大功告成，去运行吧，去造作吧，其他的图表都是一样的原理，O(∩_∩)O。
附图