回归统计在 echarts 中的实现---在散点图中加趋势线

最新推荐文章于 2025-03-26 09:53:40 发布

TCancel

最新推荐文章于 2025-03-26 09:53:40 发布

阅读量1.8w

点赞数 6

分类专栏： vue 文章标签：趋势线 echarts 散点图

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用ECharts和其扩展库echarts-stat.js进行回归统计分析，涵盖线性、指数、对数及多项式回归，并展示如何将回归分析结果可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回归统计在 echarts 中的实现

贵在随心关注

0.5 2019.03.13 13:55 字数 432 阅读 483评论 0喜欢 3

在做数据的统计的时候，难免会涉及到线性拟合问题，也就是回归统计问题。
接下来我们看看回归算法如何把数据分析与echarts 图表结合的.
这里我们需要借助 echarts 的一个扩展库: echarts-stat.js
ecStat 是 ECharts 的统计和数据挖掘工具。你可以把它当作一个工具库直接用来分析数据；你也可以将其与 ECharts 结合使用，用 ECharts 可视化数据分析的结果。

1、如何使用呢？

1.1 使用 npm 安装
执行命令：

npm install echarts-stat -S

1.2 直接引入

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>

1.3 d调用方式

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

1.4 参数说明
regressionType:回归类型（String），有四种回归算法类型：'linear', 'exponential', 'logarithmic', 'polynomial'。
data:要统计的数据，是个二维数组（Array），一维数组值分别表示自变量和因变量的值。如下示例：

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

order:多项式的阶数（number）。对于非多项式回归，可以忽略该参数。

1.5 返回值说明
myRegression：返回一个对象. 包括用于绘制折线图的拟合数据点 points，回归曲线的参数 parameter，以及拟合出的曲线表达式 expression。如下：

// 绘制折线图的拟合数据点
 myRegression.points = [
    [1, 2],
    [3, 4],
    ...
 ];

 // 这是线性回归到额参数，对于其它的回归类型，返回值有所不同
 myRegression.parameter = {
    gradient: 1.695,
    intercept: 3.008
 };

// 拟合曲线的表达式
 myRegression.expression = 'y = 1.7x + 3.01';

2、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);

··~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

以上别人写的参考部分一下自己做的趋势线效果图

本文转自：https://www.jianshu.com/p/c97273a05167