解决ECharts 5 + Vue 2 图像不更新

前提:

我想画一个词云图,于是进行了如下步骤:

npm install --save echarts vue-echarts echarts-wordcloud

然后在data里面指定了云图的:option="chartOption",初始化数据应该chartOption.series.data里面。

如果写死了chartOption.series.data的数据,可以正常展示。 但是,我想在初始化页面时更新数据,那么新的数据无法展示在云图中。

看了很多文章,有教在mounted里面通过元素id获取dom对象、然后setOptions的,或教通过this.$refs获取dom对象的,都无法正常获取(getElementById返回null,$refs的也报错了)。用$nextTick, setTimeOut都不行。我看了一下,这个VChart的id直接就没有出现在dom里头,可能这跟vue-echarts本身有关(???)。

方法1:十分简单粗暴:,chartOption直接做成computed,云图可以展示了。由于功能还没写完(譬如从本地读词频数据或发请求获取等),所以可能后续还有问题,有待探究。

方法2:也很简单粗暴:没有id,但有class。所以可以getElementByClassName("xxx")[0]来获取。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值