vue3.2+ 子组件Eacharts实时更新父组件传递的数据

1.引用watch 

import { onMounted ,watch} from 'vue'

 2 父组件页面数据传递

<EchartsOrder :orderData="User.data" :orderList="User.orderList" :orderName="User.orderName" :orderStr="User.orderStr" /> 

3.下面是子组件接收的数据 

const props = defineProps({

    orderData:Array,

    orderList:Array,

    orderName:String,

    orderStr:String,

})

4.子组件实时监听 （setTimeout 这里是由于图表渲染快于父元素导致图表比例溢出，做的一个延缓操作）if判断如果新数据与旧数据不相等，刷新line()，

 

// 监听父组件数据实时更新

    watch(

      () => [props.orderName, props.orderData,props.orderList,props.orderStr],

      (newValue, oldValue) => {

        if(newValue!=oldValue){

            setTimeout(() => {

            line()

        }, 400)

        }

      }

    )