V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
writerG
V2EX  ›  问与答

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

  •  
  •   writerG · 2020-05-04 01:04:01 +08:00 · 1681 次点击
    这是一个创建于 1700 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我在 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 条回复    2020-05-04 17:44:22 +08:00
    PineAppleHead
        1
    PineAppleHead  
       2020-05-04 07:09:03 +08:00
    应该是 Vue 无法检测数组或对象属性变动的问题
    that.option.xAxis.data = arr
    that.option.series.data = res.people_num

    这个地方
    你改动对象下面的属性,console 的数据会更新,但是视图是不会更新的
    解决方法你自己搜下吧,好像有 Vue.set 之类的
    writerG
        2
    writerG  
    OP
       2020-05-04 11:37:24 +08:00
    @PineAppleHead 谢谢你,,但我用了$set 方法后,还是失败了。。。唉
    Axel2
        3
    Axel2  
       2020-05-04 14:54:41 +08:00 via iPhone
    好像是用 v-if 控制视图在数据请求后显示,感觉那个 newarray 操作有点奇怪
    leihongtao1230
        4
    leihongtao1230  
       2020-05-04 17:44:22 +08:00 via Android
    不知道你代码怎么写的,请求是异步的吧,你应该要确保 drawline 函数在请求成功之后,而不是 300ms 后执行吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1515 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:05 · PVG 01:05 · LAX 09:05 · JFK 12:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.