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

TossPig · Answer 1 · 2017-02-09T02:50:50.960

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 ：)

i just had to edit my directive and add `ngOnChanges` and it now works great ! thanks :) — Shaniqwa, Jul 20 '17 at 13:32
@Natanael It is a [naming convention](https://angular.io/guide/rx-library#naming-conventions-for-observables) for observables. — 39ecneret, May 10 '18 at 01:35

score 6 · Accepted Answer · answered Jul 03 '16 at 06:26

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!

score 2 · Answer 3 · edited Nov 12 '18 at 06:49

I have used：

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

but that has a error error TS2307: Cannot find module 'echarts'

In the end, simple and crude,I have require as a property for the chass:

1.install whith npm module for echarts:

npm install echarts

2.defined a property for the class:

export class AdvertReportComponent implements OnInit {
     echarts: any = require('echarts')
     ngOnInit(){
       //set options;
       var options= {...};
       var chartView = this.echarts.init(this._chartElement.nativeElement);
       chartView.setOption(options);
    }
}

score 1 · Answer 4 · answered Jul 23 '16 at 12:39

first, install the echart via npm

npm install --save echarts

second, require the echart in your component

const echarts = require('echarts');

then, in ngInit function, apply your code

const selectDom = this.renderer.selectRootElement('#chart');
const myChart = charts.init(selectDom);

score 1 · Answer 5 · answered May 29 '17 at 11:06

npm install -S echarts
npm install -D @types/echarts
npm install -S ngx-echart --save (the new version of angular2-echarts)

-D = --save-dev -S = --save

Reference with @Ng, @Component/@Directive in your .ts files. Call into your pages - Don't forget to check your selector!

import * as echarts from 'echarts'; (TS(Typescript) not JS filetype)
import { AngularModuleEcharts } from 'ngx-charts';

@TossPig's code works fine.

Am using Ionic3 with TS devDependencies with ngx-echarts. Had some problems with converting the Angular Directive to an Ionic Module for reuse. Check out https://github.com/xieziyu/ngx-echarts and https://xieziyu.github.io/#/ngx-echarts/demo for code structure and implementation as Angular components.

score 0 · Answer 6 · answered May 10 '17 at 11:21

0

Take a look at angular2-echarts library. To install:

npm install echarts --save

npm install angular2-echarts --save

Hope it helps!

answered May 10 '17 at 11:21

jos

1,070
12
22

1

It has been renamed [ngx-echarts](https://www.npmjs.com/package/ngx-echarts) since! – Nino Filiu Aug 07 '18 at 13:44

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

6 Answers6