使用echarts时,出现了第一次打开弹框时图表未显示。之后打开是可以显示的。
<template>
<el-dialog title="图表" :visible.sync="dialogVisible" width="80vw" :before-close="handleClose">
<div class="ReferralRewardCharts" style="width: 100%">
<div ref="barBoxRef" style="width: 80vw; height: 70vh" />
</div>
</el-dialog>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'BarChartBox',
data() {
return {
dialogVisible: false,
proviceData: []
}
},
mounted() {
this.addBusi()
},
methods: {
handleClose() {
this.dialogVisible = false
},
init(proviceData) {
this.dialogVisible = true
this.proviceData = proviceData
this.addBusi()
},
addBusi() {
const initAddBusi = echarts.init(this.$refs.barBoxRef)
const option = {
legend: {},
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
dataset: {
source: [
['product', '拉新人数', '已工作人数'],
['Matcha Latte', 43.3, 5.8],
['Milk Tea', 83.1, 73.4],
['Cheese Cocoa', 86.4, 65.2],
['Walnut Brownie', 72.4, 53.9],
['里斯', 23, 10],
['王明', 83, 73],
['张三三', 86, 5],
['lucky', 72, 15],
['丽丽', 120, 56],
['lucy', 70, 15]
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }]
}
initAddBusi.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
.ReferralRewardCharts {
width: 100%;
height: 70vh;
.bar-box {
height: 70vh;
}
}
</style>
解决办法:
init(proviceData) {
this.dialogVisible = true
this.proviceData = proviceData
this.$nextTick(() => {
this.addBusi()
})
},