133 lines
3.7 KiB
TypeScript
133 lines
3.7 KiB
TypeScript
/*
|
|
* @Description :
|
|
* @Version : 1.0
|
|
* @Author : Shiming
|
|
* @Date : 2022-04-07 17:57:23
|
|
* @LastEditors : Shiming
|
|
* @LastEditTime : 2022-04-13 10:22:35
|
|
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\curve\\curve.component.ts
|
|
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
|
*/
|
|
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
|
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
|
|
import { DataService } from '../../../services/data.service';
|
|
// import DataSet from '@antv/data-set';
|
|
const DataSet = require('@antv/data-set');
|
|
import { Chart } from '@antv/g2';
|
|
@Component({
|
|
selector: 'app-financetable-curve-min',
|
|
templateUrl: './curve.component.html',
|
|
styleUrls: ['./curve.component.less']
|
|
})
|
|
export class DatatableCustomindexCurveMinComponent implements OnInit,OnChanges {
|
|
el: any;
|
|
@Input() chartData: any;
|
|
chart: any;
|
|
data = [
|
|
{ time: '01', type: '订单数', temperature: 7 },
|
|
{ time: '02', type: '运单数', temperature: 3.9 },
|
|
{ time: '03', type: '订单数', temperature: 6.9 },
|
|
{ time: '04', type: '订单数', temperature: 4.2 },
|
|
{ time: '05', type: '订单数', temperature: 9.5 },
|
|
{ time: '06', type: '订单数', temperature: 5.7 },
|
|
{ time: '06', type: '运单数', temperature: 5.7 },
|
|
{ time: '07', type: '运单数', temperature: 14.5 },
|
|
{ time: '08', type: '订单数', temperature: 8.5 },
|
|
{ time: '09', type: '订单数', temperature: 18.4 },
|
|
{ time: '10', type: '订单数', temperature: 11.9 },
|
|
{ time: '11', type: '订单数', temperature: 21.5 },
|
|
{ time: '12', type: '订单数', temperature: 15.2 },
|
|
{ time: '08', type: '运单数', temperature: 8.5 },
|
|
{ time: '09', type: '运单数', temperature: 18.4 },
|
|
{ time: '10', type: '运单数', temperature: 11.9 },
|
|
{ time: '11', type: '运单数', temperature: 21.5 },
|
|
{ time: '12', type: '订单数', temperature: 15.2 },
|
|
];
|
|
constructor(private service: DataService, private ngZone: NgZone) {
|
|
|
|
}
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
if (this.chartData) {
|
|
// setTimeout(()=>{
|
|
// this.chart.render(true)
|
|
// }, 1000)
|
|
|
|
}
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
|
|
}
|
|
reRender() {
|
|
setTimeout(() => {
|
|
this.chart.data(this.chartData);
|
|
this.chart.render();
|
|
}, 1000)
|
|
}
|
|
render(el: ElementRef<HTMLDivElement>): void {
|
|
this.el = el.nativeElement
|
|
setTimeout(() => {
|
|
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
|
}, 1000)
|
|
}
|
|
|
|
private init(el: HTMLElement): void {
|
|
this.chart = new Chart({
|
|
container: el,
|
|
autoFit: true,
|
|
height: 320,
|
|
});
|
|
let value: any = []
|
|
this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
|
|
if(res) {
|
|
res.forEach((element: any) => {
|
|
value.push({
|
|
time: element?.time,
|
|
type: element?.type == 'DD' ? '订单数' : '运单数',
|
|
temperature: element?.value,
|
|
});
|
|
});
|
|
console.log(value);
|
|
this.chartData = value
|
|
this.chart.data(this.chartData);
|
|
this.chart.scale({
|
|
time: {
|
|
range: [0, 1],
|
|
},
|
|
number: {
|
|
nice: true,
|
|
},
|
|
});
|
|
|
|
this.chart.tooltip({
|
|
showCrosshairs: true,
|
|
shared: true,
|
|
});
|
|
|
|
|
|
this.chart.axis('temperature', {
|
|
label: {
|
|
formatter: (val: any) => {
|
|
return val + '万';
|
|
},
|
|
},
|
|
});
|
|
this.chart
|
|
.line()
|
|
.position('time*temperature')
|
|
.color('type')
|
|
.shape('smooth');
|
|
|
|
this.chart
|
|
.point()
|
|
.position('time*temperature')
|
|
.color('type')
|
|
.shape('circle');
|
|
this.chart.render();
|
|
};
|
|
});
|
|
|
|
|
|
}
|
|
}
|