echart 图表切换
时间: 2023-07-19 19:12:40 浏览: 71
可以通过 EChart 提供的 API,使用事件绑定的方式实现图表切换。具体步骤如下:
1. 在页面中添加多个图表容器,用来存放不同类型的图表。
2. 在 JS 代码中,使用 EChart 的实例化对象创建对应的图表,并将其放置在对应的容器中。
3. 给页面中提供切换图表的元素,如按钮等,绑定点击事件。
4. 在事件处理函数中,根据需要切换的图表类型,使用 EChart 的 setOption 方法更新对应的图表配置项,从而实现图表切换的效果。
下面是一个简单的示例代码:
HTML 代码:
```html
<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart2" style="width: 600px; height: 400px;"></div>
<button id="switchBtn">切换图表</button>
```
JS 代码:
```javascript
// 创建 EChart 实例对象
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
// 初始化图表配置项
var option1 = { /* ... */ };
var option2 = { /* ... */ };
// 设置图表配置项
chart1.setOption(option1);
chart2.setOption(option2);
// 绑定按钮点击事件
var switchBtn = document.getElementById('switchBtn');
switchBtn.onclick = function() {
// 切换图表
if (chart1.getOption() === option1) {
chart1.setOption(option2);
chart2.setOption(option1);
} else {
chart1.setOption(option1);
chart2.setOption(option2);
}
}
```