echarts折线图中tooltip小提示框根据鼠标所在折现进行显示

408 阅读1分钟

如果echarts折线图里的数据是一层一层堆叠起来的

想要让鼠标在折线图上显示所在折线位置的数据信息提示框

先定义一个全局变量

var mouseCurValue

主要代码:

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross',
        label: {
            backgroundColor: '#808080',
            formatter: function (params) {
                if (params.seriesData.length === 0) {
                    // 就是这里,可以获取到我想要的那个数据
                    mouseCurValue = params.value;
                }
            }
        }
    },
    formatter: function (params) {
        let sum = 0;
        for (let i = 0; i < params.length; i++) {
            let series = params[i];

            // 累计series.data,与mouseCurValue做比较,找出鼠标位置对应的series
            sum += Number(series.data[1]);
        }
    }

}