乐趣区

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

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

以 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
}

退出移动版