Error reporting reason
DOM has not been mounted yet, echarts.init() has already started execution
resolvent
1. Don’t use created, use mounted. Created just creates an instance at this time, but the template hasn’t been mounted yet
created:Called before the template is rendered into html, i.e. usually initialize some property values and then render into view.
mounted: called after the template is rendered into html, usually after initializing the page and then doing some required operations on the html dom nodes
That is to say, the created()
method is called before the page is loaded, and DOM is not loaded yet. So use mounted
when DOM is changed, and use created
when DOM is not changed
2. Use setTimeout to delay loading
Read More:
- [Solved] echarts Draw Errror: echarts-d9fd185e.js:31447 Uncaught (in promise) Error: Initialize failed: invalid dom.
- [Solved] Echarts Error: Uncaught (in promise) Error: Initialize failed: invalid dom.
- Vue: initialize failed: invalid DOM [How to Solve]
- [Solved] echarts Error: Error in callback for watcher “chartSource“: “Error: Initialize failed: invalid dom.“
- How to Solve the error: initialize failed invalid dom
- [Solved] Echarts Error: TypeError: Cannot read properties of null (reading getAttribute )
- Echarts Map Error: Error: Invalid geoJson format Cannot read property ‘length‘ of undefined
- [Solved] VUE D:\project\vueProject\vue-02\src\components\hello.vue 5:5 error Parsing error: x-invalid-end-tag
- [Solved] vue3vite Error: Failed to resolve import “@vue/server-renderer from “src\App.vue“. Does the file exist
- Vue Error: error in mounted hook: TypeError: invalid src type
- [Solved] vue run serve Error: ValidationError: Progress Plugin Invalid Options
- vue Error: Uncaught SyntaxError: Invalid shorthand property initializer
- [Solved] Vue Start Project Error: ValidationError: webpack Dev Server Invalid Options
- The addition, deletion and modification of DOM in JS Foundation
- How to Use DOM to operate CSS
- [Solved] Echarts Error: Cannot read property ‘init‘ of undefined
- Vue-echarts error: was not found in vue-demi [How to Solve]
- [Solved] Vue Error: Uncaught TypeError: Vue.createApp is not a function
- Echarts Partially introduced error: TypeError: Cannot read property ‘findAxisModel’ of undefined
- Full screen scrolling by Vue + Vue awesomeswiper