解决 echarts 在部分浏览器下显示模糊的问题。

主要是渲染方式的区别，根据分辨率的大小选用不同的渲染器。

屏幕分辨率宽度大于1920时使用SVG渲染器，小于1920时使用Canvas渲染器的策略是合理的。以下是这种策略的优势和考虑因素：

1. 高分辨率屏幕（宽度大于1920）：

使用SVG渲染器：SVG渲染器适合矢量图形和高分辨率显示。由于SVG不依赖屏幕分辨率，不会失真，因此在高分辨率屏幕上使用SVG渲染器可以保持图表的清晰度和质量。此外，SVG渲染器在移动端的总体表现更好，特别是在内存占用和渲染性能方面。

2. 低分辨率屏幕（宽度小于1920）：

使用Canvas渲染器：Canvas渲染器适合绘制图形元素数量非常大的图表，也利于实现某些视觉特效。在数据量较大或者有图表交互动画的场景中，Canvas渲染器的性能通常优于SVG渲染器
。因此，在低分辨率屏幕上，使用Canvas渲染器可以提高性能和响应速度。

3. 性能和清晰度的平衡：

这种策略能够在保持图表清晰度的同时，根据屏幕分辨率优化性能。在高分辨率屏幕上，SVG提供了更好的清晰度和质量；而在低分辨率屏幕上，Canvas提供了更好的性能。

实现方法

您可以通过检测屏幕分辨率来动态设置渲染器。例如，在JavaScript中，您可以使用window.innerWidth来获取屏幕宽度，并根据其值来初始化ECharts实例：

var renderer = window.innerWidth > 1920 ? 'svg' : 'canvas';
var chart = echarts.init(document.getElementById('container'), null, { renderer: renderer });

这样，ECharts将根据屏幕分辨率自动选择最合适的渲染器。

综上所述，根据屏幕分辨率动态选择SVG或Canvas渲染器是一种有效的策略，可以平衡图表的清晰度和性能。这种方法充分利用了SVG和Canvas各自的优势，为用户提供了更好的视觉体验和性能表现。

补充

如果还是有问题，那可以换一种方式：通过动态改变渲染时缩放的比例实现。
第一步：获取浏览器的缩放比例

// 获取浏览器的缩放比例
export function getScale(){
  const currentScale = document.documentElement.clientWidth / window.innerWidth;
  const formattedScale = currentScale > 1 ? currentScale : 1
  const resultScale = formattedScale * window.devicePixelRatio;
  return resultScale;
}

第二步：渲染图表

this.charts = this.$echarts.init(this.$refs.chart, 'walden',{devicePixelRatio: getScale()});