描述：Echarts是大多数用户开发可视化大屏展示的所选择的框架，在使用的过程中可能遇到一些问题，例如UI同学走查的时候用他的钛合金像素眼发现生成的图表文字线条等模糊，测试都准备上线了，你搁爷弄啥呢！没办法，在产品的动摇下自己还是多读读文档优化下吧！
优化方案（鱿鱼须：有的人就是不看文档）:
1.不用canvas，使用svg,const chart = echarts.init(dom, null, {renderer: 'svg'});
2.使用canvas，const chart = echarts.init(dom, null, { devicePixelRatio: ratio })。
优缺点
1.使用svg的方式可以解决大多数常规情况，但是细看还是会发现有一些模糊 2.使用canvas方式需要传入一个dpr系数，如果给定一个定值的话换一个平台展示可能就出现不适配的情况，可能有的小伙伴说，系数给大一点不就行了，有什么不能李姐的呢？我的回答是当然可以，但是我有点废姐，因为那样会对页面渲染性能产生一定影响，最好的方式就是结合屏幕分辨率动态计算出一个值，因地制宜。
那么怎样计算dpr系数呢？直接 window.devicePixelRatio？恐怕是不行，因为可视化大屏展示涉及到缩放，不同的设备宽高比不一致，所以还需要结合设计给出的ui以及设备实际的宽高比例等实际情况，可以参考下我的另一篇关于大屏适配的文章Echats图表实现大屏自适应；feifa少说，上代码：
* 获取缩放比例全屏
* @param {boolean} containRatio 是否计算设备像素比
* @param {number | string} baseWidth 基础宽度
*/
export const getScale = (containRatio = true, baseWidth = 1920) => {
const currentScale = document.documentElement.clientWidth / baseWidth
const formattedScale = currentScale > 1 ? currentScale : 1
const resultScale = containRatio ? formattedScale * window.devicePixelRatio : formattedScale
return Math.ceil(resultScale)
}
