diff --git a/src/app/routes/datatable/components/datascreen/curve/curve.component.html b/src/app/routes/datatable/components/datascreen/curve/curve.component.html new file mode 100644 index 00000000..f47cc41a --- /dev/null +++ b/src/app/routes/datatable/components/datascreen/curve/curve.component.html @@ -0,0 +1,2 @@ + + diff --git a/src/app/routes/datatable/components/datascreen/curve/map.component.less b/src/app/routes/datatable/components/datascreen/curve/curve.component.less similarity index 100% rename from src/app/routes/datatable/components/datascreen/curve/map.component.less rename to src/app/routes/datatable/components/datascreen/curve/curve.component.less diff --git a/src/app/routes/datatable/components/datascreen/curve/curve.component.ts b/src/app/routes/datatable/components/datascreen/curve/curve.component.ts new file mode 100644 index 00000000..36277f6e --- /dev/null +++ b/src/app/routes/datatable/components/datascreen/curve/curve.component.ts @@ -0,0 +1,133 @@ +/* + * @Description : + * @Version : 1.0 + * @Author : Shiming + * @Date : 2022-04-07 17:57:23 + * @LastEditors : Shiming + * @LastEditTime : 2022-04-07 18:24:57 + * @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', city: '运单数', temperature: 3.9 }, + { time: '03', city: '订单数', temperature: 6.9 }, + { time: '04', city: '订单数', temperature: 4.2 }, + { time: '05', city: '订单数', temperature: 9.5 }, + { time: '06', city: '订单数', temperature: 5.7 }, + { time: '06', city: '运单数', temperature: 5.7 }, + { time: '07', city: '运单数', temperature: 14.5 }, + { time: '08', city: '订单数', temperature: 8.5 }, + { time: '09', city: '订单数', temperature: 18.4 }, + { time: '10', city: '订单数', temperature: 11.9 }, + { time: '11', city: '订单数', temperature: 21.5 }, + { time: '12', city: '订单数', temperature: 15.2 }, + { time: '08', city: '运单数', temperature: 8.5 }, + { time: '09', city: '运单数', temperature: 18.4 }, + { time: '10', city: '运单数', temperature: 11.9 }, + { time: '11', city: '运单数', temperature: 21.5 }, + { time: '12', city: '订单数', 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): 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: 500, + }); + 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, + 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('city') + .shape('smooth'); + + this.chart + .point() + .position('time*temperature') + .color('city') + .shape('circle'); + this.chart.render(); + }; + }); + + + } +} diff --git a/src/app/routes/datatable/components/datascreen/datascreen.component.html b/src/app/routes/datatable/components/datascreen/datascreen.component.html index 4a4eb567..2b6dea9b 100644 --- a/src/app/routes/datatable/components/datascreen/datascreen.component.html +++ b/src/app/routes/datatable/components/datascreen/datascreen.component.html @@ -4,7 +4,7 @@ * @Author : Shiming * @Date : 2022-04-06 10:57:56 * @LastEditors : Shiming - * @LastEditTime : 2022-04-07 16:57:05 + * @LastEditTime : 2022-04-07 18:02:07 * @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.html * Copyright (C) 2022 huzhenhong. All rights reserved. --> @@ -43,15 +43,16 @@ - + > --> + = this.genData2(); + monthData2:G2TimelineData[] =[]; salesData2: Array = this.genData(); constructor(public service: DataService) {} ngOnChanges(changes: any): void { @@ -64,6 +67,7 @@ export class DatatableDatascreenComponent implements OnInit { this.initST(); this.initOrderST(); this.initData(); + this.genData2(); // this.initLineData(); } setTime() { @@ -126,24 +130,46 @@ export class DatatableDatascreenComponent implements OnInit { console.log(value); return value; } - private genData2(): G2TimelineData[] { - let ress: G2TimelineData[] = []; - this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => { + initPillarData(){ + + this.service.request(this.service.$api_getTradingTrend).subscribe(res => { if (res) { - res.forEach((element: any) => { - ress.push({ - time: element.time, - y1: element.billQuantity, - y2: element.wayBillQuantity + this.chartData2 = res + this.curve.reRender() + } + }) + } + public genData2(): G2TimelineData[] { + let value1: any[] = []; + this.monthData2 =[]; + this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => { + if (res) { + // var data1 = new Date('2022.1.1') + // var time1 = data1.getTime(); + // console.log(time1); + + var data2 = new Date('2022.2.1') + var time2 = data2.getTime(); + console.log(time2); + + var data3 = new Date('2022.3.1') + res.forEach((element: any,i:any) => { + console.log(element); + console.log(new Date().getTime() + 1000 * 60 * 60 * 24 * 2); + console.log(time2); + value1.push({ + time:'Feb', + y1: element?.y1, + y2: element?.y2 }); }); - console.log(ress); + this.monthData2 = res; + console.log(this.monthData2); + } }); - if(!ress) { - setTimeout(() => {},100) - } - return ress; + console.log(this.monthData2); + return value1; } /** * 初始化数据列表 diff --git a/src/app/routes/datatable/components/datascreen/curve/map.component.html b/src/app/routes/datatable/components/datascreen/map/map.component.html similarity index 100% rename from src/app/routes/datatable/components/datascreen/curve/map.component.html rename to src/app/routes/datatable/components/datascreen/map/map.component.html diff --git a/src/app/routes/datatable/components/datascreen/map/map.component.less b/src/app/routes/datatable/components/datascreen/map/map.component.less new file mode 100644 index 00000000..e69de29b diff --git a/src/app/routes/datatable/components/datascreen/curve/map.component.ts b/src/app/routes/datatable/components/datascreen/map/map.component.ts similarity index 83% rename from src/app/routes/datatable/components/datascreen/curve/map.component.ts rename to src/app/routes/datatable/components/datascreen/map/map.component.ts index 5702547c..09d7d863 100644 --- a/src/app/routes/datatable/components/datascreen/curve/map.component.ts +++ b/src/app/routes/datatable/components/datascreen/map/map.component.ts @@ -87,16 +87,27 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { }); // 可视化用户数据 - this.userData = [ - { name: '山东', value: 21 }, - { name: '山东', value: 22}, - { name: '广东', value: 20, }, - { name: '广东', value: 20 }, - { name: '四川', value: 120 }, - { name: '湖南', value: 200 }, - { name: '河北', value: 30 }, + // this.userData = [ + // { name: '山东', value: 21 }, + // { name: '山东', value: 22}, + // { name: '广东', value: 20, }, + // { name: '广东', value: 20 }, + // { name: '四川', value: 120 }, + // { name: '湖南', value: 200 }, + // { name: '河北', value: 30 }, - ]; + // ]; + let value: any = [] + this.service.request(this.service.$api_getTransactionDistribution).subscribe((res: any) => { + if(res) { + res.forEach((element: any) => { + value.push({ + name: element.province, + value: element.weight, + }); + }); + console.log(value); + this.userData = value this.userDv = this.ds.createView().source(this.userData).transform({ geoDataView: this.worldMap, field: 'name', @@ -129,7 +140,8 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { this.userView.interaction('element-active'); this.chart.render(); - + } + }) }); console.log('9999'); diff --git a/src/app/routes/datatable/datatable.module.ts b/src/app/routes/datatable/datatable.module.ts index bb38fea3..9af1cbd2 100644 --- a/src/app/routes/datatable/datatable.module.ts +++ b/src/app/routes/datatable/datatable.module.ts @@ -40,7 +40,8 @@ import { FinancetablePillarComponent } from './components/financetable/pillar/pi import { ComplianceCurveComponent } from './components/compliance/index/curve/curve.component'; import { BusitableCurveComponent } from './components/busitable/busiindex/curve/curve.component'; import { DatatableCustomindexCurveComponent } from './components/customtable/customindex/curve/curve.component'; -import { DatatableCustomindexMapComponent } from './components/datascreen/curve/map.component'; +import { DatatableCustomindexMapComponent } from './components/datascreen/map/map.component'; +import { DatatableCustomindexCurveMinComponent } from './components/datascreen/curve/curve.component'; const COMPONENTS: Type[] = [ DatatableDataindexComponent, @@ -74,7 +75,8 @@ const COMPONENTS: Type[] = [ ComplianceCurveComponent, BusitableCurveComponent, DatatableCustomindexCurveComponent, - DatatableCustomindexMapComponent + DatatableCustomindexMapComponent, + DatatableCustomindexCurveMinComponent ]