您现在的位置是:网站首页> 编程资料编程资料

vue中设置echarts宽度自适应的代码步骤_vue.js_

2023-05-24 266人已围观

简介 vue中设置echarts宽度自适应的代码步骤_vue.js_

问题描述

我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。我们先看一下没有做echarts自适应的效果

无自适应效果图

我们发现echarts图的宽度并没有随着页面宽度的变化而变化

有自适应效果图

很显然,这个才是我们想要的效果

代码步骤

echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行echarts的resize方法即可重绘canvas,从而实现对应自适应效果。请看代码中的注释步骤

到此这篇关于vue中设置echarts宽度自适应的问题及解决方案的文章就介绍到这了,更多相关vue 宽度自适应内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

-六神源码网