縮放帶來的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)縮放後，頁面的字型可能也會變的太大或太小，可以在頁面縮放後，将字型大小根據縮放比例再設定一遍。