0

I'm trying to plot a map graph with apache echarts (https://echarts.apache.org/examples/en/editor.html?c=geo-seatmap-flight) in angular component but I can't find the right way to import my .svg file located in the assets/images/light-seats.svg directory directly into the component in order to initialize the "echarts.reisterMap" function.

import { Component, OnInit } from '@angular/core';
import { EChartsOption } from 'echarts';
import * as echarts from 'echarts';

// here is the error
import * as flight from 'src/assets/images/flight-seats.svg';

@Component({
  selector: 'app-clinic-file',
  templateUrl: './clinic-file.component.html',
  styleUrls: ['./clinic-file.component.sass']
})
export class ClinicFileComponent implements OnInit {

  takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];

  option: EChartsOption = {...};
  
  makeTakenRegions(takenSeatNames: string[]) {...};

  constructor(
  ) { 
  }

  ngOnInit(): void {
    this.mapFunction();
  }

  mapFunction() {
    echarts.registerMap('flight-seats', { svg: flight });
  }
}

my html looks like this:

<mat-card>
    <mat-card-content>
        <mat-card-title>Graph</mat-card-title>
        <mat-card-subtitle>Example echarts</mat-card-subtitle>
        <div echarts [options]="option">
        </div>
        </mat-card-content>
 </mat-card>

note: additionally i am using ngx-echarts (https://www.npmjs.com/package/ngx-echarts)

I tried to import directly the svg file using "import * as flight from 'src/assets/images/flight-seats.svg';" but the interpreter shows an error like: Cannot find module "src/assets/images/flight-seats.svg" and its corresponding type declarations.ts(2307)

Josu16
  • 43
  • 4
  • Don't import images. Just have the reference as a string. in your case it would probably just be `'/assets/images/flight-seats.svg'` – Henrik Bøgelund Lavstsen Dec 16 '22 at 01:58
  • 1
    oh checked the library its a bit wierd. but you might be able to do like this answer here, it seems a bit hacky though. https://stackoverflow.com/a/69673310/1805974 in terms of accessing the file from code. – Henrik Bøgelund Lavstsen Dec 16 '22 at 02:05

0 Answers0