Echarts图表中tooltip实现各序列叠加

在使用Echarts制图过程中,遇到需要将各个序列的值进行逐层叠加显示在tooltip中的情况,查找API,是可以通过formatter的标准化函数方法执行一些操作实现的。先上最终效果:

Echarts图表中tooltip实现各序列叠加_第1张图片

其回调函数形式:

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

其中params为tooltip的回调参数,文档说明不如亲眼所见,将其输出看一看:

tooltip : {
    formatter:(params)=>{
       console.log(params)
    }
}

 发现它其实是各序列的信息数组,里面我们能用到的则为seriesName以及其value

于是解决这个叠加问题无疑用两层循环即可,直接上代码:

    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        },
        formatter:(params)=>{
            var backString = "";//定义一个空字符串返回值
            for(var i =0 ; i < params.length ; i ++){
                var rowString = params[i].seriesName + ":";//定义当前序列行的序列名
                var rowValue = 0;//定义该行的求和初值
                //第二层循环到当前序列行即可
                for(var j = 0 ; j < i + 1 ; j ++){
                    rowString += params[j].value + "+";//序列行内值文本叠加
                    rowValue += params[j].value ; //序列行值求和
                }
                //将文本行尾的‘+’号去除,再叠加求和值及换行符到返回值上
                rowString = rowString.substring(0, rowString.lastIndexOf('+')); 
                backString += (rowString + ("="+ rowValue) +"
") } return backString } },

最终效果呈现,类似于九九加法表的原理。类似地,对于其它tooltip标准化方法也可按此思路解决。

你可能感兴趣的:(Echarts图表中tooltip实现各序列叠加)