我正在尝试在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' s $(document).ready()。
我尝试使用纯javasript在单独的页面中实现ECharts并且工作得很好。我甚至有HTML主题Limitless。
问题在于我不知道如何获得这个' ec' Angular2中上面代码中的参数。
任何帮助将不胜感激!谢谢
答案 0 :(得分:9)
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,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();
}
}
}
运气:)
答案 1 :(得分:5)
所以,我找到了解决方案!
首先,您应该使用 NOT 常见js的echarts.js库。我使用this one我找到了here。请注意,前两个库是common.js和common.min.js。他们使用 require 作为函数,但typescript有自己的要求。这样做是不可能的,所以为了更清晰的解决方案,只需使用非常见的es库。
在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是一个我稍后填写选项的对象(就像在问题中给出的例子一样!
我希望这会对某人有所帮助!
答案 2 :(得分:1)
首先,通过npm
安装echartnpm install --save echarts
第二,需要组件中的echart
const echarts = require('echarts');
然后,在ngInit函数中,应用您的代码
const selectDom = this.renderer.selectRootElement('#chart');
const myChart = charts.init(selectDom);
答案 3 :(得分:1)
我用过:
import * as echarts from 'path/to/echarts/jsfile'
但是有错误
error TS2307: Cannot find module 'echarts'
最后,简单粗暴,我要求作为chass的财产:
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);
}
}
答案 4 :(得分: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
/ @ .ts
。
致电pages
- 忘记检查selector
!
import * as echarts from 'echarts';
(TS(Typescript)不是JS文件类型)
import { AngularModuleEcharts } from 'ngx-charts';
@TossPig的代码工作正常。
将Ionic3与TS devDependencies一起使用ngx-echarts
。
将Angular Directive转换为离子模块以便重复使用时遇到一些问题。
查看https://github.com/xieziyu/ngx-echarts和https://xieziyu.github.io/#/ngx-echarts/demo代码结构和实现为Angular组件。
答案 5 :(得分:0)