fix(heatmap): add option for align in heatmap

[xiaoyueguang]

Brief Information

This pull request is in the type of:

• [x] bug fixing
• [x] new feature
• [ ] others

What does this PR do?

add option called strictlyAligned, fix lines aligned in Heatmap.

Fixed issues

issues/14733

Details

Before: What was the problem?

Lines are not aligned in Heatmap

You can see this demo

After: How is it fixed in this PR?

The error is caused by the conversion of the decimal point to an integer.

  // 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
  });

I add an option to fix this issues, but this will cause performance issues.

So developers can look at the scene to determine whether to enable.

Misc

• [x] The API has been changed (apache/echarts-doc#xxx).
• [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

test/heatmap-strictly-aligned.html

NA.

Others

Merging options

• [x] Please squash the commits into a single one when merge.

Other information

[echarts-bot[bot]]

Thanks for your contribution! The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

[hughess]

I ran into this as well and hoping this PR has the fix to it. My heatmap has borders, which makes the misalignment slightly more obvious as well. See example here

[hughess]

any chance this will be in the next version?

Currently, it's challenging to make a heatmap that doesn't look strange due to the lines/boxes being out of alignment: