8

我正在尝试在 Angular 2 应用程序（打字稿）中实现 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 主题Limitless。

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

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

4

6 回答 6

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

代码：</p> 

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

运气 ：）

于 2017-02-09T02:00:18.113 回答
6

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

首先，您应该使用 echarts.js 库，它不是常见的 js。我正在使用我在这里找到的这个。请注意，前两个库是 common.js 和 common.min.js。他们使用require作为函数，但 typescript 有自己的 require。像这样搞砸是不行的，所以为了更清晰的解决方案，只需使用非常见的 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 是我稍后填充选项的对象（就像问题中给出的示例一样！

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

于 2016-07-03T06:26:49.593 回答
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'

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

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 回答
1

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

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

在您的文件中使用@Ng, @Component/@引用。打电话给你- 不要忘记检查你的！Directive.tspagesselector

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

@TossPig 的代码运行良好。

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

于 2017-05-29T11:06:18.193 回答
0

看看angular2-echarts库。安装：

npm install echarts --save

npm install angular2-echarts --save

希望能帮助到你！

于 2017-05-10T11:21:34.567 回答