Vue의 상위 구성 요소에서 하위 구성 요소 차트로 값을 전달하는 데 문제가 있습니다.

echarts의 함정 문제 기록

문제: 상위 컴포넌트가 하위 컴포넌트 echarts에 값을 전달할 때 하위 컴포넌트에서 얻은 props가 비어 있는 것으로 나타났습니다. 후크 기능이 잘못 배치되었지만 나중에 마운트되거나 생성되지 않은 기능이 작동하지 않는다는 것을 발견했습니다. 전달된 데이터를 상위 컴포넌트 데이터에 정의하면 하위 컴포넌트가 정상적으로 표시됩니다

원인: 나중에 조사한 결과 여기서 N 단어가 생략되었으며, echarts가 렌더링 중에 데이터를 전송하는 것으로 나타났습니다

해결책: 플래그를 정의합니다. 상위 컴포넌트에서 데이터를 얻으면 하위 컴포넌트가 렌더링됩니다

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

그러면 하위 컴포넌트가 정상적으로 표시될 수 있습니다

이 글에서는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 문제에 대해 설명합니다. Vue의 하위 구성요소 echarts에 대한 자세한 내용은 PHP Chinese net을 참조하세요.

관련 추천:
자바스크립트 엄격 모드에 대한 자세한 설명

로그인 기능 구현을 위한 php 관련 코드 분석

자바스크립트 관련 내용 설명

위 내용은 Vue의 상위 구성 요소에서 하위 구성 요소 차트로 값을 전달하는 데 문제가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!