uniapp使用echarts图表全屏切换
时间: 2025-07-06 07:59:27 浏览: 7
### 实现 UniApp 中 ECharts 图表的全屏切换功能
为了实现在 UniApp 中 ECharts 图表的全屏切换功能,需考虑不同平台下的兼容性和用户体验。具体方法如下:
#### 页面布局调整支持全屏显示
通过 CSS 控制图表容器大小,在进入全屏模式时动态修改样式以占据整个屏幕区域。
```css
/* 默认状态下 */
.chart-container {
width: 100%;
height: 400px;
}
/* 进入全屏后的覆盖样式 */
.fullscreen .chart-container {
position: fixed !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
```
#### 添加按钮触发全屏操作
在 HTML 结构中加入用于控制全屏状态切换的按钮,并绑定相应的事件处理函数[^2]。
```html
<template>
<view class="fengx">
<!-- ... -->
<button type="primary" size="mini" @click="toggleFullScreen">全屏</button>
<mpvue-echarts @onInit="lineInit" canvasId="line" ref="lineChart"/>
<!-- ... -->
</view>
</template>
```
#### JavaScript 处理逻辑编写
利用 `Element.requestFullscreen()` API 来请求浏览器进入或退出全屏模式;对于不支持此特性的设备,则采用模拟方式实现类似效果。同时更新图表实例尺寸适应新的视窗比例[^1]。
```javascript
export default {
data() {
return {
isFullScreen: false,
chartInstance: null, // 存储初始化后的 echarts instance 对象
};
},
methods: {
toggleFullScreen() {
const container = this.$refs.lineChart.$el.parentNode;
if (!this.isFullScreen && document.documentElement.requestFullscreen) {
container.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
this.isFullScreen = !this.isFullScreen;
setTimeout(() => {
this.chartInstance.resize();
}, 300);
},
lineInit(canvas, width, height) {
const chart = echarts.init(canvas);
let option = {/* 配置项 */};
chart.setOption(option);
this.chartInstance = chart;
return chart;
}
}
};
```
注意:当应用运行于某些特定环境(如微信小程序)下时,可能无法直接调用原生 DOM 的 fullScreen 方法,此时应参照官方文档寻找替代方案[^3]。
阅读全文
相关推荐


















