web-dev-qa-db-ja.com

Angular 2およびTypeScriptでEChartsBaiduを使用することは可能ですか？

Angular 2アプリケーション（TypeScript）でEChartBaiduを実装しようとしています。

私は彼らのウェブサイトのスタートガイドに従っています https://ecomfe.github.io/echarts/doc/start-en.html しかし、手がかりのないチャートをどのように初期化するのか分かりませんこのコード行の関数パラメーターについて：

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

Angular 2を使用するjqueryの$（document）.ready（）として使用できるngOnInit（）関数があります。

私は純粋なjavasriptを使用して別のページにEChartsを実装しようとしましたが、問題なく動作しています。 HTMLテーマもあります 無制限 。

問題は、Angular2の上記のコードからこの「ec」パラメーターを取得する方法がわからないことです。

どんな助けでもいただければ幸いです！ありがとうございました

typescriptangularecharts
7
Anton Cholakov

だから、私は解決策を見つけました！

まず、[〜＃〜]ではない[〜＃〜]一般的なjsであるecharts.jsライブラリを使用する必要があります。私は これ 私が見つけた ここ を使用しています。最初の2つのライブラリはcommon.jsとcommon.min.jsであることに注意してください。それらは関数としてrequireを使用しますが、TypeScriptには独自のrequireがあります。そのように台無しにするのは大丈夫ではないので、より明確な解決策のために、echartsの一般的でないjsライブラリを使用してください。

Echarts.jsファイルが配置されているディレクトリに、コードが1行しかない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は、後でオプションを入力するオブジェクトです（質問の例のように！

これが誰かに役立つことを願っています！

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

幸運 ：）

9
TossPig

まず、npm経由でechartをインストールします

npm install --save echarts

次に、コンポーネントにechartが必要です

const echarts = require('echarts');

次に、ngInit関数で、コードを適用します

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

npm install -S echarts
npm install -D @types/echarts
npm install -S ngx-echart --save（新しいバージョンのangular2-echarts）

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

@Ngファイル内の@Component、.ts/@ Directiveを参照してください。 pagesに電話してください-selectorを確認することを忘れないでください！

import * as echarts from 'echarts';（TS（TypeScript）はJSファイルタイプではありません）
import { AngularModuleEcharts } from 'ngx-charts';

@TossPigのコードは正常に機能します。

ngx-echartsのTSdevDependenciesでIonic3を使用しています。 Angularディレクティブを再利用するためにIonicモジュールに変換する際に問題が発生しました。チェックアウト https://github.com/xieziyu/ngx -echarts および https://xieziyu.github.io/#/ngx-echarts/demo コード構造および実装はAngularコンポーネント。

1
NexusInk

利用した：

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

しかし、それはエラーがありますerror TS2307: Cannot find module 'echarts'

結局、シンプルで粗雑な、私はシャスのプロパティとして必要です：

1.echarts用の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);
    }
}
1
shaddock

angular2-echarts ライブラリを見てください。インストールするには：

npm install echarts --save

npm install angular2-echarts --save

それが役に立てば幸い！

0
jos