echarts图父元素变化
时间: 2023-10-06 14:12:39 浏览: 68
vue实现多个echarts根据屏幕大小变化而变化实例
当 echarts 图表的父元素发生变化时,需要重新调用 `resize()` 方法来对图表进行重绘。具体步骤如下:
1. 获取 echarts 实例:
```js
var myChart = echarts.init(document.getElementById('chart'));
```
2. 监听父元素变化事件:
```js
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList' && mutation.target === document.getElementById('chart')) {
myChart.resize(); // 重新调用 resize() 方法
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
```
3. 在父元素变化时,重新调用 `resize()` 方法来重绘图表。
需要注意的是,如果 echarts 图表隐藏时也需要进行重绘,可以在显示图表前先调用 `resize()` 方法,以确保图表能够正确显示。
阅读全文