[Bug] Tooltip formatter gives wrong values

[leomerel]

Version

Bug appeared in v.5.2.0 and still is in latest version (v5.3.2)

Link to Minimal Reproduction

https://codepen.io/meredev/pen/OJzqwNg

Steps to Reproduce

1. Zoom on the chart with the mouse wheel (to see just a few of the points)
2. Click somewhere on the chart -> a vertical dashed-line appears (at a given x) and the tooltip shows the right value (for that x)
3. Pan to the left or the right -> the dashed-line is still where it's supposed to be (at the same x), but the tooltip doesn't show the right value (it shows the value for another x instead).

Here is a visualization of the steps to follow (click to expand) :

Current Behavior

The tooltip is not displaying the value it's supposed to (the one along the axisPointer). If you move the chart to a side (=pan), the axisPointer stays on the point (here x=13) BUT the tooltip doesn't display the value of this point. In the screenshot below, we see that it displays y=900 (which is the value of x=15) instead of showing y=377 (which is the value for x=13).

When looking to the params object of the formatter function (with console.log), we can clearly see that axisValue (which is good) doesn't fit with value or name ...

Formatter function params object :

Expected Behavior

It should display the value of the point that is on the axisPointer (the vertical dashed-line). If you move the chart to a side (=pan), the axisPointer stays on the point (that already works) BUT the tooltip should display the value of this point.
In the params object of the formatter function, axisValue should be the same as name, and should fit with data, dataIndex and value.

Environment

- OS:Windows 10
- Browser: Chrome
- Framework: Vue 2

Any additional comments?

This worked prior to v5.2.0 (I tried with v.5.1.2 and it worked as expected)

After digging a bit more in this bug, i think the formatter function should not even be called when zooming or panning (since the values to display in the tooltip stay the same, there is no reason to call the tooltip formatter function).

[jiawulin001]

Problem locating

The problem seems to be that when tooltip is only updated by 'click' event, the value of dataByCoordSys here stays the same all the time.

echarts/src/component/tooltip/TooltipView.ts

Lines 263 to 272 in 3961cef

	this._refreshUpdateTimeout = setTimeout(function () {
	// Show tip next tick after other charts are rendered
	// In case highlight action has wrong result
	// FIXME
	!api.isDisposed() && self.manuallyShowTip(tooltipModel, ecModel, api, {
	x: self._lastX,
	y: self._lastY,
	dataByCoordSys: self._lastDataByCoordSys
	});
	}) as any;

But after that it is treated as a relative position on axis. So when axis extent changes, the same relative position sits a totally different value. Here cbParams tries to get the value on a relative position dataIndex of the axis extent.

echarts/src/component/tooltip/TooltipView.ts

Line 565 in 3961cef

const cbParams = series.getDataParams(dataIndex) as TooltipCallbackDataParams;

Solution

Since the code of getting value of relative solution is a well-wrapped and widely used by all kinds of other chart. It would be better to play a trick here by preventing Echarts from updating tooltip unless item is clicked when triggerOn is set to click.
So my plan is to add a check tooltipModel.get('triggerOn') !== 'click' at:

echarts/src/component/tooltip/TooltipView.ts

Lines 254 to 260 in 3961cef

	if (this._lastX != null
	&& this._lastY != null
	// When user is willing to control tooltip totally using API,
	// self.manuallyShowTip({x, y}) might cause tooltip hide,
	// which is not expected.
	&& tooltipModel.get('triggerOn') !== 'none'
	) {

So that Echarts wouldn't update tooltip untill another click. However this method will still allow Echarts to move axisPointer as axis extent changes so the axisPointer would not be compatible to the clicked item.
I think there should be another better solution. Might need some help here.