Можно ли использовать ECharts Baidu с Angular 2 и TypeScript?

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

код:

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();
    }
  }
}

удача :)

Итак, я нашел решение!

Во-первых, вы должны использовать библиотеку echarts.js, которая НЕ является общей js. Я использую этот файл, который я нашел здесь. Обратите внимание, что первые две библиотеки — это common.js и common.min.js. Они используют require как функцию, но у машинописного текста есть собственное требование. Нехорошо так испортить, поэтому для более четкого решения просто используйте нестандартную библиотеку js echarts.

В каталоге, где находится файл echarts.js, я создал файл echarts.d.ts, содержащий только одну строку кода:

export function init (elem: any);

Затем в моем файле component.ts я импортирую так:

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

Вы должны импортировать без расширения .js!

После этого в моей функции onInit я просто делаю:

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

где this.chartId — это просто идентификатор моего элемента DOM, содержащего диаграмму, а basic_lines — это объект, который я позже заполняю параметрами (как в примере, приведенном в вопросе!

Я надеюсь, что это поможет кому-то!

сначала установите ечарт через npm

npm install --save echarts

во-вторых, требуется диаграмма в вашем компоненте

const echarts = require('echarts');

затем в функции ngInit примените свой код

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

npm install -S echarts
npm install -D @types/echarts
npm install -S ngx-echart --save (новая версия angular2-echarts)

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

Ссылка на @Ng, @Component/@Directive в ваших .ts файлах. Позвоните в свой pages - Не забудьте проверить свой selector!

import * as echarts from 'echarts'; (тип файла TS (Typescript), а не JS)
import { AngularModuleEcharts } from 'ngx-charts';

Код @TossPig работает нормально.

Я использую Ionic3 с TS devDependencies с ngx-echarts. Были некоторые проблемы с преобразованием директивы Angular в ионный модуль для повторного использования. Ознакомьтесь с https://github.com/xieziyu/ngx-echarts и https://xieziyu.github.io/#/ngx-echarts/demo для структуры кода и реализация в виде компонентов Angular.

Я использовал:

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

но там ошибка error TS2307: Cannot find module 'echarts'

В конце концов, просто и грубо, я требую в качестве свойства для шасси:

1.установите модуль npm для ечартов:

npm install echarts

2. определил свойство для класса:

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);
    }
}

Взгляните на библиотеку angular2-echarts. Установить:

npm install echarts --save

npm install angular2-echarts --save

Надеюсь, поможет!