Vue中⽗组件向⼦组件echarts传值问题
原⽂链接：blog.csdn/Uookic/article/details/80638883?utm_source=copy
问题：当⽗组件传值给⼦组件echarts时，发现⼦组件获取的props为空，刚开始以为是钩⼦函数放错了地⽅，后来发现从mounted和created 都不⾏。当在⽗组件data定义传递的数据的时候⼦组件显⽰正常
原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据
解决⽅案：在⽗组件定义⼀个flag，当数据获得的之后再进⾏⼦组件的渲染
1 /⽗组件
2    <div class="chart-wrapper">
3    <pie-chart v-if="flag" :pie-data="piedata"></pie-chart>
4  </div>
5  ...
6  import {getPie} from '@/api/status'
7  export default {
8  name: 'device',
9  data() {
10return {
11      flag:false,
12      piedata:{},
13      ...
14  },
15  created(){
16this.init()
17  },
18  methods:{
19    init(){
20        getPie().InfoSucc)
21    },
22    getInfoSucc(res){
23      res = res.data;
de ==0){
25          const values = res.values;
26this.piedata = values.piedata;
27this.flag = true
28        }
29      }
1//⼦组件
2 <template>
3  <div :class="className" :></div>
4 </template>
5
6 <script>
7 import echarts from 'echarts'
8 require('echarts/theme/macarons') // echarts theme
9 import { debounce } from '@/utils'
10
11 export default {
12  props: {
13    pieData: {
14      type: Object
15    },
16    msg: {
17      type:Number
18    },
19    className: {
20      type: String,
21default: 'chart'
22    },
23    width: {
24      type: String,
25default: '100%'
26    },
27    height: {
28      type: String,
29default: '300px'
30    }
31  },
32  data() {
33return {
34      chart: null
35    }
36  },
37// watch: {
38//  piedata: {
39//    deep: true,
40//    handler(val) {
41//      console.log(val)
42//      this.setOptions(val)
43//    }
44//  }
45// },
46  mounted() {
47    console.log("pieData:"+JSON.stringify(this.pieData))
48this.initChart()
49this.__resizeHanlder = debounce(() => {
50if (this.chart) {
size()
52      }
53    }, 100)
54    window.addEventListener('resize', this.__resizeHanlder)
55  },
56  beforeDestroy() {
57if (!this.chart) {
58return
59    }
60    veEventListener('resize', this.__resizeHanlder) 61this.chart.dispose()
62this.chart = null
63  },
64  methods: {
65    setOptions({ text, arrtype, arrdata } = {}) {
66this.chart.setOption({
67        title: {
68          text: text
69        },
70        tooltip: {
71          trigger: 'item',
72          formatter: '{a} <br/>{b} : {c} ({d}%)'
73        },
74        legend: {
75          left: 'center',
76          bottom: '10',
77          data: arrtype
78        },
79        calculable: true,setoption
80        series: [
81          {
82            name: '',
83            type: 'pie',
84            roseType: 'radius',
85            radius: [15, 95],
86            center: ['50%', '42%'],
87            data: arrdata,
88            animationEasing: 'cubicInOut',
89            animationDuration: 2600
90          }
91        ]
92      })
93    },
94    initChart() {
95this.chart = echarts.init(this.$el, 'macarons')
96this.setOptions(this.pieData);
97    }
98  }
99 }
100 </script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。