echarts的tree树形图容器设置宽800px,高800px,有一个全屏按钮,点击全屏按钮全屏效果如果数据多有滚动条,如果数据少就展示所有数据点击退出echarts显示原来的大小图表,全屏效果自适应
时间: 2024-05-05 09:16:15 浏览: 63
A-map-to-the-smallest-tree.rar_The Tree_最小树形图
可以通过以下步骤实现:
1. 设置echarts的容器大小为800px * 800px:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
// 其他配置项...
grid: {
width: 800,
height: 800
}
});
```
2. 添加全屏按钮,当点击按钮时,调用全屏函数:
```html
<button onclick="enterFullscreen()">全屏</button>
```
```javascript
function enterFullscreen() {
var chartContainer = document.getElementById('myChart').parentNode;
if (chartContainer.requestFullscreen) {
chartContainer.requestFullscreen();
} else if (chartContainer.mozRequestFullScreen) {
chartContainer.mozRequestFullScreen();
} else if (chartContainer.webkitRequestFullscreen) {
chartContainer.webkitRequestFullscreen();
} else if (chartContainer.msRequestFullscreen) {
chartContainer.msRequestFullscreen();
}
}
```
3. 当进入全屏模式时,重新设置echarts容器的大小为屏幕大小,并添加滚动条:
```javascript
document.addEventListener("fullscreenchange", function () {
if (document.fullscreenElement) {
myChart.resize({
width: window.screen.width,
height: window.screen.height
});
myChart.getDom().style.overflow = 'auto';
} else {
myChart.resize({
width: 800,
height: 800
});
myChart.getDom().style.overflow = 'hidden';
}
});
```
4. 当退出全屏模式时,重新设置echarts容器的大小为原来的大小:
```javascript
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
document.addEventListener("fullscreenchange", function () {
if (!document.fullscreenElement) {
myChart.resize({
width: 800,
height: 800
});
myChart.getDom().style.overflow = 'hidden';
}
});
```
阅读全文