I am currently trying to figure out how to access a property of an EChartOptions object, which may be undefined, in angular 16.0.2. I am new to typescript.
npm list:
eapp/src$ npm list
exampleapp@0.0.0 /home/martin/development/node-level-resource-monitoring/webapp/exampleapp
├── @angular-devkit/build-angular@16.0.2
├── @angular/animations@16.0.2
├── @angular/cli@16.0.2
├── @angular/common@16.0.2
├── @angular/compiler-cli@16.0.2
├── @angular/compiler@16.0.2
├── @angular/core@16.0.2
├── @angular/forms@16.0.2
├── @angular/platform-browser-dynamic@16.0.2
├── @angular/platform-browser@16.0.2
├── @angular/router@16.0.2
├── @types/jasmine@4.3.1
├── echarts@5.4.2
├── jasmine-core@4.6.0
├── karma-chrome-launcher@3.2.0
├── karma-coverage@2.2.0
├── karma-jasmine-html-reporter@2.0.0
├── karma-jasmine@5.1.0
├── karma@6.4.2
├── ngx-echarts@16.0.0
├── rxjs@7.8.1
├── tslib@2.5.1
├── typescript@5.0.4
└── zone.js@0.13.0
Angular packages:
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.2
@angular-devkit/build-angular 16.0.2
@angular-devkit/core 16.0.2
@angular-devkit/schematics 16.0.2
@schematics/angular 16.0.2
rxjs 7.8.1
typescript 5.0.4
The code base for my component:
import { Component } from '@angular/core';
import { EChartsOption } from 'echarts';
@Component({
selector: 'app-nodelevelvisual2-d',
templateUrl: './nodelevelvisual2-d.component.html',
styleUrls: ['./nodelevelvisual2-d.component.css'],
})
export class Nodelevelvisual2DComponent {
mergeOptions: EChartsOption;
constructor() {
this.mergeOptions= {};
}
days : Array<string> = ["monday", "thusday", "wensday", "thursday", "friday"];
hours : Array<string> = ["0 am", "1 am", "2 am", "3 am", "4 am", "5 am", "6 am", "7 am", "8 am"];
options: EChartsOption = {
legend: { },
tooltip: {
position: 'left'
},
grid: {
height: '40%',
top: '20%'
},
xAxis: {
type: 'category',
data: this.hours,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: this.days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 15,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%'
},
series: [
{
name: "heatmap-example",
type: "heatmap",
data: [[0,0, 0],[1,1,55],[0,2,0],[0,3,33], [1,4,4],[2,3,2]]
}
]
};
}
I would like to create a function that accesses the data property, but access via ?. doesn't work, because the interpreter shows the following error message:
Object is possibly 'undefined'.ts(2532) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'SeriesOption$1 | SeriesOption$1[]'. Property '0' does not exist on type 'SeriesOption$1 | SeriesOption$1[]'.
The code I tried to execute:
getMaxSeriesDataVal(){
let newVar = 0;
for (let i = 0; i < 3; i++){
console.log(this.options?.series[0]?.data[0]) //DOESN'T WORK!!!
}
}
Any simple solution or is this particular approach not the way to work with angular components or echart properties?
you should store your chart data in a variable and pass it to the chart. then in your function, you can loop through your data or change it. if you changed your data you need to rebuild your chart again to see the changes.