echart K線カスタムtooltipマウスのストップ表示データの詳細
1416 ワード
echart K線カスタムtooltipマウスのストップ表示データの詳細
トリガtooltipは、2つの
異なるトリガ条件は、
axisでトリガする場合
tooltipにおけるparamsデータ構造は以下の通りである.
これに基づいてtooltipを書けばいいです.
tooltipのformater受信パラメータ
トリガ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
}