echarts 多tab切换

要在 ECharts 中实现多Tab切换，可以通过以下步骤实现：

1. 创建一个包含多个Tab的容器，比如使用Bootstrap的Tab组件或自定义实现一个Tab容器。

2. 在每个Tab面板中创建一个ECharts实例对象。

3. 为每个Tab面板的ECharts实例对象设置不同的数据和配置，以展示不同的图表。

4. 在Tab切换时，根据切换的面板，重新渲染对应的ECharts实例对象。

以下是一个简单的示例代码：

HTML代码：

<div class="tab-container">
  <!-- Tab导航 -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <!-- Tab面板 -->
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <div id="chart1" style="height: 400px;"></div>
    </div>
    <div class="tab-pane" id="tab2">
      <div id="chart2" style="height: 400px;"></div>
    </div>
    <div class="tab-pane" id="tab3">
      <div id="chart3" style="height: 400px;"></div>
    </div>
  </div>
</div>

JavaScript代码：

// 初始化Tab组件
$('.nav-tabs a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// 初始化ECharts实例对象
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
var chart3 = echarts.init(document.getElementById('chart3'));

// 设置不同的数据和配置
var option1 = {...};
var option2 = {...};
var option3 = {...};

chart1.setOption(option1);
chart2.setOption(option2);
chart3.setOption(option3);

当Tab切换时，可以使用ECharts的`setOption`方法重新渲染对应的图表。例如，当切换到Tab 2时，可以使用以下代码重新渲染第二个图表：

$('.nav-tabs a[href="#tab2"]').on('shown.bs.tab', function () {
  chart2.resize(); // 重新调整图表大小
  chart2.setOption(option2); // 重新渲染图表
});