縮放帶來的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

相關文章
相關標籤/搜索