transform: scale(x,y)缩放后致使echarts图表模糊

1、将canvas转换成svg

　　在初始化时就指定渲染器为svg：

 echarts.init(dom , null , { renderer : 'svg' });

　　第一个参数是：echarts的容器；

　　第二个参数是：颜色主题，没有可以设置为 null ；

　　第三个参数是：说使用svg渲染器。

　　注释：为什么使用 svg 渲染器就可以解决图表模糊的问题呢？

　　　　1、canvas和svg的区别

• • canvas通过JS来绘制，只要它的位置发生改变，就得重新绘制 ；svg使用XML的2d语言。
  • canvas它是基于像素点，依赖屏幕的分辨率,可能会失真；svg不依赖屏幕分辨率，不会失真。
  • canvas适合图像密集的场景如:游戏；svg不适合游戏。
  • canvas支持颜色比svg多。
  • svg 内存占用更低，渲染性更更高一些。
  • 需要注意的是：目前的 svg中 富文本、材质功能尚未实现；所以对于效果复杂的echarts图来说不太理想； 但是柱状图，饼状图，折线图是没有任何问题的。可以使用svg渲染器。
  • 一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表. (如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等)也利于实现某些视觉 特效。
  • svg具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、浏览器缩放功能时不会模糊。 SVG 渲染器在折、柱、饼图上相对canvas更好一些。

这里就要说道 canvas和svg的区别了： 需要注意的是：目前的 svg中 富文本、材质功能尚未实现；所以对于效果复杂的echarts图来说不太理想； 但是柱状图，饼状图，折线图是没有任何问题的。可以使用svg渲染器。