echarts动态获取数据
时间: 2023-11-04 16:05:30 浏览: 86
可以使用 echarts 的 setOption 方法动态更新数据。具体步骤如下:
1. 定义一个初始的 option 对象,包含图表的基本配置和初始数据。
2. 使用 echarts 的 init 方法初始化图表,并将初始的 option 对象传入。
3. 使用 setInterval 或者其他方式定时获取数据,并更新 option 对象中的数据部分。
4. 使用 echarts 的 setOption 方法将更新后的 option 对象传入,实现动态更新数据。
以下是一个简单的示例代码:
```javascript
// 定义初始的 option 对象
var option = {
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'
}]
};
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);
// 定时获取数据并更新 option 对象
setInterval(function () {
// 模拟获取数据
var newData = [Math.random() * 1000, Math.random() * 1000, Math.random() * 1000, Math.random() * 1000, Math.random() * 1000, Math.random() * 1000, Math.random() * 1000];
// 更新 option 对象中的数据部分
myChart.setOption({
series: [{
data: newData
}]
});
}, 2000);
```
阅读全文