首先,我在vue-cli项目的components文件下创建了一个命名为pie.vue 模板子组件,代码如下:
<template>
<div class="container">
  <div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts';
export default {
  props: {
    id: {
      type: String
    },
    option: {
      type: Object
    }
  },
  mounted () {
    console.info('饼图模板');
    HighCharts.chart(this.id,this.option);
  }
};
</script>

<style scoped>
.container {
  width: document.documentElement.clientWidth;
  height: document.documentElement.clientHeight;
}
</style>

再在同文件下创建父组件,命名为fuck.vue,代码如下:

<template>
<div>
    <pie :id="id" :option="option"></pie>
</div>
</template>

<script>
import pie from '@/components/pie';
export default {
  components: {
    pie
  },
  data () {
    return {
      id: 'test',
      option: {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0
          }
        },
        credits: {
          enabled: false
        },
        title: {
          text: '错误占比图'
        },
        subtitle: {
          text: '字段值为空'
        },
        tooltip: {
          headerFormat: '{series.name}<br>',
          pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 25,
            dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
          }
        },
        series: [{
          type: 'pie',
          name: '空值错误占比',
          data: [{name: fuck01, y: 10},{name: fuck02,y: 20}]
        }]
      }
    };
  },
  methods: {
  }
};
</script>

代码写完保存,高高兴兴的npm run dev,哦豁,发现页面空空如也!!!!

怎么了?,用debugger;调试,然后发现子模板组件居然在数据渲染之前已经挂载完毕了,也就是还没赋值就已经把图画好了,so,就画了一张漂亮的白图。

于是乎,我在pie.vue子组件中加上了延迟500毫秒加载数据。可能是因为setTimeout是异步的缘故,成功的在数据传入子组件后再执行绘画填充。

mounted () {
    setTimeout(() => {
        console.info('饼图模板');
        HighCharts.chart(this.id, this.option);
      }, 500);
  }
很完美,成功显示出来了!!虽然是个笨办法,显然解决了问题。(各位大佬有更好的方法记得告诉我)
Logo

前往低代码交流专区

更多推荐