Error in v-on handler: “Error: Initialize failed: invalid dom.“

本文主要是介绍Error in v-on handler: “Error: Initialize failed: invalid dom.“，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用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 = truethis.proviceData = proviceDatathis.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 = truethis.proviceData = proviceDatathis.$nextTick(() => {this.addBusi()})
},

 

这篇关于Error in v-on handler: “Error: Initialize failed: invalid dom.“的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---