echarts动态修改series的data数据
时间: 2023-06-24 09:06:25 浏览: 263
要动态修改 echarts 中的 series 的 data 数据,可以通过以下步骤实现:
1. 获取 echarts 实例:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
```
2. 定义一个变量来存储数据:
```javascript
var newData = [10, 20, 30, 40, 50];
```
3. 修改 series 的 data 数据:
```javascript
myChart.setOption({
series: [{
data: newData
}]
});
```
在这个例子中,我们将 series 的 data 修改为 `newData` 数组。修改后,echarts 将自动更新图表。
完整的示例代码如下:
```javascript
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 定义初始数据
var data = [5, 10, 15, 20, 25];
// 设置 echarts 选项
var option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 定义新的数据
var newData = [10, 20, 30, 40, 50];
// 在点击按钮时更新数据
document.getElementById('update').onclick = function() {
myChart.setOption({
series: [{
data: newData
}]
});
};
```
在这个例子中,我们在页面上添加了一个按钮,当用户点击按钮时,将触发更新数据的操作。