如上图,报错 Error in nextTick: "Error: Initialize failed: invalid dom."
dom未挂载完成,图表已经开始初始化了。
解决办法:
根据id获取图表信息换成,$refs拿取,且在初始化图表的时候加 this.$nextTick(() => ()})方法。
组件中代码如下:
<template> <div class="box"> <div :ref="info[0].chartId" class="chart"></div> </div> </template> <script> import * as echarts from 'echarts' export default { name: 'login', data () { return { } }, props: [ 'info' ], methods: { initChart () { var myChart = echarts.init(this.$refs[this.info[0].chartId]) myChart.setOption({ title: { text: this.info[0].title }, color: ['#91cc75', '#ee6666', '#73c0de', '#fac858', '#5470c6'], tooltip: {}, xAxis: this.info[0].xAxis, yAxis: {}, series: this.info[0].series }) } }, mounted () { this.$nextTick(() => { this.initChart() }) } } </script> <style scoped lang="scss"> .chart{ 100%; height: 100%; } </style>