Javascript 如何在echarts堆叠条形图顶部添加总和[根据选定系列更新]

关于如何在echarts上的堆叠条形图顶部添加“总计”标签，已经回答了一些问题（例如）

但是，我还希望在使用图例选择/取消选择系列时重新计算此总数（包括在下面的示例中取消选择标签附着到的最终系列时）。这可能吗？

另一个问题的示例代码：

//示例数据
this.mySeries=[{
名称：“数据集1”，
类型：'bar'，
堆栈：“堆栈1”，
数据：[120132101134 90230210]
},
{
名称：“数据集2”，
类型：'bar'，
堆栈：“堆栈1”，
数据：[220182191234290330310]
},
{
名称：“数据集3”，
类型：'bar'，
堆栈：“堆栈1”，
数据：[8209329011934013301320]，
}
];
//格式化程序的函数
genFormatter=（系列）=>{
返回（参数）=>{
控制台日志（param）；
设和=0；
series.forEach（项目=>{
总和+=项目数据[参数数据索引]；
});
回报金额
}
};
//在图表选项中放置此选项
series:series.map（（项目，索引）=>Object.assign（项目{
类型：'bar'，
斯塔克：没错，
标签：{
show:index==series.length-1，
格式化程序：genFormatter（系列），
尺寸：20，
颜色：'黑色'，
位置：'顶部'
},
}))，

是的，这是可能的。您需要添加处理程序，以便在图例中选定的系列发生更改时进行侦听。见活动

在事件处理程序中，需要筛选选择的序列并重新计算总和，然后将标签附加到最后一个序列

要将总和标签附着到最后一个系列，可以创建如下函数：

const seriesHandler = series => {
    return series.map((serie, index) => {
        if (index === series.length - 1) {
            return {
                ...serie,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: params => {
                            let total = 0
                            series.forEach(s => {
                                total += s.data[params.dataIndex]
                            })
                            return total
                        }
                    }
                }
            }
        } else {
            return serie
        }
    })
}

const handleLegendSelectChanged = (event, series) => {
    const includedSeriesNames = []
    for (const [name, value] of Object.entries(event.selected)) {
        if (value) {
            includedSeriesNames.push(name)
        }
    }

    const includedSeries = series.filter(serie => {
        return includedSeriesNames.includes(serie.name)
    })

    return seriesHandler(includedSeries)
}

并创建legendselectchanged事件处理程序，如下所示：

const seriesHandler = series => {
    return series.map((serie, index) => {
        if (index === series.length - 1) {
            return {
                ...serie,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: params => {
                            let total = 0
                            series.forEach(s => {
                                total += s.data[params.dataIndex]
                            })
                            return total
                        }
                    }
                }
            }
        } else {
            return serie
        }
    })
}

const handleLegendSelectChanged = (event, series) => {
    const includedSeriesNames = []
    for (const [name, value] of Object.entries(event.selected)) {
        if (value) {
            includedSeriesNames.push(name)
        }
    }

    const includedSeries = series.filter(serie => {
        return includedSeriesNames.includes(serie.name)
    })

    return seriesHandler(includedSeries)
}

基本上，它过滤显示（包括）的序列，并将总和标签附加到最后一个序列

请参见下面的完整示例：

常量mySeries=[
{
名称：“数据集1”，
类型：'bar'，
堆栈：“堆栈1”，
数据：[120132101134 90230210]
},
{
名称：“数据集2”，
类型：'bar'，
堆栈：“堆栈1”，
数据：[220182191234290330310]
},
{
名称：“数据集3”，
类型：'bar'，
堆栈：“堆栈1”，
数据：[8209329011934013301320]，
}
];
const seriesHandler=系列=>{
return series.map（（系列，索引）=>{
如果（索引===series.length-1）{
返回{
…意甲，
标签：{
正常：{
秀：没错，
位置：'顶部'，
格式化程序：参数=>{
设总数=0
series.forEach（s=>{
总计+=s.data[参数数据索引]
})
返回总数
}
}
}
}
}否则{
返回序列
}
})
}
const handleLegendSelectChanged=（事件、系列）=>{
常量includedSeriesNames=[]
for（Object.entries（event.selected））的常量[名称，值]）{
如果（值）{
includedSeriesNames.push（名称）
}
}
const includedSeries=series.filter（serie=>{
返回includedSeriesNames.includes（serie.name）
})
返回系列处理器（包括系列）
}
const dom=document.getElementById（“容器”）；
const myChart=echart.init（dom）；
常量选项={
工具提示：{
触发器：“轴”，
轴指针：{
类型：“阴影”
}
},
工具箱：{
秀：没错，
方向：'垂直'，
左：'右'，
顶部：'中间'，
特色：{
数据视图：{show:false，readOnly:false}，
magicType:{show:true，type:['line'，'bar'，'stack'，'tiled']}，
还原：{show:true}，
saveAsImage:{show:true}
}
},
网格：{
左：“3%”，
对:"4%",，
底部：“3%”，
标签：正确
},
亚克斯：{
类型：“值”
},
xAxis：{
类型：'类别'，
数据：[“2018年2月”、“2018年3月”、“2018年4月”、“2018年5月”、“2018年6月”、“2018年7月”]
},
图例：{
数据：[“数据集1”、“数据集2”、“数据集3”]
},
};;
myChart.setOption({
选项
系列：SerieHandler（mySeries）
})
myChart.on（'legendselectchanged'，事件=>{
myChart.setOption({
系列：HandleGendSelectChanged（事件，mySeries）
})
})