Problème de transmission de la valeur du composant parent aux graphiques du composant enfant dans Vue

Enregistrement du problème d'écueil des echarts

Problème : lorsque le composant parent transmet la valeur aux echarts du composant enfant, il est J'ai découvert que le composant enfant obtient Les accessoires étaient vides. Au début, je pensais que la fonction hook n'était pas au bon endroit, mais j'ai découvert plus tard que ni monté ni créé ne fonctionnaient. Lorsque les données transmises dans les données du composant parent sont définies, le composant enfant s'affiche normalement

Raison : Après enquête plus tard, le mot N a été omis ici, et il a été constaté que les echarts transmettent les données lors du rendu

Solution Solution : définissez un indicateur dans le composant parent, puis restituez le composant enfant une fois les données obtenues

//父组件
   <p class="chart-wrapper">
    <pie-chart v-if="flag" :pie-data="piedata"></pie-chart>
  </p>  ...
  export default {
  name: &#39;device&#39;,
  data() {    return { 
      flag:false,
      piedata:{},      ...
  },
  created(){
    this.init()
  },
 methods:{
   init(){   
       axios.get(&#39;/static/mock/status/pie.json&#39;).then(this.getInfoSucc)
   }, 
   getInfoSucc(res){
      res = res.data;       if(res.code ==0){
         const values = res.values;  
         this.piedata = values.piedata;  
         this.flag = true 
       }
     }

//子组件<template>
  <p :class="className" :style="{height:height,width:width}"></p></template><script>import echarts from &#39;echarts&#39;require(&#39;echarts/theme/macarons&#39;) // echarts themeimport { debounce } from &#39;@/utils&#39;export default {
  props: {
    pieData: {
      type: Object
    },
    msg: {
      type:Number
    },
    className: {
      type: String,      default: &#39;chart&#39;
    },
    width: {
      type: String,      default: &#39;100%&#39;
    },
    height: {
      type: String,      default: &#39;300px&#39;
    }
  },
  data() {    return {
      chart: null
    }
  },  // watch: {
  //   piedata: {
  //     deep: true,
  //     handler(val) {
  //       console.log(val)
  //       this.setOptions(val)
  //     }
  //   }
  // },
  mounted() { 
    console.log("pieData:"+JSON.stringify(this.pieData))    this.initChart()    this.__resizeHanlder = debounce(() => {      if (this.chart) {        this.chart.resize()
      }
    }, 100)
    window.addEventListener(&#39;resize&#39;, this.__resizeHanlder) 
  },
  beforeDestroy() {    if (!this.chart) {      return
    }
    window.removeEventListener(&#39;resize&#39;, this.__resizeHanlder)    this.chart.dispose()    this.chart = null
  },
  methods: {
    setOptions({ text, arrtype, arrdata } = {}) {  
      this.chart.setOption({
        title: {
          text: text
        },
        tooltip: {
          trigger: &#39;item&#39;,
          formatter: &#39;{a} <br/>{b} : {c} ({d}%)&#39;
        },
        legend: {
          left: &#39;center&#39;,
          bottom: &#39;10&#39;,
          data: arrtype
        },
        calculable: true,
        series: [
          {
            name: &#39;&#39;,
            type: &#39;pie&#39;,
            roseType: &#39;radius&#39;,
            radius: [15, 95],
            center: [&#39;50%&#39;, &#39;42%&#39;],
            data: arrdata,
            animationEasing: &#39;cubicInOut&#39;,
            animationDuration: 2600
          }
        ]
      })
    },
    initChart() {      this.chart = echarts.init(this.$el, &#39;macarons&#39;)      this.setOptions(this.pieData); 
    }
  }
}</script>

Le composant enfant peut ensuite être affiché normalement

Cet article explique le problème de la transmission de valeurs​​du composant parent aux echarts du composant enfant dans Vue Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois.

Recommandations associées :
Explication détaillée du mode strict Javascript

Analyse de code associée de php pour implémenter la fonction de connexion

Explication du contenu lié à JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!