Tag Archives: Vue-echarts error

[Solved] Vue echarts Error: Initialize failed: invalid dom.

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

Vue-echarts error: was not found in vue-demi [How to Solve]

Was not found in Vue Demi

version problem. Vue-echarts6.0.0 is vue3. When it is introduced into vue2, an alarm will appear
you can go back to version 4.0.2

npm install [email protected] -S

Vue-echarts4.0.2 corresponds to echarts4, so echats also returns the version

npm install [email protected] -S

Prompt personal version record

"dependencies": {
    "core-js": "^3.6.5",
    "echarts": "^4.9.0",
    "vue": "^2.6.11",
    "vue-echarts": "^4.0.2"
  },

Introduce in main.js

import ECharts from 'vue-echarts'
// import * as echarts from 'echarts' //Global introduction
// Vue.prototype.$echats = echarts;
import 'echarts/lib/chart/line' // On-demand introduction
Vue.component('chart', ECharts)