修改了其他 DOM 元素的样式时,如何避免ECharts的重绘
时间: 2023-12-14 08:37:05 浏览: 60
vue+echarts
当修改其他 DOM 元素的样式时,由于 DOM 的重绘、重排可能会导致 ECharts 的重绘。为了避免 ECharts 的重绘,可以使用 ECharts 提供的 `echarts.getInstanceByDom(dom)` 方法获取到对应的 ECharts 实例,然后调用实例的 `clear()` 方法清除掉原图形,最后再更新 DOM 元素样式。
以下是一个示例代码:
```javascript
// 获取 ECharts 实例
var chart = echarts.getInstanceByDom(document.getElementById('chart'));
// 清除图形
chart.clear();
// 更新 DOM 元素样式
document.getElementById('other-element').style.color = 'red';
// 重新渲染图形
chart.setOption(option);
```
通过这种方式,可以避免不必要的 ECharts 重绘,提高页面性能。
阅读全文