Problem beim Übergeben von Werten von der übergeordneten Komponente an die untergeordneten Komponenten-Echarts in Vue

Aufzeichnung des Fallstrickproblems von Echarts

Problem: Wenn die übergeordnete Komponente den Wert an die untergeordneten Komponenten-Echarts übergibt, ist dies der Fall Ich habe festgestellt, dass die untergeordnete Komponente leer ist. Zuerst dachte ich, die Hook-Funktion sei an der falschen Stelle, aber später stellte ich fest, dass weder „Mounted“ noch „Create“ funktionierten. Wenn die in der übergeordneten Komponente übergebenen Daten definiert sind, wird die untergeordnete Komponente normal angezeigt

Grund: Nach einer späteren Untersuchung wurde das N-Wort hier weggelassen und es wurde festgestellt, dass Echarts die Daten während des Renderns übergibt

Lösung Lösung: Definieren Sie ein Flag in der übergeordneten Komponente und rendern Sie dann die untergeordnete Komponente, nachdem die Daten abgerufen wurden

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

Dann kann die untergeordnete Komponente normal angezeigt werden

Dieser Artikel erklärt Es gibt ein Problem beim Übergeben von Werten von der übergeordneten Komponente an die untergeordneten Komponenten-Echarts in Vue. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:
Detaillierte Erläuterung des strikten Javascript-Modus

Zugehörige Codeanalyse von PHP zur Implementierung der Anmeldefunktion

Erklärung von JavaScript-bezogenen Inhalten

Das obige ist der detaillierte Inhalt vonProblem beim Übergeben von Werten von der übergeordneten Komponente an die untergeordneten Komponenten-Echarts in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!