vue+echart 的一个问题，求助大家。

[writerG]

我在 vue 的单文件组件中写了如下代码：

echart 数据，option 我定义在了 data(){}当中

然后我执行了以下代码，在下面可以看到，我将返回结果放到了 option 的 data 中
that = this
this.postRequest('http://url?id='+row.id).then(res=>{
if(res){
let arr = new Array(res.length)
for(let i=0;i<res.length;i++){
arr[i] = res.section[i]
}
that.option.xAxis.data = arr
that.option.series.data = res.people_num

}
})

//300 毫秒后执行画图函数

setTimeout(() => {
this.drawLine()
},,300)


然后 300 毫秒后执行了画图函数
//画柱状图和折线图的函数
drawLine(){
this.myChart = this.$echarts.init(document.getElementById("column"))
this.line_chart = this.$echarts.init(document.getElementById("line_chart"))
console.log(this.option.xAxis.data)
console.log(this.option.series.data)
this.line_chart.setOption(this.line_chart_option,true)
this.myChart.setOption(this.option,true)
}

这里我打印了一下数据，查看有没有在上面赋值成功，我从控制台查看到了，是赋值成功了的。。。

但是最后前端显示出来的柱状图和折线图并不是我赋值之后的数据，而是我赋值之前的数据。
这是咋回事？

[PineAppleHead]

应该是 Vue 无法检测数组或对象属性变动的问题
that.option.xAxis.data = arr
that.option.series.data = res.people_num

这个地方
你改动对象下面的属性，console 的数据会更新，但是视图是不会更新的
解决方法你自己搜下吧，好像有 Vue.set 之类的

[writerG]

@PineAppleHead 谢谢你，，但我用了$set 方法后，还是失败了。。。唉

[Axel2]

好像是用 v-if 控制视图在数据请求后显示，感觉那个 newarray 操作有点奇怪

[leihongtao1230]

不知道你代码怎么写的，请求是异步的吧，你应该要确保 drawline 函数在请求成功之后，而不是 300ms 后执行吧