是否可以将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(); } } } 运气 :) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读