Tag Archives: Echarts Error

[Solved] Echarts Error: TypeError: Cannot read properties of null (reading getAttribute ) 

The above problem was encountered when using echarts

Generally, there are the following cases.
1. echarts.init(document.getElementById("xxxx") is written in the wrong format, such as adding a # in front of the id.

2. initialize operation when the element is not loaded out (stack a debugger on top of the initialized code to easily determine). Here specifically in vue.

If an error is reported you can put the code inside mounted.
mounted() {    
	this.initEcharts();   
}

Differences between mounted and created:

created:Called before the template is rendered into html, applied to initialize some attribute values and then rendered into view requirements.
mounted:Called after the template is rendered into html, to initialize the page and then perform some operations on the dom nodes of the html after it is finished.

[Solved] Echarts Error: Uncaught (in promise) Error: Initialize failed: invalid dom.

Problem screenshot: the reason for

Cause: After entering the chart page and calling the Get Chart Data interface, the interface jumps away from the chart page before returning the data, and then the data is returned and the chart is created, but after jumping away from the chart page, the container element is not available, so an error is reported and the chart creation fails.

Solution:
1. Instead of using the native js method to get the container element (e.g. document.getElementById()), use this.$refs instead.
2. If the chart page is a cached page and you want the chart to load after jumping back to the chart page, you need to write the width and height of the container (in px) in the in-line style of the chart container. (For cached pages there is also another solution: execute the create chart method in the activated life cycle of the component)

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

------

const myChart = echarts.init(this.$refs.chinaMapChart)

How to Solve Echarts Error: import echarts from ‘echarts‘

The following commands are required for normal angular installation of echarts

1 npm install echarts -S
2 npm install ngx-echarts -S

However, an error prompt is found after installation, and the type is marked in red in the file reference

1. The following commands need to be executed

1 npm install echarts -S
2 npm install ngx-echarts -S
3 npm install @types/echarts -D

2. Introduce modules into modules (such as app.Module.TS):

1 import { NgxEchartsModule } from 'ngx-echarts';
2 @NgModule({
3   imports: [
4     ...,
5     NgxEchartsModule
6   ],
7 })
8 export class AppModule { }

[Solved] Echarts Error: There is a chart instance already initialized on the dom!

On the current page, when you execute charts drawing for many times, the console will give a warning “there is a chart instance already initialized on the DOM”, which means: “a chart instance has been initialized on the DOM”

Solution:

Add the method of drawing ecarts to judge whether it already exists. If it exists, it can be destroyed. The code example is as follows:

data() {
	return {
		myRingChart1:null
	}
}
drawRing1() {
      if (
        this.myRingChart1 != null &&
        this.myRingChart1 != '' &&
        this.myRingChart1 != undefined
      ) {
        this.myRingChart1.dispose() //Solve the error reported by echarts dom already loaded
      }
      // Initialize the echarts instance based on the prepared dom
      this.myRingChart1 = echarts.init(this.$refs['myRingChart1'])
}