美文网首页
Echarts tooltip formatter函数使用

Echarts tooltip formatter函数使用

作者: 幽小鬼 | 来源:发表于2022-05-20 17:09 被阅读0次
tooltip

实现如上默认的tooltip样式,tooltip配置部分代码如下:

tooltip: {
    trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
        type: 'line'        // 默认为直线,可选为:'line' | 'shadow'
    },
    formatter: (params) => {
        let list = []
        let listItem = ''
        let axisValueLabel = params[0].axisValueLabel
        for (let i = 0; i < params.length; i++) {
            list.push(
                '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                params[i].color +
                ';margin-right: 5px;border-radius: 50%;}"></i>' +
                '<span style="display:inline-block;">' +
                params[i].seriesName +
                '</span><span style="display:inline-block;">&nbsp&nbsp' +
                params[i].data +
                '</span>'
            )
        }
        listItem = list.join('<br>')
        return axisValueLabel + '<br>' + listItem
    }
}

具体想获取的数据在params中查找,每次弹出tooltip都会触发一次formatter回调函数

相关文章

网友评论

      本文标题:Echarts tooltip formatter函数使用

      本文链接:https://www.haomeiwen.com/subject/enwfprtx.html