echart K线 自定义 tooltip 鼠标悬停显示数据详情

echart K线 自定义 tooltip 鼠标悬停显示数据详情

触发 tooltip 显示有两个 item： 点击k线块的时候触发，和 axis：鼠标悬停的时候触发，用 axis 在移动端会更方便。

不同的触发条件，在 formatter 中传递的参数是不一样的。如下：

以 axis 触发时

tooltip 中的 params 数据结构如下：

根据这个来写 tooltip 就好了。

tooltip: {
    axisPointer: {
        type: 'cross'
    },
    trigger: 'axis', 
    formatter: function (params) {
        params = params[0];
        let currentItemData = params.data;
        return params.name + '<br>' +
            '开盘:' + currentItemData[1] + '<br>' +
            '收盘:' + currentItemData[2] + '<br>' +
            '最低:' + currentItemData[3] + '<br>' +
            '最高:' + currentItemData[4]
    }
}

以 item 触发时

tooltip 中的 formatter 接收的参数 params 中的 value值是 [序号, 开盘, 收盘, 最低, 最高] 数组

tooltip: {
    axisPointer: {
        type: 'cross'
    },
    trigger: 'item',
    formatter: function (params) {
        return params.name + '<br>' +
            '开盘:' + params.value[1] + '<br>' +
            '收盘:' + params.value[2] + '<br>' +
            '最低:' + params.value[3] + '<br>' +
            '最高:' + params.value[4]
    },
    borderWidth: 1
}