Echarts tooltip formatter函数使用

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回调函数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。