缩放带来的echarts模糊

原文参考

当使用了transform: scale(x,y)缩放后致使echarts图表模糊：添加页面缩放功能势必带来，页面变形模糊；若所开发的分辨率和要显示的分辨率差距较小时，或许影响很小，但是差距变大时，页面显示将会很糟糕（尤其是echarts图标）；

注意：使用transform: scale(x,y)缩放，并不是好的选择，但是有时候由于项目经理在前期开发时未对项目的分辨率做出准确的规定后后期更改，但时间节点要求很短时，使用这种野路子也是能够快速达到要求的不错选择；

解决方法：

针对于echarts不清楚问题有两种解决办法：

（1）、将canvas转换成svg; 在初始化时：echarts.init(dom,null,{ renderer : 'svg' });

拉伸后图片依然清晰，但是有目前的 SVG 版中，富文本、材质功能尚未实现；（所以对于效果复杂的echarts图来说不太理想）；

（2）、使用devicePixelRixelRatio: 2 ；

虽然也不是很完美，但是当echarts的canvas使用的很复杂的时候，不影响属性效果的显示，使用设备像素比，是相当可以的；echarts.init(dom,null,devicePixelRatio:2));

echarts API中有注明。

---------分割线-------

设备像素比参考

echarts的init()介绍

补充：

使用transform: scale(x,y)缩放后，页面的字体可能也会变的太大或太小，可以在页面缩放后，将字体大小根据缩放比例再设置一遍。