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)