[Bug] resize() does not redraw chart with correct devicePixelRatio after browser zoom

[danvk]

Version

6.0.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=line-simple

Steps to Reproduce

• Open any of the eCharts examples (e.g. line-simple).
• Zoom in using the browser's zoom, e.g. Cmd+ on a Mac or Ctrl+ on a PC.
• Observe that the chart is blurry.
• Reload the page. The chart is now crisp at the new zoom level.

Current Behavior

Zooming results in a blurry chart, even after a call to myChart.resize(). You have to reload the page to get a crisp chart.

https://github.com/user-attachments/assets/0b92aa4a-fe05-4051-87ba-0966a7626db0

Expected Behavior

The chart should detect changes in devicePixelRatio. Barring that, calling resize() when devicePixelRatio has changed should redraw the chart at the new devicePixelRatio.

Environment

- OS: macOS Sonoma 14.6.1 (23G93)
- Browser: Chrome 142.0.7444.162
- Framework: none

Any additional comments?

No response

[helgasoft]

Workaround: changing the renderer parameter from 'canvas' to 'svg' will keep the chart crisp after browser zoom. Demo and more info.

[danvk]

@helgasoft My charts have a lot of points, so SVG isn't a good option.

It's interesting that devicePixelRatio is a parameter for echarts.init, rather than an option. That might explain why resize() doesn't pick up the change.

What's even more surprising to me, though, is that I'm using vue-echarts and changing the key on my VChart doesn't make the chart pick up the change. I would have expected an unmount/remount to do the trick.