ECharts的动态数据渲染问题

今天遇到一个问题，纠结了半天，首先我想通过ECharts的柱状图进行可视化数据的

显示，因为后端传过来的是一个数组，我想让数组内一个元素对应一个图标进行遍历之

后显示，所以步骤简单分为：

         先获取后端的数据 =》 页面上进行遍历并创建对应的div =》然后ECharts和dom

进 行绑定并渲染数据

         看似简单的几步，我却在渲染数据的时候卡壳了，我先将获取数据的方法

getDataList() 和 渲染数据的方法 setEcharts()都放在钩子函数mounted（）上，结构

没效果，后来我将渲染数据的方法 setEcharts() 放在获取数据的方法getDataList() 里

面。结构还是每有效果，不过当页面加载完成之后，我再次调用获取数据的方法，就显

示出了数据。找了半天找到了原因，可能是因为我的div还没创建的时候，js中就去绑定

这个div，当然找不到了，所以就报错了，于是乎我进行一系列测试，发现了个很有意

思的现象，我在this中发现有dataList这个数组并且有值，可是通过this.dataList却为

空值，this打印出来的结果也正确

所以解决办法就是将渲染数据的方法延迟执行，所以用到了setTimeout( )这个方法，经过一系列调试之后，结果也达到了预期

结果如下

 

此外补充一下 可以使用 $nextTick(()=>{ function }) 来使用