Problem in passing value from parent component to child component echarts in Vue

Record the problem of echarts stepping on the trap

#Problem: When the parent component passes the value to the child component echarts, it is found that the child component obtains The props were empty. At first I thought the hook function was in the wrong place, but later I found that neither mounted nor created worked. When the data passed in the parent component data is defined, the child component displays normally

Cause: After investigation later, the N word was omitted here, and it was found that echarts passes the data during rendering

Solution Solution: Define a flag in the parent component, and then render the subcomponent after the data is obtained

//父组件
   <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>

Then the subcomponent will be displayed normally

This article explains There is a problem in passing values ​​from the parent component to the child component echarts in Vue. For more related content, please pay attention to the PHP Chinese website.

Related recommendations:
Javascript strict mode detailed explanation

php related code analysis to implement login function

JavaScript related content explanation

The above is the detailed content of Problem in passing value from parent component to child component echarts in Vue. For more information, please follow other related articles on the PHP Chinese website!