前提:
我想画一个词云图,于是进行了如下步骤:
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]来获取。