echarts dataset 动态绑定数据
时间: 2023-08-25 12:05:57 浏览: 116
ECharts 中可以使用 `setData()` 方法动态绑定数据,实现数据的实时更新。具体步骤如下:
1. 在 `option` 中定义好数据集的结构,例如:
```javascript
option = {
dataset: {
dimensions: ['time', 'data'],
source: []
},
series: [{
type: 'line',
encode: {
x: 'time',
y: 'data'
}
}]
};
```
2. 创建一个空的数据集,作为初始数据,例如:
```javascript
const chart = echarts.init(document.getElementById('chart'));
const initialData = [
['2019-01-01', 0],
['2019-01-02', 0],
['2019-01-03', 0],
['2019-01-04', 0],
['2019-01-05', 0]
];
chart.setOption({
dataset: {
source: initialData
},
series: [{
type: 'line',
encode: {
x: 'time',
y: 'data'
}
}]
});
```
3. 使用 `setData()` 方法更新数据集,例如:
```javascript
// 模拟数据源
const newData = [
['2019-01-01', Math.random() * 100],
['2019-01-02', Math.random() * 100],
['2019-01-03', Math.random() * 100],
['2019-01-04', Math.random() * 100],
['2019-01-05', Math.random() * 100]
];
// 更新数据集
chart.setOption({
dataset: {
source: newData
}
});
```
这样就可以实现动态绑定数据,实时更新图表了。
阅读全文