ECharts BaiduをAngular 2とTypeScriptで使用することは可能ですか

Question

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

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

角度2 Iを使用して

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

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

私はEChartsを純粋なjavasriptを使って別のページに実装しようとしていますが、うまくいきます。私もHTMLテーマLimitlessを持っています。

問題は、Angular2の上のコードからこの 'ec'パラメータを取得する方法がわかりません。

助けていただけたら幸いです！ありがとうございます

Answer 1

私は解決策を見つけました！

最初に、共通jsというecharts.jsライブラリを使用する必要があります。私はhereを見つけたthis oneを使用しています。最初の2つのライブラリはcommon.jsとcommon.min.jsです。彼らはを使用します。を必要としますが、typescriptには独自のrequireがあります。それは、echartsの一般的でないjsライブラリを使用するより明確な解決策のために、そんなに混乱させるのは大丈夫ではありません。

echarts.jsファイルがあるディレクトリで、私は、コードの一行だけ持ってecharts.d.ts作成しました：その後

export function init (elem: any); 

を、私のcomponent.tsファイルに私は次のようにインポートしますこれは：

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

.jsエクステンションなしでインポートする必要があります。

私はちょうど行う私のOnInit関数のその後

：ちょうどthis.chartIdだけのチャートとbasic_linesを保持している私のDOM要素のidは、私は後でオプションで埋めるオブジェクトです

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

（

私はこれが誰かを助けることを望む！

Answer 2

まず、NPM経由

npm install --save echarts 

秒をechartをインストールすることは、私はあなたのコードを適用

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

Answer 3

、ngInit機能で、その後、あなたのコンポーネントに

const echarts = require('echarts'); 

をechartが必要です使用した：

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

それは、単純な、粗端でエラー error TS2307: Cannot find module 'echarts'

を有し、Iはchassのプロパティとして必要としている：

1.install echartsためNPMモジュールwhith：

：

npm install echarts

は、クラスのプロパティを2.defined

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

Answer 4

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 5

angular2-echartsライブラリを見てみましょう。インストールする：

npm install echarts --save 

npm install angular2-echarts --save 

希望します！あなたの.tsファイル内

npm install -D @types/echarts
npm install -S ngx-echart --save

Answer 6

npm install -S echarts（angular2-echartsの新バージョン）@Ngと

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

リファレンス、@Component/@Directive。 pagesに電話する - 忘れずにselectorを確認してください。

import * as echarts from 'echarts';（TS（活字体）ではないJSファイルタイプ）
import { AngularModuleEcharts } from 'ngx-charts';

TossPigのコード@正常に動作します。

ngx-echartsでTS devDependenciesでIonic3を使用していますか？ 角度指令をイオンモジュールに変換して再利用する際に問題が発生しました。 角度構造のコード構造と実装については、https://github.com/xieziyu/ngx-echartsとhttps://xieziyu.github.io/#/ngx-echarts/demoを参照してください。