Superset集成Echarts(三重奏:Exponential Regressipn chart)

superset版本：0.28

echarts版本：3.8.5

这篇我们又来到Exponential Regressipn chart的集成，万变不离其宗，依旧是那五个步骤，以及基本的四个文件，这次的重点是：echarts_scatter_exp_reg.js这个文件的内容（这里谈了自己编写的想法，不是很全面（可能对于其他情况就不管用了），自己其实并没有学过js完全用到哪扣到哪，大佬请批评┭┮﹏┭┮）
为什么强调这个文件呢，我们先看官网上的代码，里面数据都是固定好的，但是我们用肯定是要输入自己的数据啊，于是开始整改。

获取传来的数据payload.data

js文件的函数function EchartsScatterExpRegVis(slice, payload)中payload里就保存了我们需要的数据，因此首先获取我们需要的数据const json = payload.data;//json用来保存前台传来的数据,前台F12可以看到json获取到的数据，

但json还不是我们要获取的最终数据，在json下的records才是我们要画的数据const data1 = json.records;//data1保存要画的数据。到此数据获取到了，但是还需要处理成数组的格式，也就是js源码中固定数据那样的格式，才可以用。

处理数据

下面是我的方法（小心翼翼）。

    var data= new Array();
    for (var i = 0; i < data1.length; i++) {
        var newData= new Array();
        var count=1;
        for (var key in data1[1]){
            newData.push(data1[i][key]);
            count++;
            if(count>2){
                break;
            }
        }
        data.splice(i,0,newData);
    }

好了到此结束，附上整体js代码

import echarts from 'echarts';
import ecStat from 'echarts-stat';

function EchartsScatterExpRegVis(slice, payload) {
    var div = d3.select(slice.selector);
	const sliceId = 'e_scatter_exp_reg' + slice.formData.slice_id
    var html = '<div id="' + sliceId + '" style="width:' + slice.width() + 'px;' + ''
        + 'px;height:' + slice.height() + 'px;"></div>';
    div.html(html);

    var myChart = echarts.init(document.getElementById(sliceId));  
//原始数据
/*     var data = [
        [1, 4862.4],
        [2, 5294.7],
        [3, 5934.5],
        [4, 7171.0],
        [5, 8964.4],
        [6, 10202.2],
        [7, 11962.5],
        [8, 14928.3],
        [9, 16909.2],
        [10, 18547.9],
        [11, 21617.8],
        [12, 26638.1],
        [13, 34634.4],
        [14, 36759.4],
        [15, 48478.1],
        [16, 57884.6],
        [17, 64462.6],
        [18, 69395.7]
       // [14, 46759.4],
       // [15, 58478.1],
       // [16, 67884.6],
       // [17, 74462.6],
       // [18, 79395.7]
    ]; */

// See https://github.com/ecomfe/echarts-stat
    const json = payload.data;//json用来保存前台传来的数据
    const data1 = json.records;//data1保存要画的数据
 
    var data= new Array();
    for (var i = 0; i < data1.length; i++) {
        var newData= new Array();
        var count=1;
        for (var key in data1[1]){
            newData.push(data1[i][key]);
            count++;
            if(count>2){
                break;
            }
        }
        data.splice(i,0,newData);
    }
    
    var myRegression = ecStat.regression('exponential', data);
    myRegression.points.sort(function (a, b) {
        return a[0] - b[0];
    });

    var option = {
       /* title: {
            text: '1981 - 1998 gross domestic product GDP (trillion yuan)',
            subtext: 'By ecStat.regression',
            sublink: 'https://github.com/ecomfe/echarts-stat',
            left: 'center'
        },*/
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        xAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            splitNumber: 20
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [{
            name: 'scatter',
            type: 'scatter',
            label: {
                emphasis: {
                    show: true,
                    position: 'left',
                    textStyle: {
                        color: 'blue',
                        fontSize: 16
                    }
                }
            },
            data: data
        }, {
            name: 'line',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: myRegression.points,
            markPoint: {
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        formatter: myRegression.expression,
                        textStyle: {
                            color: '#333',
                            fontSize: 14
                        }
                    }
                },
                data: [{
                    coord: myRegression.points[myRegression.points.length - 1]
                }]
            }
        }]
    };
    myChart.setOption(option);
}
module.exports = EchartsScatterExpRegVis;

再来看一下前台我的输入吧
特别强调我这个代码写的是不管前台选几个字段我只接收前两个字段。（想法很不友好，还需改进，但大体思路就是酱紫了）￣□￣｜｜
superset二次开发就暂时告一段落了（pick me~~）o(￣▽￣)ｄo(￣▽￣)ｄ