vue-cli项目中整合highcharts饼图(pie)遇到的问题
首先,我在vue-cli项目的components文件下创建了一个命名为pie.vue 模板子组件,代码如下:<template><div class="container"><div :id="id" :option="option"></
·
首先,我在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);
}
很完美,成功显示出来了!!虽然是个笨办法,显然解决了问题。(各位大佬有更好的方法记得告诉我)更多推荐
已为社区贡献1条内容
所有评论(0)