Vue+Echarts 大屏开发遇到的问题

最新推荐文章于 2025-05-22 08:30:00 发布

原创最新推荐文章于 2025-05-22 08:30:00 发布 · 803 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍在Vue项目中如何实现Echarts图表的全屏展示及切换功能，通过引入screenfull插件完成。同时，解决图表随窗口大小变化自适应的问题，避免因父组件和子组件同时使用window.onresize导致的功能冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 中使用Echarts 其实很简单，粘就完了
在这里插入图片描述

echarts 和axios 使用

问题一：点击图标全屏展示，并且切换图标
一：下载引入screenfull 插件

npm install screenfull --save

//在调用全屏功能的组件中引入
import screenfull from 'screenfull'

布局如下
在这里插入图片描述
定义窗口事件

二：echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）
使用一个window.onresize 时，可以使用，引入第三个问题

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
    myChart.resize();
    //myChart1.resize();    //若有多个图表变动，可多写

}

三：在vue开发中，因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。
找了下解决方案，可以采用下面的方式写就可以了。

window.onresize = () => {this.measure()}
window.addEventListener('resize',() => this.measure1(), false)
window.addEventListener('resize',() => this.measure2(), false)
销毁可以采用下面的方式

beforeDestroy () {
  window.removeEventListener('resize', this.measure1(), false)
}
beforeDestroy () {
  window.onresize = null
}

在这里插入图片描述
参考地址：https://blog.youkuaiyun.com/asm35548/article/details/101797302