echarts 如何通过切换option 改变图表
时间: 2023-08-11 12:09:39 浏览: 43
在 ECharts 中,可以通过切换 option 来改变图表。当你需要切换图表类型、数据、样式等时,可以直接修改 option 的内容,然后调用 setOption 方法,将新的 option 对象作为参数传递给它。代码示例如下:
```javascript
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 定义初始 option 对象
var option1 = {
// 设置图表类型
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
// 定义新 option 对象
var option2 = {
// 设置图表类型
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
},
yAxis: {
type: 'value'
},
series: [{
data: [200, 300, 400, 500, 600, 700, 800],
type: 'bar'
}]
};
// 切换 option 对象
function switchOption() {
var option = myChart.getOption();
if (option === option1) {
myChart.setOption(option2);
} else {
myChart.setOption(option1);
}
}
// 在页面上添加一个按钮,用于切换 option
document.getElementById('switchBtn').addEventListener('click', switchOption);
```
在上面的示例中,我们定义了两个 option 对象,一个是折线图,一个是柱状图。然后通过 `setOption` 方法来切换不同的 option 对象,从而改变图表的类型和数据。你可以在页面上添加一个按钮,通过点击按钮来触发 `switchOption` 函数,实现切换图表的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)