是否可以将ECharts百度与Angular 2和TypeScript一起使用

Question

我正在尝试在Angular 2应用程序(typescript)中实现EChart百度.

我正在关注他们网站https://ecomfe.github.io/echarts/doc/start-en.html上的入门指南,但不知道我应该如何初始化图表,不知道该行的函数参数代码:

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

使用Angular 2我有ngOnInit()函数可以用作jquery的$(document).ready().

我尝试使用纯javasript在单独的页面中实现ECharts并且工作得很好.我甚至有HTML主题无限.

问题是我不知道如何从Angular2中的代码中获取这个'ec'参数.

任何帮助,将不胜感激!谢谢

Answer 1

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

运气 :)

Answer 2

所以,我找到了解决方案!

首先,你应该使用不常见的js的echarts.js库.我使用的这一个,我已经找到这里.请注意,前两个库是common.js和common.min.js.他们使用require作为函数,但typescript有自己的要求.这样做是不可能的,所以为了更清晰的解决方案,只需使用非常见的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元素的id,而basic_lines是一个我稍后填写选项的对象(就像在问题中给出的例子一样!

我希望这会对某人有所帮助!