vue-echarts渲染时视图模糊的解决办法

vue-echarts渲染时视图模糊的解决办法

在解决项目数据统计的过程中,选择了vue-echarts来作为视图显示数据。过程中,由于渲染后的视图清晰度不高,查询之下是因为vue-echarts默认选择canvas来渲染,当使用缩放后,渲染出来的便会稍显模糊。
在这里插入图片描述

解决的办法便是从canvas渲染改成svg渲染。
在这里插入图片描述

如果每次渲染时都需要配置该属性,不如直接从源码动手,修改其默认属性;

vue-echarts.vue
Echarts.vue
上图中可以看到,vue-echarts所使用的初始化函数init()是用的echarts中的初始化函数。所以可以直接找到echarts的初始化函数

echarts.jsecharts.js
而/lib/echarts.js中所使用的初始化函数又是调用了/core/echarts.js中的函数,所以可继续往下找初始化函数

/lib/echarts.js
echarts.js
当我们初始化的时候,调用的是:
echarts.init(document.getElementById(‘chart’), null);
如果需要调整为svg渲染,则是:
echarts.init(document.getElementById(‘chart’), null, {renderer: ‘svg’});

结合初始化函数及初始化时传入的参数,可以判断出ECharts()方法中的defaultRenderer就是默认的渲染方式,因此将其改成svg,便可以改变默认渲染方式,而不再需要每次使用时便配置一次。
在这里插入图片描述

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值