Incubator-echarts: 我使用vue.js,整合echarts有问题

Created on 4 Nov 2016  ·  7Comments  ·  Source: apache/incubator-echarts

在vue2.0里在组件的mounted回调里执行echarts.setOption,会报echarts.js?68a2:1443 Can't get dom width or height,难道vue的dom没有完成么

support

Most helpful comment

我今天刚好也遇到了,实验表明 echarts 绑定的 dom 标签不能被隐藏,因为 echarts 是拿的可视宽度和高度,当然如果你 init 之后不 setOption 也是不会展示的。希望对你有用

All 7 comments

无法获取 dom 的 clientWidth 和 clientHeight,你再看看是什么原因造成的

根据你的描述,99%可以确定不是 echart 的原因, 剩下 1% 让我自己不要太骄傲。

我今天刚好也遇到了,实验表明 echarts 绑定的 dom 标签不能被隐藏,因为 echarts 是拿的可视宽度和高度,当然如果你 init 之后不 setOption 也是不会展示的。希望对你有用

根据楼上的观点,我揣测可能是 echart.init 对应 vue 的生命周期搞错了,compiled 钩子里面调用 init 也不能 保证 $el 插入 dom 里面啦,未插入 dom 里面的话是拿不到视宽高的,建议放在 ready 里面试试

可以将宽高绑定到行内样式<div id="echartsMain" :style="{width:'600px',height:'400px'}"></div>

就是因为vue钩子函数的问题,
setTimeout(() => { this.draw() window.addEventListener('resize', this.resizeChart) }, 1000)
我在1秒后再画图就不会出这样的问题了

我也遇到相同问题了.

Was this page helpful?
0 / 5 - 0 ratings