循环遍历组件echart,重新渲染数据,出现There is a chart instance already initialized on the dom.

echart组件重新渲染

在子组件中更改echart组件的数据,希望父组件的echart组件能够重新渲染。但是并没有渲染成功,页面的echart组件还是原先的数据,并且出现There is a chart instance already initialized on the dom,下面是对网络上的一些方法进行了尝试

代码逻辑及想要实现的效果

echart组件已经在父组件里面初始化,子组件editor.vue对echart组件的数据进行编辑修改,然后通过子组件调用父组件渲染echart的方法,重新渲染。想着逻辑上并没有问题,效果确实有时候能够渲染成功,有时候却不能够渲染成功,后来上网搜索,

  1. 方法一 ,在初始化echart之后,添加document.getElementById(id).setAttribute(‘echarts_instance’, ‘’);可以渲染,但是我有一个能够对echart组件进行一个缩小放大的自适配就不能实现,因为自适配的方法时破幻了echart的_echarts_instance_属性实现的,如果重新添加赋值,前面的功能就无法实现。

  2. 方法二 判断echart是否已经实例化,实例化就销毁,重新渲染,没有的话就直接渲染,网络上大部分是此方法解决问题,在这里插入图片描述 ##但是此方法对于我目前要实现的不可以,因为我是遍历创建echart,跟todoLIst的demo一样,所以如果定义全局的echart,再销毁,前面创建的echart组件就被销毁掉了在这里插入图片描述

  3. 方法三 调用setOption(option,true)重点在于后面加上true才可以重新渲染。我是调用setOption(()=>{},true),第一个参数是箭头函数,对option做一个数据的处理在return返回。然后就能够实现echart数据页面的重新渲染,但是There is a chart instance already initialized on the dom警告并没有消失。但是此方法能够解决我的问题。

猜你喜欢

转载自blog.csdn.net/weixin_43914605/article/details/122198438