解决echarts canvas绘图字体不清晰的问题

原创已于 2022-11-24 17:13:04 修改 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2022-05-08 00:15:00 首次发布

本文介绍如何使用ECharts的SVG渲染模式，通过设置`renderer: 'svg'`选项，将原本的Canvas绘图转换为SVG，以实现更清晰的图表展示效果，尤其适用于需要高分辨率输出或者需要进行复杂图形交互的场景。

转化为svg，会更清晰

   // 初始化echart
      this.chart = this.$echarts.init(document.getElementById("line1"), null, { renderer: "svg" }); 
   //{ renderer: "svg" } 将原来的canvas绘图改为svg 清晰度更高

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小程

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

高清屏中使用Canvas绘图出现模糊的问题及解决方法

01-19

高清屏出现以前，屏幕的一个物理像素就是css所定义的一个逻辑像素（估计那个时候还没有物理像素和逻辑像素的概念）。因此使用下面代码就可以在浏览器中展示一个600×386的Canvas。 <html> <head> <title>Canvas demo</title> <style> * { padding: 0; margin: 0; } html, body { width: 100%; } #canvas { display: block;

解决微信小程序引用echarts视图模糊的问题

03-29

在小程序项目中需要用到echarts图表但是展示的时候遇到了问题图表高度失真体验感非常差 (此图片来源于网络，如有侵权，请联系删除! ) 经过一番查找实验，终于找到了解决方案下面上代码！ function initChart(canvas, width, height,dpr) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr //解决小程序视图模糊的问题，必写 }); canvas.setChart(chart); var checkName

参与评论您还未登录，请先登录后发表或查看评论

【echarts模糊问题】echarts 渲染出的图表和文字模糊问题

seeeeeeeeeee的博客

12-31

3423

方法1：使用svg渲染，svg渲染出的图表的清晰度高于canvas var myChart = echarts.init(document.getElementById('chart'), null, {renderer: 'svg'}); 方法2：还是使用canvas渲染，通过调整devicePixelRatio提升清晰度 var myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 2.5})

canvas绘制图像或者文字时模糊

u010869754的专栏

04-14

1万+

注：紧接上一篇未作处理的canvas画出来的图用canvas绘图，发现图像和文字变得模糊了，之前看了一些资料说，canvas都是一个px一个px画的，觉得不可能会出现模糊因为项目是跑在ios上，开发用的mac，于是查了下资料，发现ios4-ios6屏幕分辨率：设备分辨率 = 1 ： 2，也就是说，我们用canvas画的图1个点对应的其实是被横向纵向放大了2倍的，基于些，我用了如

Canvas绘制模糊问题

cratingJ的博客

07-06

5068

Canvas绘制模糊问题

html5 canvas绘图模糊总结

Win32FanEx 的专栏

05-12

2371

canvas绘图过程中出现模糊情况及解决办法

echarts 各类统计图高分辨下文字模糊

热门推荐

杨秀璋的专栏

08-24

3万+

前一篇文章讲述了数据预处理、Jieba分词和文本聚类知识，这篇文章主要介绍Matplotlib和Pandas扩展包绘图的基础用法，同时引入Echarts技术，该技术主要应用于网站可视化展示中。本文内容以实例为主，给读者最直观的图形感受。两万字基础文章，希望对您有所帮助。

精选资源

常用 echarts 的配置

05-26

ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，...同时，ECharts 的文档和社区提供了大量示例和解决方案，是学习和应用ECharts的重要资源。

echarts文字不清晰问题

huanxi_1016的博客

03-27

1979

使用 svg 渲染，svg 渲染出的图表的清晰度高于 canvas var chartDom = document.getElementById("numberLine"); var myChart = echarts.init(chartDom, null, { renderer: "svg" }); 仍然使用 canvas 渲染，通过调整 devicePixelRatio 提升清晰度 var chartDom = document.getElementById("numberLi..

echarts图例失真，字体模糊问题解决

MagicalIT的博客

06-28

2458

echarts图例失真，字体模糊问题解决。

canvas 实现图片局部模糊_使用 canvas 画图时图像文字模糊的解决办法

weixin_39851974的博客

12-20

237

最近在使用 canvas 画图的时候，遇到了图像文字模糊的问题，解决思路就是根据分辨率创建不同尺寸的画布。以下是创建高分辨率画布的代码：/*** 创建高分辨率画布* @param w 画布宽* @param h 画布高* @param ratio 屏幕分辨率*/function createHiDPICanvas(w, h, ratio?) {const PIXEL_RATIO =...

高清屏下canvas绘制文字模糊

衣乌安、随笔

08-16

5554

在浏览器的 window 对象中有一个 devicePixelRatio的属性，该属性表示了屏幕的设备像素比，即用几个（通常是2个）像素点宽度来渲染1个像素。举例来说，假设devicePixelRatio的值为 2 ，一张 100×100 像素大小的图片，在 Retina 屏幕下，会用 2 个像素点的宽度去渲染图片的 1 个像素点，因此该图片在 Retina 屏幕上实际会占据 200×200 像...

echarts图表在浏览器进行缩放时，会变得模糊的问题

m0_59483744的博客

03-18

2150

1、我们可以在渲染图表的时候添加一个参数，通过改变该参数来提高图表的像素值，{devicePixelRatio: 2}该参数的意思是设备像素比。theme：指定图表的主题，可选值为字符串类型或者对象类型，echarts默认内置了两套主题：light 和dark。renderer：指定图表的渲染方式，可选值为 ‘canvas’ 或 ‘svg’、或’webgl’。devicePixelRatio：指定图表的设备像素比，用于提高图表的清晰度。模糊情况如下图：字体很虚化。el：图表要渲染到的元素。

unity中字体Canvas的字体模糊与清晰

qq_40666620的博客

10-05

3259

我们经常看到，为什么我的字体和别人的字体一样大，但是别人的是如此的清晰，令人愉悦，而我的却如此模糊，甚至缩小到一定程度，连字都看不清楚了，令人感到恶心这是因为，字体的清晰模糊是与字体大小相关联的，字体的大小是与缩放（scale）相关联的，所以你要想让你的字体变得很清晰，可以先把canvas调的很大，再把字体调的很大，之后再进行缩放，把scale调小，这样就等比缩小了，字体也显得特别清晰，如下图所...

html canvas 模糊,解决 canvas 在高清屏中绘制模糊的问题

weixin_42362931的博客

06-05

2432

使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图：因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。因此，要做 Retina 屏...