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

简介: 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

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
数据可视化 算法 BI
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
|
21天前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
81 0
|
21天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
81 2
|
21天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
37 0
|
21天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
35 0
|
21天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
21 0
|
21天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
25 0
|
21天前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
21天前
echarts图表
echarts图表
|
21天前
|
JavaScript
如何在vue添加echarts图表
如何在vue添加echarts图表
23 0