echarts 使用setOption 后如何再次更新echarts
时间: 2023-06-29 14:06:52 浏览: 98
要更新 `echarts`,可以通过以下步骤:
1. 获取 `echarts` 实例:
```javascript
var chart = echarts.init(document.getElementById('chart'));
```
2. 使用 `setOption` 方法更新数据:
```javascript
chart.setOption({
// 更新数据
series: [{
data: [10, 20, 30, 40, 50]
}]
});
```
在这里,我们将 `series` 中的 `data` 数组更新为一个新数组。
3. 重绘 `echarts`:
```javascript
chart.resize();
chart.setOption(option);
```
在这里,我们调用 `resize` 方法来重新计算 `echarts` 容器的大小,并调用 `setOption` 方法来重新渲染 `echarts`。
完整代码示例:
```javascript
var chart = echarts.init(document.getElementById('chart'));
// 初始数据
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'
}]
};
// 初始渲染
chart.setOption(option);
// 更新数据
chart.setOption({
series: [{
data: [10, 20, 30, 40, 50]
}]
});
// 重绘
chart.resize();
chart.setOption(option);
```
阅读全文