当前位置:Gxlcms > JavaScript > 在vue中使用echarts3.0自适应的方法有哪些?

在vue中使用echarts3.0自适应的方法有哪些?

时间:2021-07-01 10:21:17 帮助过:42人阅读

这篇文章主要介绍了vue中echarts3.0自适应,现在分享给大家,也给大家做个参考。

前端时间做一个vue的项目,echart是按需引入的如下:

然后发现在缩放浏览器窗口时折线图并不会自适应,费了好一会才解决,记录下来给需要的小伙伴,

第一种:浏览器自适应

通过:

在myChart.setOption后添加

如果有多个图形,可以封装成方法:

第二种情况,根据p大小的变化进行自适应

因为vue不能实时监测p大小变化的,所以我定义了一个按键,当按键的值变化的时候,进行resize;

其实我用这个是在导航进行伸缩的时候,导致p大小发生了变化,所以这样执行reszie,就能完美的自适应

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中slot如何实现在子组件中显示父组件传递的模板(详细教程)

利用vue如何实现裁切图片同时实现放大、缩小、旋转功能(详细教程)

有关React组件性能优化详细讲解

以上就是在vue中使用echarts3.0自适应的方法有哪些?的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行