缩放带来的echarts模糊

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

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

解决方法:dom

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

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

拉伸后图片依然清晰,可是有目前的 SVG 版中,富文本、材质功能还没有实现;(因此对于效果复杂的echarts图来讲不太理想);图片

(2)、使用devicePixelRixelRatio: 2 ;开发

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

echarts API中有注明;再次只是总结记录;io

相关文章
相关标签/搜索