跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • vue+echart 的一个问题,求助大家。
未分類
25 3 月 2020

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

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

資深大佬 : writerG 8

我在 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)
}

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

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

大佬有話說 (4)

  • 資深大佬 : 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 后执行吧

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具