你可以使用
ECharts（百度开源的数据可视化库）来实现 tab
切换效果。以下是一个示例代码：
首先，在 HTML 文件中引入
ECharts 的库文件和所需的样式文件：
```html
<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
切换的容器：
```html
<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
切换功能：
```javascript
// 定义各个 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() 方法渲染图表。
请注意替换示例代码中的图表选项和数据，以适应你自己的需求。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
