是否可以在 Angular 2 和 TypeScript 中使用 ECharts 百度

Is it possible to use ECharts Baidu with Angular 2 and TypeScript

提问by Anton Cholakov

I am trying to implement EChart Baidu in Angular 2 application (typescript).

我正在尝试在 Angular 2 应用程序（打字稿）中实现 EChart 百度。

I am following the start guide on their website https://ecomfe.github.io/echarts/doc/start-en.htmlbut have no idea how I am supposed to init the chart having no clue about the function parameter of this line of code:

我正在关注他们网站https://ecomfe.github.io/echarts/doc/start-en.html上的开始指南，但不知道我应该如何初始化图表，而对这一行的函数参数一无所知代码：

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

Using Angular 2 I have ngOnInit() function that can be used as jquery's $(document).ready().

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

I've tries to implement ECharts in a separate page using pure javasript and is working just fine. I even have HTML theme Limitless.

我尝试使用纯 javasript 在单独的页面中实现 ECharts，并且工作正常。我什至有 HTML 主题Limitless。

The problem is that I don't know how to get this 'ec' parameter from the code above in Angular2.

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

Any help would be appreciated! Thank you

任何帮助，将不胜感激！谢谢

采纳答案by Anton Cholakov

So, I have found a solution!

所以，我找到了解决方案！

First, you should use echarts.js library which is NOTcommon js. I am using this onewhich I have found here. Notice that the first two libraries are common.js and common.min.js. They use requireas a function but typescript has its own require. It is not okay to mess up like that so for clearer solution just use non common js library of echarts.

首先，你应该使用 echarts.js 库，它不是常见的 js。我使用的这一个，我已经找到这里。请注意，前两个库是 common.js 和 common.min.js。他们使用require作为函数，但 typescript 有自己的 require。像这样搞砸是不行的，所以为了更清晰的解决方案，只需使用 echarts 的非通用 js 库。

In the directory where echarts.js file is located, I've created echarts.d.ts which has only one line of code:

在echarts.js文件所在的目录中，我创建了echarts.d.ts，它只有一行代码：

export function init (elem: any);

Then, in my component.ts file I import like this:

然后，在我的 component.ts 文件中，我像这样导入：

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

You should import without the .js extention!

您应该在没有 .js 扩展名的情况下导入！

After that in my onInit function I just do:

之后在我的 onInit 函数中，我只做：

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

where this.chartId is just the id of my DOM element holding the chart and basic_lines is an object which I fill with options later on (just like in the example given in the question!

其中 this.chartId 只是我保存图表的 DOM 元素的 id，basic_lines 是一个对象，我稍后会用选项填充它（就像问题中给出的示例一样！

I hope this would help someone!

我希望这会帮助某人！

回答by TossPig

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

code：

代码：

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

luck ：)

运气 ：）

回答by razor1895

first, install the echart via npm

首先，通过npm安装echart

npm install --save echarts

second, require the echart in your component

其次，在你的组件中需要echart

const echarts = require('echarts');

then, in ngInit function, apply your code

然后，在 ngInit 函数中，应用您的代码

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

回答by shaddock

I have used：

我用过了：

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

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

but that has a error error TS2307: Cannot find module 'echarts'

但这有一个错误 error TS2307: Cannot find module 'echarts'

In the end, simple and crude,I have require as a property for the chass:

最后，简单粗暴，我需要作为 chass 的属性：

1.install whith npm module for echarts:

1. 安装 echarts 的 npm 模块：

npm install echarts

npm install echarts

2.defined a property for the class:

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

回答by NexusInk

npm install -S echarts
npm install -D @types/echarts
npm install -S ngx-echart --save(the new version of angular2-echarts)

npm install -S echarts
npm install -D @types/echarts
npm install -S ngx-echart --save（新版本angular2-echarts）

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

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

Reference with @Ng, @Component/@Directivein your .tsfiles. Call into your pages- Don't forget to check your selector!

在您的文件中使用@Ng, @Component/@引用。呼叫您的- 不要忘记检查您的！Directive.tspagesselector

import * as echarts from 'echarts';(TS(Typescript) not JS filetype)
import { AngularModuleEcharts } from 'ngx-charts';

import * as echarts from 'echarts';(TS(Typescript) 不是 JS 文件类型)
import { AngularModuleEcharts } from 'ngx-charts';

@TossPig's code works fine.

@TossPig 的代码运行良好。

Am using Ionic3 with TS devDependencies with ngx-echarts. Had some problems with converting the Angular Directive to an Ionic Module for reuse. Check out https://github.com/xieziyu/ngx-echartsand https://xieziyu.github.io/#/ngx-echarts/demofor code structure and implementation as Angular components.

我将 Ionic3 与 TS devDependencies 与ngx-echarts. 在将 Angular Directive 转换为 Ionic Module 以供重用时遇到了一些问题。查看https://github.com/xieziyu/ngx-echarts和https://xieziyu.github.io/#/ngx-echarts/demo了解代码结构和作为 Angular 组件的实现。

回答by jos

Take a look at angular2-echartslibrary. To install:

看看angular2-echarts库。安装：

npm install echarts --save

npm install angular2-echarts --save

Hope it helps!

希望能帮助到你！