How can I access properties of an object of type EChartsOption in typescript (angular + echarts)?

Question

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
[email protected] /home/martin/development/node-level-resource-monitoring/webapp/exampleapp
├── @angular-devkit/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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?

Answer 1

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.