echarts柱状图数据切换
时间: 2023-06-29 18:17:06 浏览: 135
echarts前端+Java后端数据=生成柱状图
您可以通过以下步骤实现echarts柱状图数据切换:
1. 定义多组数据:在echarts的option中定义多个series对象,每个对象对应一组数据。
2. 切换数据:在需要切换数据的时候,通过setOption方法重新设置option中的series对象即可。
以下是一个简单的示例代码:
```javascript
// 定义option对象
var option = {
// x轴数据
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
// 多组数据
series: [
{
name: '数据1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 5]
},
{
name: '数据2',
type: 'bar',
data: [15, 10, 26, 20, 30, 10, 15]
}
]
};
// 初始化echarts对象
var myChart = echarts.init(document.getElementById('main'));
// 切换数据
function switchData() {
// 修改series对象的data属性
option.series[0].data = [10, 15, 20, 25, 30, 35, 40];
option.series[1].data = [20, 10, 30, 15, 25, 20, 30];
// 重新设置option
myChart.setOption(option);
}
```
当调用switchData函数时,echarts柱状图的数据会被切换为新的数据。
阅读全文