解决echarts 在缩放中模糊的问题

echarts 在缩放中模糊的问题

参考：缩放带来的echarts模糊

1、echarts.init(dom,null,{ renderer : 'svg' });
2、echarts.init(chart,null, { devicePixelRatio: 2 });

问题：在使用dom-to-image插件截图的情况下：
1、使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。

2、使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理，但显示效果没有renderer : 'svg’好，肉眼可见的感觉有锯齿。

查找使用方式一字体被放大的原因

在我们的示例中，legent字体设置的是10px，外部通过scale实现放大1.25倍，最终得到字体12px的效果。

dom-to-image的截图原理，就是将dom转成svg，而这一步骤主要通过dom转成xml的函数：new XMLSerializer().serializeToString(node)， 打印这个结果，发现xml中，echart的legend文字大小为12px。

经测试发现，echarts中字体小于12px的在转成图片时，都当做12px处理了，所以导致最终生成的图片与dom不一致。

解决办法
找到了原因，那只要保证echarts中的字体最小为12就行，显示上可以通过加一层缩小来解决

// 在外部有1.25的放大下，实际应该使用0.8的缩小来保证最后缩放是1， 但根据实际需求显示调整缩小为0.85
.chart{
   // 对echarts采用缩放，保证字体大小显示与截图一致
    transform: scale(0.85); 
    transform-origin: 0 0;
    width: 117%;   //  原100 / 0.85
    height: 117%;  //  原100 / 0.85
    margin: auto;
    border-radius: 9.4Px; // 原8 / 0.85
}