ECharts 5 使用外部的数据转换器 echarts-stat 指数回归线 (Exponential Regression) 实例

源代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts 5 使用外部的数据转换器 echarts-stat 指数回归线 (Exponential Regression) 实例</title>
    
    <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script>
    <script src="https://demo.runoops.com/static/lib/echarts-stat/ecStat.min.js"></script>
</head>

// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

var option;

// See https://github.com/ecomfe/echarts-stat
        echarts.registerTransform(ecStat.transform.regression);
        option = {
            dataset: [
                {
                    source: [
                        [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]
                    ]
                },
                {
                    transform: {
                        type: 'ecStat:regression',
                        config: {
                            method: 'exponential'
                            // 'end' by default
                            // formulaOn: 'start'
                        }
                    }
                }
            ],
            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: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [
                {
                    name: 'scatter',
                    type: 'scatter',
                    datasetIndex: 0
                },
                {
                    name: 'line',
                    type: 'line',
                    smooth: true,
                    datasetIndex: 1,
                    symbolSize: 0.1,
                    symbol: 'circle',
                    label: { show: true, fontSize: 16 },
                    labelLayout: { dx: -20 },
                    encode: { label: 2, tooltip: 1 }
                }
            ]
        };

option && myChart.setOption(option);
    </script>
</body>

</html>

运行结果