h***@126.com
h***@126.com
  • 发布:2022-12-30 09:06
  • 更新:2024-12-30 21:59
  • 阅读:308

怎么刷新数据?

分类:uni-app
关联插件: echarts for uniapp

怎么刷新数据?

2022-12-30 09:06 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com

折腾了,半天终于搞好了。。。。作者其实在设计时设置了watch,但是应该是props传值有问题,以至于没有触发。
先看源码

watch: {  
            option(newValue, oldValue) {  
                if(newValue.series){  
                    this.initChart(newValue)  
                }  
            }  
        }

watch没触发那就,直接$refs。

                <view class="bar2" v-if="bar2">  
            <echarts ref="bar2" :option="option3" canvasId="echarts3"></echarts>  
        </view>
                 bt(){  
                this.option3.series[0].data=[30,30,30,30,30,30,30];  
                this.$refs.bar2.initChart(this.option3)  
                console.log("按钮没用?",this.bar2)  
            }
风吹摇摆杨摇摆

风吹摇摆杨摇摆

我也搞了半天,组件源码用了侦听器侦听传的option值

props: {  
            canvasId: {  
                type: String,  
                default: 'echarts'  
            },  
            option: {  
                type: Object,  
                default: () => {  
                    return {}  
                }  
            },  
        },  
        watch: {  
            option(newValue, oldValue) {  
                if(newValue.series){  
                    this.initChart(newValue)  
                }  
            }  
        },

要实现更新数据必须新建option变量然后用this.$refs.echarts.initChart传回去才行

let tempOption={自己的配置};  
                this.$nextTick(()=>{  
                    this.$refs.自己echarts组件的ref属性值.initChart(tempOption)  
                })

估计是vue底层watch监听数据只有引用地址变了才会触发更新,又或者像echart官方文档那样用原生js获取dom用setOption方法

要回复问题请先登录注册