加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

是否可以将ECharts百度与Angular 2和TypeScript一起使用

发布时间:2020-12-17 06:56:36 所属栏目:安全 来源:网络整理
导读:我正在尝试在Angular 2应用程序(typescript)中实现EChart百度. 我正在关注他们网站https://ecomfe.github.io/echarts/doc/start-en.html上的入门指南,但不知道我应该如何初始化图表,不知道这行代码的函数参数: function (ec) { var myChart = ec.init(docum
我正在尝试在Angular 2应用程序(typescript)中实现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’参数.

任何帮助,将不胜感激!谢谢

解决方法

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

运气 :)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读