[Bug] markArea not displayed correctly when resizing
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
5.5.1
### Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=MYewdgzgLgBGCuBbARgUwE4HkBmAFEAlmFBDALwwCMATAAwDcAUM6JLAB4CC7BEAIgEMoA8jE7p0AgJ4A6bOhCIAFAG8YAG1RgA5lAAWALjhI0WPIWKkAvgBoYSgG4D18VHaIATVOwCU5AHwwnt4-TKzQMJJgHoqCwqJcPPxCAjKIAgAOSuwBMACyQnoyUTHKfgBU9pQArLQwALQwdH4A1E20ocwgGVAE4KIqjDAwUCAg6r0ZRoPDw1DoBNraGEYA5AJJqzZDsxu8-ERQKzAzs8MCYATpveBG2M4QqDvDVju2O5rL0dPPMB4pRgA2qsAKJODIgSQ3MBbGCrABKAiI93U6lWAF1tmdNNgoEZKLQ3liRmN1MgQOwfmdsKghPB0KgqWc_ikAFpjRBM5kwKTcXgASWi3jWYHAqFWvxexLODOgkMZJ3e3IgAgcqE4EH56WW01eZz1MCVMD2EAOxGOp2G6iIAGsgZKTg7hokBULKXDnGiHQbhuiiTsXRAuSMpBkFatgEJUNpIVItr9_sIjIG4gJ_cNeUldcTHgtUEGYIDfpbZomBEYSrEUtLZlBQ-HkAJ0PHuel0DbxLTg2cIARNMQjPNXDWzgQjogAMp1zTd5ndATAMdSIy0GQAZidhpHpYBhc3wyL3O5JaPszAAkQ4YA4gytC3T8yx6hJ9OFSeH8NQOpIWttLeYfuzJGh-zp8gWhIgVugHDO-p6Bvi0GGoBmKAYeIGwUe56Xms8KoB496QU-L5SDOjqQWcX4_nCDL4YhUp0TA8FNIhwEPhh3JMQALCxyHbmcaEfuxzJYeGACaqCoiAADuBEgURU4kW-DGfuMVGrFIEnfjJDGsR-THVCxfHMkJZxMQAbDxH4oR-AlsQxIlrAAQi44pGdy8mvrOH6UegazIC5ErkVBQVMQA7IZiEmbMTF0JZD7WQ-tmnlFwwOXCN6oHebmPuOCmkSlsw-b-_6BeRukPjFlARZBBUxQZkE-keCWnklR4FWlqzOa4skfh5ileQ-RVwv53U6dlplgUY1AWQ141keRTEAByLXFp7Ncyfrco1Bp-lY9BAA&random=ijkr0n6dyg&version=5.5.1&renderer=svg
### Steps to Reproduce
The problem appears when there are a lot of points on the chart, and the window size is small enough.
In the above example:
1. resize the chart area or adjust the 'numberOfPoints' variable in the example
2. colored ares are not behind the same datapoints as they were before the change
### Current Behavior
When X-axis has a lot of points on the chart and/or chart window is small enough, the markArea background is not displayed in the correct spot.

Background colors move as the chart is resized. The most obvious one is yellow - it should be behind points 5 and 6, but sometimes disappears completely and sometimes it is shown over points 4 and 7 as well.
Zoomed in view(using the dataZoom tool) is shown correctly:

Zoomed out - on the left, the yellow area is not visible at all and on the right it overlaps over points 4 and 7:
 
### Expected Behavior
markArea should be scaled at the same rate as the barchart itself, so marked areas are always shown behind the same bars.
In the provided example, the bars at 5 and 6 should always have yellow background.
### Environment
```markdown
- OS: macOS Sonoma
- Browser: Firefox 131, Chrome 129, Safari 17.2.1
```
### Any additional comments?
_No response_
Contributor guide
Research direction
Start with the linked minimal reproduction for ECharts 5.5.1 and reproduce the markArea displacement by resizing the chart or increasing numberOfPoints. Compare the markArea positions with the bars before and after resizing; done means the colored areas remain behind the same data points, including points 5 and 6, at different chart sizes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100