echarts Error: Initialize failed: invalid dom.

created at 02-23-2022 views: 156

cause:

After entering the chart page, call the get chart data interface. If the interface does not return data, it will jump off the chart page, and then the data will be returned and the chart will be created, but the container element cannot be obtained after jumping off the chart page, so an error is reported and the chart creation fails.

solution

Do not use native js methods to get container elements (eg: document.getElementById(), use this.$refs instead. If the chart page is a cache page, and you want the chart to load well after jumping back to the chart page, you need to write the width and height of the container (in px) in the inline style of the chart container. (Another solution is also provided for cached pages: execute the chart creation method in the activated life cycle of the component)

Sample code:

<div ref="chinaMapChart" style="width: 770px; height: 560px" />

--- 

const myChart = echarts.init(this.$refs.chinaMapChart)
created at:02-23-2022
edited at: 02-23-2022: