在使用 Vue 3 和 ECharts 时,如果遇到 initialize failed: invalid dom 错误,通常是因为在 ECharts 的 init 方法被调用时,其依赖的 DOM 元素还未被渲染到页面上。这通常发生在以下几种情况: DOM 元素未挂载:在 Vue 组件的生命周期中,如果 ECharts 的初始化代码在 DOM 元素实际挂载到页面之前执行,就会导致这...
constdivNode =useTemplateRef("chartNode");console.log(1111, divNode)// 初始化图表,传递实际DOMletchartDom = echarts.init(divNode.value);onMounted(() =>{drawCharts() })constdrawCharts=()=>{ ...代码爆出不变 } 为啥还会报错:Error: Initialize failed: invalid dom. 原因在于:let chartDom = ...
也就完成了DOM的绑定,因此可以拿到DOM元素 */ if(divNode.value){ divNode.value.innerText = '通过dom来赋值'; } } 当然我们除了使用 useTemplateRef 来获取DOM元素 还可以使用 ref 来获取DOM元素 使用ref 来获取DOM元素 使用ref 来获取DOM元素需要注意的点。 通过ref函数创建,并赋值给与模板中同名的变量。
dom没有挂载完成,echarts.init() 就已经开始执行了,获取不到dom 在onMounted加个定时器 等个1两秒等dom加载完成即可获取到
为啥还会报错:Error: Initialize failed: invalid dom. 原因在于:let chartDom = echarts.init(divNode.value);这一行代码。 此时divNode.value为null。 为啥是null呢? 这个跟获取时机有关:此时还没有完成绑定哈,所以得到的是null。 什么时候可以正常绑定呢?
如果不使用ctx.emit('changeMapHost', citys)更新图标值,下钻和图标都可以正常显示,但下钻之后的图标数据是大地图的整体数据。 一旦去更新县、市级图标数据就会报错TypeError: Cannot read properties of undefined (reading 'svg')或者Error: Initialize failed: invalid dom. ...
console.error(`ShareStream failed to initialize. Error: ${error}`); return null; } } // join room async join() { console.log('join room clicked'); try { await this.client.join({ roomId: this.roomId }); await this.initLocalStream(); this.isJoined = true; } catch (e) { conso...
InitDataFailed = "\n[%v] --> %v 初始数据失败! \nerr: %+v\n" @@ -102,6 +103,9 @@ func (initDBService *InitDBService) InitDB(conf request.InitDB) (err error) { case "pgsql": initHandler = NewPgsqlInitHandler() ctx = context.WithValue(ctx, "dbtype", "pgsql") case "sqlit...
使用的话还是和以前差不多,获取dom的话可以用id或ref,但我不太喜欢在vue项目中看到原生的东西,所以就用ref了,ref的话取值记得带上.value;如果进入页面就要显示图表,一定要把初始代码放到onMounted生命周期函数中,不然会报Error: Initialize failed: invalid dom.的错误;另外高度一定要设置实高,不然页面会空白。
s) 更新图标值,下钻和图标都可以正常显示,但下钻之后的图标数据是大地图的整体数据。一旦去更新县、市级图标数据就会报错TypeError Cannot read properties of undefined (reading 'svg') 或者Error: Initialize failed: invalid dom. 该怎么修改才能正常更新图标呢? vue3前端echartsvue.js 有用关注2收藏...