echart K線カスタムtooltipマウスのストップ表示データの詳細

1416 ワード

echart K線カスタムtooltipマウスのストップ表示データの詳細
トリガtooltipは、2つの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 + '
' + ' :' + currentItemData[1] + '
' + ' :' + currentItemData[2] + '
' + ' :' + currentItemData[3] + '
' + ' :' + currentItemData[4] } }
アイテムでトリガする場合
tooltipのformater受信パラメータparamsのvalue値は[ , , , , ]配列である.
tooltip: {
    axisPointer: {
        type: 'cross'
    },
    trigger: 'item',
    formatter: function (params) {
        return params.name + '
' + ' :' + params.value[1] + '
' + ' :' + params.value[2] + '
' + ' :' + params.value[3] + '
' + ' :' + params.value[4] }, borderWidth: 1 }