Echarts tooltip formatter函数使用

发表于 | 分类于

tooltip

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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回调函数