echarts多个表之间切换

Echarts可以通过使用Tab组件或者通过单击按钮来切换多个图表之间的显示。下面是两种方法的示例：

1. 使用Tab组件切换图表

// HTML代码
<div id="tab" style="height:30px;"></div>
<div id="chart-container"></div>

// JS代码
// 初始化Tab组件
var tab = echarts.init(document.getElementById('tab'));
tab.setOption({
    backgroundColor: '#fff',
    textStyle: {
        color: '#000'
    },
    data: ['图表1', '图表2', '图表3'], // Tab标签名称
    selected: 0, // 默认选中第一个Tab
    itemWidth: 80, // Tab标签宽度
    itemHeight: 30, // Tab标签高度
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
});
// 初始化图表
var chart = echarts.init(document.getElementById('chart-container'));
chart.setOption({
    // 第一个图表的配置项
});

// 监听Tab组件的切换事件
tab.on('change', function(params) {
    // 根据Tab标签的名称切换图表数据
    switch(params.name) {
        case '图表1':
            chart.setOption({
                // 第一个图表的配置项
            });
            break;
        case '图表2':
            chart.setOption({
                // 第二个图表的配置项
            });
            break;
        case '图表3':
            chart.setOption({
                // 第三个图表的配置项
            });
            break;
    }
});

2. 使用按钮切换图表

// HTML代码
<div>
    <button id="chart1-btn">图表1</button>
    <button id="chart2-btn">图表2</button>
    <button id="chart3-btn">图表3</button>
</div>
<div id="chart-container"></div>

// JS代码
// 初始化图表
var chart = echarts.init(document.getElementById('chart-container'));
// 绑定按钮的单击事件
document.getElementById('chart1-btn').onclick = function() {
    chart.setOption({
        // 第一个图表的配置项
    });
};
document.getElementById('chart2-btn').onclick = function() {
    chart.setOption({
        // 第二个图表的配置项
    });
};
document.getElementById('chart3-btn').onclick = function() {
    chart.setOption({
        // 第三个图表的配置项
    });
};

以上两种方法都可以达到切换多个Echarts图表的效果，您可以根据实际需要选择其中一种实现。