Lines are not aligned in Heatmap

[xiaoyueguang]

Version

5.1.0

Reproduction link

https://jsfiddle.net/mdgjno6w/

Steps to reproduce

open this link

What is expected?

the lines are straight

What is actually happening?

Lines are not aligned

---

I feel that the main reason for this is that things here are calculated to a decimal point

HeatmapView2.prototype._renderOnCartesianAndCalendar

width = (xAxis.getBandWidth());

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[plainheart]

Seems so. Would you mind making a PR to fix this?

[xiaoyueguang]

Seems so. Would you mind making a PR to fix this?

I found out how this problem arises.

  // src/chart/heatmap/HeatmapView.ts
  rect = new graphic.Rect({
      shape: {
          x: Math.floor(Math.round(point[0]) - width / 2),
          y: Math.floor(Math.round(point[1]) - height / 2),
          width: Math.ceil(width),
          height: Math.ceil(height)
      },
      style
  });

x, y, width and height in Shape possible calculation error.

• If you want to render perfect, these lengths need to keep a decimal point, this will cause performance issues.
• If set these lengths to int, there will be a bit of coverage or gaps when rendering. like this demo

So I now use this to ensure perfect rendering:

• Set the grid.width to be an integer multiple of xAxis.count

[Ovilia]

@xiaoyueguang Please link this issue when you are ready to make a pull request.

[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.