Echarts自定义样式format——以指数回归散点图为例

本文链接：https://blog.csdn.net/a805814077/article/details/109200707

本文介绍如何使用ECharts和ecStat.min.js创建带有指数回归趋势线的散点图，并展示了一个具体案例，包括数据准备、图表配置及自定义提示框格式。

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

这里主要对这个官网案例进行讲解：
https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression

echarts.min.js文件下载

ecStat.min.js文件下载

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Scatter</title>
</head>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/ecStat.min.js"></script>
<body>
<div id="scatter" style="width: 1200px;height:600px;"></div>
</body>

<script>
    // 指数回归散点图
    scatter();

    function scatter() {
        var myChart = echarts.init(document.getElementById("scatter"));
        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, 46759.4],
            [15, 58478.1],
            [16, 67884.6],
            [17, 74462.6],
            [18, 79395.7]
        ];

        // See https://github.com/ecomfe/echarts-stat(ecStat.min.js下载链接),根据传入的数据生成一个指数回归的ecStat对象
        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',
                // 自定义formatter
                formatter: function (params) {
                    var result = ''
                    // 设置散点图的小圆点为黄色
                    var scatter = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:yellow"></span>'
                    // 设置折线图的小圆点为粉色
                    var line = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:pink"></span>'
                    // 将年份显示在formatter中
                    var month = []
                    for (var i = 0; i < (1998 - 1981 + 1); i++) {
                        month[i] = i + 1981
                    }
                    for (var i = 0; i < params.length; i++) {
                        // 这里可以打印params来查看自己所需要的参数
                        // console.log(params)
                        var item = params[i]
                        // 散点图
                        if (i == 0) {
                            //将所有结果累加
                            // item.axisValue为x轴的值
                            result += month[item.axisValue - 1] + "</br>" + scatter + item.data[1]
                        }
                        // 折线图
                        if (i == 1) {
                            result += "</br>" + line + item.data[1]
                        }
                    }
                    return result
                },
                // 坐标轴指示器
                axisPointer: {
                    // 十字准星指示器
                    type: 'cross'
                }
            },
            xAxis: {
                type: 'value',
                // 分割线
                splitLine: {
                    lineStyle: {
                        // 虚线
                        type: 'dashed'
                    }
                },
                // 坐标轴的分割段数（只是个预估值）
                splitNumber: 20
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                name: 'scatter',
                type: 'scatter',
                // 高亮标签
                emphasis: {
                    label: {
                        show: true,
                        position: 'left',
                        color: 'blue',
                        fontSize: 16
                    }
                },
                data: data
            }, {
                name: 'line',
                type: 'line',
                // 是否显示 symbol
                showSymbol: false,
                // 是否平滑曲线
                smooth: true,
                data: myRegression.points,
                // 右上角的方程
                markPoint: {
                    itemStyle: {
                        color: 'transparent'
                    },
                    label: {
                        show: true,
                        position: 'left',
                        formatter: myRegression.expression,
                        color: '#333',
                        fontSize: 14
                    },
                    data: [{
                        coord: myRegression.points[myRegression.points.length - 1]
                    }]
                }
            }]
        };

        myChart.setOption(option);

    }


</script>

</html>