8

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

私は彼らのウェブサイト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 テーマLimitlessもあります。

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

どんな助けでも大歓迎です！ありがとうございました

4

6 に答える 6

1

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

npm install --save echarts

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

const echarts = require('echarts');

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

const selectDom = this.renderer.selectRootElement('#chart');
const myChart = charts.init(selectDom);
于 2016-07-23T12:39:47.913 に答える
1

使用しました：</p>

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

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

最後に、単純で粗雑ですが、chass のプロパティとして require しました:

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);
    }
}
于 2016-12-09T08:53:15.543 に答える