echarts使用transform缩放后导致图标模糊

echarts使用transform缩放后导致图标模糊 --的解决办法

当使用了transform: scale(x,y)缩放后致使echarts图表模糊。怎么解决这个问题呢？
第一种解决办法:将canvas转换成svg。
在初始化时就指定渲染器为svg：echarts.init(dom,null,{ renderer : 'svg' });
第一个参数是：echarts的容器。第二个参数是:颜色主题，没有可以设置为null
第三个参数就是说使用用svg渲染器。为什么使用  svg 渲染器就可以解决图表模糊的问题呢？
这里就要说道 canvas和svg的区别了：
需要注意的是：目前的 svg中 富文本、材质功能尚未实现；所以对于效果复杂的echarts图来说不太理想；
但是柱状图，饼状图，折线图是没有任何问题的。可以使用svg渲染器。

canvas和svg的区别 ok

1.canvas通过JS来绘制，只要它的位置发生改变，就得重新绘制
1.svg使用XML的2d语言
2.canvas它是基于像素点，依赖屏幕的分辨率,可能会失真。
2.svg不依赖屏幕分辨率，不会失真
3.canvas适合图像密集的场景如:游戏
3.svg不适合游戏
4.canvas支持颜色比svg多；
5.svg 内存占用更低，渲染性更更高一些。

charts的默然渲染方式是canvas渲染，但是Canvas 数量多也可能会导致内存占用超出设备的承受能力。

选择哪种渲染器呢？

 一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表.
(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等)也利于实现某些视觉 特效。

SVG 具有重要的优势：

1.它的内存占用更低（这对移动端尤其重要）、渲染性能略高、浏览器缩放功能时不会模糊。
SVG 渲染器在折、柱、饼图上相对canvas更好一些。

参考的地址:https://juejin.cn/post/6844903749605916679