Echarts柱状图的tooltip显示不同条数据

Echarts柱状图的tooltip显示不同条数据

因为需求需要hover每一个柱状图的时候显示不同条数据
第一个柱状图需要获取这些数据
在这里插入图片描述
而第二个就是这样
在这里插入图片描述
每一个数据都不相同
这样就比较难受,所以需要监听到每一次鼠标到达的柱状图,然后进行相应的操作。
监听这块在思否上找到一位大佬的方式

tooltip : {
    trigger: 'axis',
    axisPointer: {
        type: "cross",
        label: {
            formatter: function (params) {
                if (params.seriesData.length === 0) {
                    window.mouseCurValue = params.value;
                }
            }
        }
    },
    formatter: function (params) {
        let res = "", sum = 0;
        for (let i = 0; i < params.length; i++) {
            let series = params[i];
            sum += Number(series.data);
            if (sum >= window.mouseCurValue) {
                res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data + "<br/>";
                break;
            }
        }
        return res;
    },
}

这样sum就是你里面的第一个数据,判断sum就可以知道是哪个柱状图了,然后进行操作。
附上大佬链接 大佬链接


版权声明:本文为qitiandada原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。