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

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

相关文章
|
3月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
398 1
|
7月前
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
86 0
ECharts 蓝色系-荧光图标折线图01案例
Echarts中用到的base64图标
Echarts中用到的base64图标
138 0
|
XML 人工智能 搜索推荐
Echarts实战案例代码(5):liquidFill水球组件利用svg path定制你自己的个性化图标动态图
Echarts实战案例代码(5):liquidFill水球组件利用svg path定制你自己的个性化图标动态图
473 0
|
JavaScript 前端开发 搜索推荐
在Vue项目里使用ECharts图标库
在Vue项目里使用ECharts图标库
194 0
|
数据可视化 算法 BI
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
【中级ECharts技术】transform进行数据转换和dataZoom在项目中的使用(可视化非常的强劲)
|
3月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
104 1
|
3月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
686 0
|
4月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】

热门文章

最新文章