[Bug] saveAsImage with pixelRatio > 1 renders 3D / echarts-gl components blank
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
6.1.0
### Link to Minimal Reproduction
https://codepen.io/Danish-Munib/pen/raWzBYG
### Steps to Reproduce
1. Create a 3D chart using echarts-gl (e.g., line3D, surface, or bar3D).
2. Add the toolbox.feature.saveAsImage configuration.
3. Set pixelRatio in saveAsImage to a value greater than 1 (e.g., pixelRatio: 2).
4. Trigger saveAsImage via the toolbox button or programmatically using chart.getDataURL().
### Current Behavior
When pixelRatio is set to 1, the exported image renders correctly.
However, setting pixelRatio > 1 results in an exported image where the WebGL viewport/3D canvas content is entirely blank. Only 2d elements (such as the visualMap legend) are rendered.
### Expected Behavior
The exported image should render the complete 3D chart at high resolution corresponding to the specified pixelRatio.
### Environment
```markdown
- OS: Windows 10 Pro 22H2
- Browser: Brave 1.92.140 (Official Build)
- Framework: Vanilla JS
```
### Any additional comments?
The issue appears to stem from how WebGL framebuffers handle resizing during off-screen rendering when target pixel ratios are increased.
Contributor guide
Research direction
Start with the linked CodePen reproduction and trace toolbox.feature.saveAsImage and chart.getDataURL when pixelRatio is greater than 1. Inspect the echarts-gl WebGL off-screen rendering and framebuffer resize path. Done means line3D, surface, and bar3D exports contain the 3D content at higher resolution while 2D elements remain correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100