ECharts自定义（custom）系列中计算多组坐标值整体均值的问题

DevOps 小满

2026-4-14

我完全懂你的困扰！现在问题的核心点其实很好找：ECharts的renderItem函数是针对每个数据项单独执行的——你前3个属于group1的数据项，会触发3次renderItem调用，每次都会计算当前单个数据项的坐标均值，所以控制台才会输出3个结果。而你要的是把这3个值再汇总，算出它们的整体均值，最后只用这个最终值来做后续渲染。

问题根源拆解

你现在的代码里，每处理一个group1的数据项，就会计算一次当前项的坐标均值，还每次都渲染一个圆，这就导致了3个圆、3次均值输出。现在要做的是：先把这3个均值临时存起来，等全部收集完成后计算整体均值，再用这个值只渲染一次你需要的元素。

直接可用的修改方案

我把关键代码给你改好了，你直接替换到你的chartFrameSwitch0函数里就行：

function chartFrameSwitch0() {

    // 👉 新增：用来临时存前3个数据项的均值，以及最终的整体均值
    const collectedMeans = [];
    let overallMean = null;

    // custom series
    const series0 = [
        {
            type: 'custom',
            datasetIndex: 0,
            encode: {
                x: 0,
                y: 1,
                itemGroupId: 2
            },
            renderItem: function (params, api) {

                if (params.dataIndex < 3) {
                
                    const value = api.coord([api.value(0), api.value(1)]);
                    const size = api.size([api.value(0), api.value(1)]).map(resize => resize * 0.2);
                    
                    // 👉 给计算函数补全参数，逻辑更清晰
                    function calculateMean(arr) {
                        return arr.reduce((acc, val) => acc + val, 0) / arr.length;
                    }

                    // 计算当前数据项的坐标均值
                    const mean = calculateMean(value);
                    collectedMeans.push(mean);

                    // 👉 收集满3个值时，计算整体均值
                    if (collectedMeans.length === 3) {
                        overallMean = calculateMean(collectedMeans);
                        console.log('最终整体均值：', overallMean); // 这就是你要的194.795左右的结果
                    }

                    // 保留原来的图标渲染逻辑
                    const iconElement = {
                        type: 'path',
                        shape: {
                            x: value[0] - size[0] / 2,
                            y: value[1] - size[1] / 2,
                            pathData: 'M416 398.9c58.5-41.1 96-104.1 96-174.9C512 100.3 397.4 0 256 0S0 100.3 0 224c0 70.7 37.5 133.8 96 174.9c0 .4 0 .7 0 1.1l0 64c0 26.5 21.5 48 48 48l48 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 64 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 48 0c26.5 0 48-21.5 48-48l0-64c0-.4 0-.7 0-1.1zM96 256a64 64 0 1 1 128 0A64 64 0 1 1 96 256zm256-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z',
                            width: size[0],
                            height: size[1]
                        },
                        style: {
                            fill: '#000',
                            lineWidth: .5,
                            stroke: '#f00',
                            shadowBlur: 5,
                            shadowColor: '#333',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    };

                    // 👉 只在最后一个group1数据项（index=2）且整体均值已算出时，才添加圆元素
                    const children = [iconElement];
                    if (params.dataIndex === 2 && overallMean !== null) {
                        children.push({
                            type: 'circle',
                            shape: {
                                cx: overallMean,
                                cy: overallMean,
                                r: overallMean / 2
                            },
                            style: {
                                fill: '#dd4b39',
                                opacity: .2
                            }
                        });
                    }

                    return {
                        type: 'group',
                        children: children
                    };

                } else if (params.dataIndex >= 3) {
                    // 这里保留你原来group2的代码，完全不用改
                    const value = api.coord([api.value(0), api.value(1)]);
                    const size = api.size([api.value(0), api.value(1)]).map(resize => resize * 0.2);

                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'path',
                                shape: {
                                    x: value[0] - size[0] / 2,
                                    y: value[1] - size[1] / 2,
                                    pathData: 'M57.7 193l9.4 16.4c8.3 14.5 21.9 25.2 38 29.8L163 255.7c17.2 4.9 29 20.6 29 38.5l0 39.9c0 11 6.2 21 16 25.9s16 14.9 16 25.9l0 39c0 15.6 14.9 26.9 29.9 22.6c16.1-4.6 28.6-17.5 32.7-33.8l2.8-11.2c4.2-16.9 15.2-31.4 30.3-40l8.1-4.6c15-8.5 24.2-24.5 24.2-41.7l0-8.3c0-12.7-5.1-24.9-14.1-33.9l-3.9-3.9c-9-9-21.2-14.1-33.9-14.1L257 256c-11.1 0-22.1-2.9-31.8-8.4l-34.5-19.7c-4.3-2.5-7.6-6.5-9.2-11.2c-3.2-9.6 1.1-20 10.2-24.5l5.9-3c6.6-3.3 14.3-3.9 21.3-1.5l23.2 7.7c8.2 2.7 17.2-.4 21.9-7.5c4.7-7 4.2-16.3-1.2-22.8l-13.6-16.3c-10-12-9.9-29.5 .3-41.3l15.7-18.3c8.8-10.3 10.2-25 3.5-36.7l-2.4-4.2c-3.5-.2-6.9-.3-10.4-.3C163.1 48 84.4 108.9 57.7 193zM464 256c0-36.8-9.6-71.4-26.4-101.5L412 164.8c-15.7 6.3-23.8 23.8-18.5 39.8l16.9 50.7c3.5 10.4 12 18.3 22.6 20.9l29.1 7.3c1.2-9 1.8-18.2 1.8-27.5zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z',
                                    width: size[0],
                                    height: size[1]
                                },
                                style: {
                                    fill: '#008cba',
                                    lineWidth: .5,
                                    stroke: '#000',
                                    shadowBlur: 5,
                                    shadowColor: '#333',
                                    shadowOffsetX: 2,
                                    shadowOffsetY: 2
                                }
                            }
                        ]
                    };
                }
            }
        }
    ];

    // 下面的tooltip、grid、xAxis、yAxis、option代码完全保留，不用改
    const tooltip0 = [
        {
            show: true
        }
    ];

    const grid0 = [
        {
            width: '40%',
            height: '30%',
            left: "5%",
            top: '15%'
        }
    ];

    const xAxis0 = [
        {
            type: 'value',
            min: 0,
            max: 7
        }
    ];

    const yAxis0 = [
        {
            type: 'value',
            min: 0,
            max: 90
        }
    ];

    const option = {
        dataset: [pullDataset[0]],
        tooltip: tooltip0,
        grid: grid0,
        xAxis: xAxis0,
        yAxis: yAxis0,
        series: series0
    };

    chartUse.setOption(option, { notMerge: true });
}

关键修改点说明

闭包变量存数据：在renderItem外面定义了两个变量，利用闭包让每次renderItem调用都能共享它们，实现了跨数据项的均值收集。
整体均值计算时机：当收集到3个均值时（刚好是所有group1的数据项），自动计算它们的整体均值，这就是你要的194.795左右的值。
控制圆的渲染：只在最后一个group1数据项处理时，才添加基于整体均值的圆元素，这样就只会渲染一个圆，而不是三个。

额外提醒

如果后续ECharts触发重绘（比如窗口大小改变），这个逻辑会自动重新收集均值并计算，不需要额外处理——因为每次调用chartFrameSwitch0时，collectedMeans都会被重新初始化，重绘时renderItem会再次执行、重新收集数据。

备注：内容来源于stack exchange，提问作者neves

ECharts自定义（custom）系列中计算多组坐标值整体均值的问题

问题根源拆解 #

直接可用的修改方案 #

关键修改点说明 #

额外提醒 #

问题根源拆解

直接可用的修改方案

关键修改点说明

额外提醒