echart 三个图表切换
时间: 2023-07-29 20:13:35 浏览: 44
ECharts 三个图表切换可以通过 div 显示/隐藏的方式来实现。具体步骤如下:
1. 在页面中添加三个 div,用来存放不同类型的图表。
```html
<div id="chart1" style="display: block;"></div>
<div id="chart2" style="display: none;"></div>
<div id="chart3" style="display: none;"></div>
```
2. 在 JS 代码中,使用 ECharts 的实例化对象创建对应的图表,并将其放置在对应的 div 中。
```javascript
// 创建 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);
```
3. 给页面中提供切换图表的元素,如按钮等,绑定点击事件。
```html
<button id="chart1Btn">图表1</button>
<button id="chart2Btn">图表2</button>
<button id="chart3Btn">图表3</button>
```
```javascript
var chart1Btn = document.getElementById('chart1Btn');
var chart2Btn = document.getElementById('chart2Btn');
var chart3Btn = document.getElementById('chart3Btn');
chart1Btn.onclick = function() {
chart1.show();
chart2.hide();
chart3.hide();
}
chart2Btn.onclick = function() {
chart1.hide();
chart2.show();
chart3.hide();
}
chart3Btn.onclick = function() {
chart1.hide();
chart2.hide();
chart3.show();
}
```
以上代码通过按钮的点击事件来切换不同的图表,其中 `show()` 方法将 div 显示出来,`hide()` 方法将 div 隐藏起来。需要注意的是,在页面加载时,第一个图表的 div 应该设置为显示状态,其他两个 div 应该设置为隐藏状态。