echarts tab切换

你可以使用 ECharts（百度开源的数据可视化库）来实现 tab 切换效果。以下是一个示例代码：

首先，在 HTML 文件中引入 ECharts 的库文件和所需的样式文件：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.css" />

然后，在 HTML 文件中创建一个包含 tab 切换的容器：

<div id="tabContainer">
  <div class="tab" onclick="switchTab(0)">Tab 1</div>
  <div class="tab" onclick="switchTab(1)">Tab 2</div>
  <div class="tab" onclick="switchTab(2)">Tab 3</div>
</div>
<div id="chartContainer"></div>

接下来，编写 JavaScript 代码实现 tab 切换功能：

// 定义各个 tab 对应的图表数据
var chartData = [
  // Tab 1 的图表数据
  {
    // 在这里配置你的图表选项和数据
    // 示例：series: [{ type: 'bar', data: [1, 2, 3] }]
  },
  // Tab 2 的图表数据
  {
    // 在这里配置你的图表选项和数据
  },
  // Tab 3 的图表数据
  {
    // 在这里配置你的图表选项和数据
  }
];

var currentIndex = 0; // 当前显示的 tab

function switchTab(index) {
  currentIndex = index;
  renderChart();
}

function renderChart() {
  var container = document.getElementById('chartContainer');
  container.innerHTML = ''; // 清空容器

  // 创建 ECharts 实例
  var myChart = echarts.init(container);

  // 根据当前 tab 的索引获取对应的图表数据
  var data = chartData[currentIndex];

  // 使用图表数据渲染图表
  myChart.setOption(data);

  // 自适应窗口大小变化
  window.addEventListener('resize', function () {
    myChart.resize();
  });
}

// 初始化时渲染第一个 tab 的图表
renderChart();

上述代码中，我们通过点击不同的 tab，切换 currentIndex 的值，并调用 renderChart() 函数重新渲染图表。每个 tab 对应的图表数据存储在 chartData 数组中，根据 currentIndex 的值获取对应的数据，然后使用 ECharts 的 setOption() 方法渲染图表。

请注意替换示例代码中的图表选项和数据，以适应你自己的需求。