[Bug] Series-line is clipped incorrectly at the rightmost position

[RexSkz]

Version

5.4.3

Link to Minimal Reproduction

https://codepen.io/rexskz/pen/WNLweyw

Steps to Reproduce

1. Open the codepen link.
2. Look at the rightmost position of the line.

Current Behavior

It's clipped incorrectly, but the leftmost position of the line is okay.

Expected Behavior

The rightmost position should not be clipped, just like the leftmost one.

Environment

- OS: macOS Ventura
- Browser: Chrome 116.0.5845.110
- Framework: /

Any additional comments?

The root cause is that ECharts uses Math.round in createClipPathFromCoordSys.ts:

const rect = cartesian.getArea();
let width = rect.width;
width = Math.round(width);

The width here can be a float with the decimal part less than 0.5:

Finally, it results in the incorrect clipPath, just 1px smaller than expected:

---

This issue can only be reproduced in a container with a specific width (503px in the codepen link).

This issue might be related to #11369; considering it meant to extend the clipPath and use Math.floor on x, I think it's okay to use Math.ceil on width to ensure the clipPath is large enough to contain the whole line (with cap).

[RexSkz]

It seems that using Math.ceil is not enough, the devicePixelRatio should be considered. The full code might be:

- const lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
+ const _lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;

+ // I don't know where to find the dpr from `echarts.init`, so I
+ // use `window.devicePixelRatio` as example
+ const lineWidth = _lineWidth * window.devicePixelRatio;

  // Expand the clip path a bit to avoid the border is clipped and looks thinner
  x -= lineWidth / 2;
  y -= lineWidth / 2;
  width += lineWidth;
  height += lineWidth;

  // fix: https://github.com/apache/incubator-echarts/issues/11369
  x = Math.floor(x);
- width = Math.round(width);
+ width = Math.ceil(width);

[RexSkz]

I just found that DPR can be retrieved from zrender instance:

const zr = cartesian.model.ecModel.scheduler.ecInstance.getZr();
const dpr = zr.painter instanceof CanvasPainter
    ? zr.painter.dpr
    : window.devicePixelRatio; /* global window */

const _lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
const lineWidth = _lineWidth * (dpr || 1);

And after multiplying DPR, there are no such numbers as x.333, only x.00009 or x.99996, which are the round-off error. Keeping Math.round should be fine.

PR is on the way...

[RexSkz]

It seems that using Math.ceil is not enough, the devicePixelRatio should be considered. The full code might be:

- const lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
+ const _lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;

+ // I don't know where to find the dpr from `echarts.init`, so I
+ // use `window.devicePixelRatio` as example
+ const lineWidth = _lineWidth * window.devicePixelRatio;

  // Expand the clip path a bit to avoid the border is clipped and looks thinner
  x -= lineWidth / 2;
  y -= lineWidth / 2;
  width += lineWidth;
  height += lineWidth;

  // fix: https://github.com/apache/incubator-echarts/issues/11369
  x = Math.floor(x);
- width = Math.round(width);
+ width = Math.ceil(width);

It's ok to use only Math.ceil, but the width should add an extra 1px if x is floored.