[Bug] Weird tooltip behavior using xAxis value and custom rect render

[sclebal]

Version

5.3.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html

Steps to Reproduce

Use the following code in a echarts playground:

const formattedData = [
  [959651, 1148757.5, 115],
  [1148757.5, 1337864, 1602],
  [1337864, 1526970.5, 5119],
  [1526970.5, 1716077, 4203],
  [1716077, 1905183.5, 882],
  [1905183.5, 2094290, 45]
];

function tooltipFormatter(params) {
  console.log(params)
  if (Array.isArray(params)) {
    params = params[0];
  }

  const [left, right, value] = params.data;
  const title = `${left} - ${right}`;
  const item = `<div style="margin-left: 8px; display: inline">
        ${value}
        </div>`;
  return `${title} <div style="margin-top: 4px">${params.marker}${item}</div>`;
}

option = {
  grid: {
    left: '5%',
    right: '5%',
    top: 16,
    bottom: 8,
    containLabel: true
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    padding: [4, 8],
    borderWidth: 0,
    textStyle: {
      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
      fontWeight: 400,
      fontSize: 12,
      lineHeight: 16,
      letterSpacing: '0.03333em',
      color: '#fff'
    },
    position: function (point, params, dom, rect, size) {
      const position = { top: 0 };

      if (size.contentSize[0] < size.viewSize[0] - point[0]) {
        position.left = point[0];
      } else {
        position.right = size.viewSize[0] - point[0];
      }
      return position;
    },
    formatter: tooltipFormatter,
    backgroundColor: 'rgba(44, 48, 50, 0.9)'
  },
  xAxis: {
    min: 959651,
    max: 2094290,
    /*axisPointer: {
      show: true,
      lineStyle: {
        color: 'rgba(44, 48, 50, 0.4)'
      },
      label: {
        show: false
      }
    },*/
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(44, 48, 50, 0.05)'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      showMinLabel: true,
      showMaxLabel: true,
      fontFamily: '"Open Sans", sans-serif',
      fontWeight: 400,
      fontSize: 10,
      lineHeight: 1.6,
      letterSpacing: '0.150em',
      fontSmoothing: 'antialiased',
      hideOverlap: true,
      padding: [4, 4, 0, 4],
      color: 'rgba(44, 48, 50, 0.6)'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(44, 48, 50, 0.05)'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      margin: 0,
      verticalAlign: 'bottom',
      padding: [0, 0, 10, 0],
      show: true,
      showMaxLabel: true,
      showMinLabel: false,
      inside: true,
      fontFamily: '"Open Sans", sans-serif',
      fontWeight: 400,
      fontSize: 10,
      lineHeight: 1.6,
      letterSpacing: '0.150em',
      fontSmoothing: 'antialiased'
    }
  },
  series: [
    {
      type: 'custom',
      dimensions: ['from', 'to', 'profit'],
      encode: {
        x: [0, 1],
        y: 2,
        tooltip: [0, 1, 2]
      },
      renderItem: function (params, api) {
        const isLast = params.dataIndex === formattedData.length - 1;
        var yValue = api.value(2);
        var start = api.coord([api.value(0), yValue]);
        var size = api.size([api.value(1) - api.value(0), yValue]);
        var style = api.style();
        return {
          type: 'rect',
          shape: {
            x: start[0],
            y: start[1],
            width: size[0] - (isLast ? 0 : 1),
            height: size[1]
          },
          style,
          // emphasisDisabled: true,
          emphasis: {
            focus: 'self',
            style: {
              fill: 'rgb(53, 164, 114)'
            }
          }
        };
      },
      color: ['#47db99'],
      data: formattedData
    }
  ]
};

Current Behavior

Screen.Recording.2022-04-27.at.09.22.00.mov

As you see in the video:

• When using the trigger axis (which I want, because I don't want to have to hover the item to show the tooltip), the tooltip of the following bar appears after passing half of the current bar and the axisPointer stays in the left of it.
• When I mouseover a bar but this 🔝 problem happens, both bars appears emphasised.

Expected Behavior

• I expect that the tooltip changes only when the mouse is hovering/above another item, not in the half, also I expect that the axisPointer appears in the middle of the bar.
• The same for emphasis, only in the bar that is being shown in the tooltip.

Environment

- OS: macOS Monterey
- Browser: Chrome 100

Any additional comments?

I'm sorry if this is not a bug, but I don't fully understand what's going on. Thanks in advance.

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!