echarts变量-echarts中回归统计的实现

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在做数据统计时，不可避免地会涉及到线性拟合问题，即回归统计问题。

我们来看看回归算法是如何将数据分析与echarts图表结合起来的。

这里我们需要用到echarts的扩展库：echarts-stat.js

ecStat 是 ECharts 的统计和数据挖掘工具。 您可以将其用作工具库，直接分析数据； 您还可以与ECharts结合使用，将ECharts的数据分析结果可视化。

1、如何使用？

1.1 使用npm安装

执行订单：

npm install echarts-stat -S

1.2 直接导入

1.3d调用方法

let myRegression = ecStat.regression(regressionType, data, order);

1.4 参数说明

回归类型：回归类型（String）echarts变量，有四种回归算法类型：'线性'，'指数'，'对数'，'多项式'。

data：要统计的数据是一个二维字段（Array），一维字段值分别代表自变量和因变量的值。 例如：

let data = [
    [1, 2],
    [3, 5],
    ...
 ];

order：方程的阶数（数字）。 对于非方程回归，可以忽略该参数。

1.5 返回值说明

myRegression：返回一个对象。 包括用于绘制折线图的拟合数据点、回归曲线的参数参数、拟合曲线表达式等。 如下：

// 绘制折线图的拟合数据点
 myRegression.points = [
    [1, 2],
    [3, 4],
    ...
 ];
 // 这是线性回归到额参数，对于其它的回归类型，返回值有所不同
 myRegression.parameter = {
    gradient: 1.695,
    intercept: 3.008
 };
// 拟合曲线的表达式
 myRegression.expression = 'y = 1.7x + 3.01';

2.echarts中回归算法的类型

回归算法根据原始输入数据集中自变量和因变量的值拟合一条曲线echarts变量，以反映它们的变化趋势。 目前仅支持具有单个自变量的回归算法。

示例数据：

data = [
    [1990, 97.50795611],
    [1991, -1.47594249],
    [1992, 100.18523178],
    [1993, 70.79915311],
    [1994, 78.57069599],
    [1995, 31.10961999],
    [1996, 256.79296329],
    [1997, -125.99480511],
    [1998, 123.06305912],
    [1999, 20.88276861],
    [2000, 83.58488798],
    [2001, -27.35862341],
    [2002, 36.12902213],
    [2003, 330.29682761],
    [2004, 81.03370443],
    [2005, 72.43589272],
    [2006, 68.20541466],
    [2007, 71.72078271],
    [2008, 30.23107631],
    [2009, 73.36549425],
    [2010, 117.4990002],
    [2011, 210.40146031],
    [2012, 31.12226507],
    [2013, 86.32869462],
    [2014, 128.90111788],
    [2015, 115.70773146]
]
    // 引入echarts
    import echarts from 'echarts'
    // 引入 echarts 拓展回归统计 echarts-stat
    let ecStat = require("echarts-stat");
    export default function getRegressionChart(chartData, chartTitle, chartId, regType, regOrder) {
        let regressionDemo = ecStat.regression(regType, chartData, regOrder);
        regressionDemo.points.sort(function(a, b) {
            return a[0] - b[0];
        });
        let option = {
            title: {
                left: "25%",
                top: "2%",
                text: chartTitle,
                textStyle: {
                    color: "#707070",
                    fontSize: 25
                }
            },
            xAxis: {
                type: "category",
                splitNumber: "7",
                splitLine: {
                    show: true
                }
            },
            yAxis: {
                type: "value",
                splitNumber: "7",
                splitLine: {
                    show: true
                }
            },
            series: [{
                    name: "line",
                    type: "line",
                    itemStyle: {
                        color: "#87CEFF"
                    },
                    data: chartData
                },
                {
                    name: "line",
                    type: "line",
                    showSymbol: false,
                    lineStyle: {
                        // type: "dashed",
                        color: "#f00"
                    },
                    data: regressionDemo.points
                }
            ]
        };
        let regressionChart = echarts.init(
            document.getElementById(chartId)
        );
        regressionChart.setOption(option, true);

2.1 线性回归

regressionChart(data, regTitle, "regression-chart", "linear", 1);

线性回归疗效图

2.2 指数回归

// 测试数据
let expData = [
     [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, 46759.4],
     [15, 58478.1],
     [16, 67884.6],
     [17, 74462.6],
     [18, 79395.7]
 ];
regressionChart(expData, regTitle, "regression-chart", "exponential", 1);

指数回归示例图

2.3 对数回归

regressionChart(logicData, regTitle, "regression-chart", "logarithmic", 1);

对数回归示例图

2.4 方程回归

// 针对第一个例子做 4次多项式回归
regressionChart(data, regTitle, "regression-chart", "polynomial", 4);

看起来四回归的效果不是很好？