echarts4张图实现一张图全屏和还原

在ECharts中，如果你想实现在同一个页面上展示四张图表，并能方便地切换显示其中任意一张占据整个屏幕，通常的做法是使用ECharts的`resize`事件配合`fullscreen`模块。首先，你需要为每张图表创建独立的实例，然后设置它们各自的位置和大小。当需要全屏显示某张图时，可以将其设置为全屏模式，其他图则隐藏。

以下是简单的步骤：

1. 初始化四个ECharts实例，例如：

var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
var chart3 = echarts.init(document.getElementById('chart3'));
var chart4 = echarts.init(document.getElementById('chart4'));

2. 给每个图表设置初始状态和位置（假设默认宽度40%）：

chart1.setOption({
    ... // 配置选项
});
// 其他图表类似

chart1.resize(); // 初始加载后的缩放适应布局

function switchChart(chartIndex) {
    if (chartIndex > 3 || chartIndex < 1) return;
    // 关闭当前显示的图表
    var currentChart = ['chart1', 'chart2', 'chart3', 'chart4'][chartIndex - 1];
    this[currentChart].hide();

    // 展示指定图表并全屏显示
    this[chartIndex].show().fullscreen();
}

3. 创建一个切换图表的函数，比如按钮点击事件触发 `switchChart(图表序号)`，这里传入的是你希望全屏的图表索引。

4. 添加全屏退出按钮，监听全屏模块的`exitFullscreen`事件，恢复到默认状态：

echarts.registerAction({
    type: 'fullscreen:exit',
    eventHandler: function (params) {
        var chartIndex = params.currentTargetIndex + 1; // 因为数组下标从0开始
        this[chartIndex].resetView(); // 退出全屏后还原视图
    }
});

5. 完整代码中还需要处理DOM元素的获取和按钮绑定等细节。