Is it possible to use ECharts Baidu with Angular 2 and TypeScript

Question

I am trying to implement EChart Baidu in Angular 2 application (typescript).

I am following the start guide on their website https://ecomfe.github.io/echarts/doc/start-en.html but have no idea how I am supposed to init the chart having no clue about the function parameter of this line of code:

function (ec) {
            var myChart = ec.init(document.getElementById('main')); 

Using Angular 2 I have ngOnInit() function that can be used as jquery's $(document).ready().

I've tries to implement ECharts in a separate page using pure javasript and is working just fine. I even have HTML theme Limitless.

The problem is that I don't know how to get this 'ec' parameter from the code above in Angular2.

Any help would be appreciated! Thank you

Answer 1

npm install --save echarts
npm install --save-dev @types/echarts

code：

import {
  Directive, ElementRef, Input, OnInit, HostBinding, OnChanges, OnDestroy
} from '@angular/core';

import {Subject, Subscription} from "rxjs";

import * as echarts from 'echarts';
import ECharts = echarts.ECharts;
import EChartOption = echarts.EChartOption;


@Directive({
  selector: '[ts-chart]',
})
export class echartsDirective implements OnChanges,OnInit,OnDestroy {
  private chart: ECharts;
  private sizeCheckInterval = null;
  private reSize$ = new Subject<string>();
  private onResize: Subscription;

  @Input('ts-chart') options: EChartOption;

  @HostBinding('style.height.px')
  elHeight: number;

  constructor(private el: ElementRef) {
    this.chart = echarts.init(this.el.nativeElement, 'vintage');
  }


  ngOnChanges(changes) {
    if (this.options) {
      this.chart.setOption(this.options);
    }
  }

  ngOnInit() {
    this.sizeCheckInterval = setInterval(() => {
      this.reSize$.next(`${this.el.nativeElement.offsetWidth}:${this.el.nativeElement.offsetHeight}`)
    }, 100);
    this.onResize = this.reSize$
      .distinctUntilChanged()
      .subscribe((_) => this.chart.resize());

    this.elHeight = this.el.nativeElement.offsetHeight;
    if (this.elHeight < 300) {
      this.elHeight = 300;
    }
  }


  ngOnDestroy() {
    if (this.sizeCheckInterval) {
      clearInterval(this.sizeCheckInterval);
    }
    this.reSize$.complete();
    if (this.onResize) {
      this.onResize.unsubscribe();
    }
  }
}

luck ：)

Answer 2

So, I have found a solution!

First, you should use echarts.js library which is NOT common js. I am using this one which I have found here. Notice that the first two libraries are common.js and common.min.js. They use require as a function but typescript has its own require. It is not okay to mess up like that so for clearer solution just use non common js library of echarts.

In the directory where echarts.js file is located, I've created echarts.d.ts which has only one line of code:

export function init (elem: any);

Then, in my component.ts file I import like this:

import * as echarts from 'path/to/echarts/jsfile'

You should import without the .js extention!

After that in my onInit function I just do:

let basic_lines = echarts.init(document.getElementById(this.chartId));

where this.chartId is just the id of my DOM element holding the chart and basic_lines is an object which I fill with options later on (just like in the example given in the question!

I hope this would help someone!