From 5f9f2e38616af9ab4618c831b366d25b936b56fa Mon Sep 17 00:00:00 2001 From: wangshiming Date: Thu, 7 Apr 2022 15:33:04 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../datascreen/curve/map.component.ts | 47 ++++++++++--------- .../datascreen/datascreen.component.ts | 30 ++++++++++-- .../routes/datatable/services/data.service.ts | 4 +- 3 files changed, 55 insertions(+), 26 deletions(-) diff --git a/src/app/routes/datatable/components/datascreen/curve/map.component.ts b/src/app/routes/datatable/components/datascreen/curve/map.component.ts index 5a66c684..5ce91326 100644 --- a/src/app/routes/datatable/components/datascreen/curve/map.component.ts +++ b/src/app/routes/datatable/components/datascreen/curve/map.component.ts @@ -20,7 +20,11 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { constructor(private service: DataService, private ngZone: NgZone) {} ngOnChanges(changes: SimpleChanges): void { - if (this.chartData) { + if (changes.chartData && !changes.chartData.isFirstChange()) { + this.userData = changes.chartData.currentValue; + console.log(this.userView); + + this.userView.source(this.userData) // setTimeout(()=>{ // this.chart.render(true) // }, 1000) @@ -49,7 +53,7 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { this.chart = new Chart({ container: el, autoFit: true, - height: 700, + height: 680, padding: [0, 0] }); this.chart.tooltip({ @@ -87,17 +91,21 @@ 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.userDv = this.ds.createView().source(this.userData).transform({ + this.userData = this.chartData + console.log(this.userData); + + // 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', type: 'geo.region', @@ -105,6 +113,7 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { }).transform({ type: 'map', callback: (obj: { trend: string; value: number }) => { + console.log(this.userData); obj.trend = obj.value > 100 ? '蓝色地区' : '红色地区'; return obj; @@ -117,9 +126,6 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { // alias: '蓝色地区数量' // } // }); - console.log(this.userView); - console.log('45545'); - this.userView.polygon().position('longitude*latitude').color('trend', ['#000', '#76ddb2']).tooltip('').style({fillOpacity: 0.85 }) // .animate({ // leave: { @@ -128,13 +134,10 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { // }); this.userView.interaction('element-active'); this.chart.render(); + // } + // }); - - }); - - console.log('9999'); - - + }) } } diff --git a/src/app/routes/datatable/components/datascreen/datascreen.component.ts b/src/app/routes/datatable/components/datascreen/datascreen.component.ts index df261bc6..0c72e06f 100644 --- a/src/app/routes/datatable/components/datascreen/datascreen.component.ts +++ b/src/app/routes/datatable/components/datascreen/datascreen.component.ts @@ -5,7 +5,7 @@ import { map } from 'rxjs/operators'; * @Author : Shiming * @Date : 2022-04-06 10:57:56 * @LastEditors : Shiming - * @LastEditTime : 2022-04-07 14:59:12 + * @LastEditTime : 2022-04-07 15:16:53 * @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.ts * Copyright (C) 2022 huzhenhong. All rights reserved. */ @@ -30,7 +30,7 @@ export class DatatableDatascreenComponent implements OnInit { @ViewChild('orderSt') private readonly orderSt!: STComponent; @ViewChild('map') private readonly map!: DatatableCustomindexMapComponent; columns: STColumn[] = []; - chartData: G2TimelineData[] = []; + chartData: any[] = []; orderColumns: STColumn[] = []; allDeal: any; headDeal: any; @@ -77,6 +77,20 @@ export class DatatableDatascreenComponent implements OnInit { this.service.request(this.service.$api_getTradingToday).subscribe((res: any) => { this.todaysDeal = res }) + 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.chartData = value + this.map.reRender() + } + }) } initLineData(){ this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => { @@ -88,7 +102,17 @@ export class DatatableDatascreenComponent implements OnInit { // y2: Math.floor(Math.random() * 100) + 10, // }); // } - }) + }) + this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => { + this.monthData = res + // for (let i = 0; i < 20; i += 1) { + // this.monthData.push({ + // time: new Date().getTime() + 1000 * 60 * 60 * 24 * i, + // y1: Math.floor(Math.random() * 100) + 1000, + // y2: Math.floor(Math.random() * 100) + 10, + // }); + // } + }) let value: any = [] this.service.request(this.service.$api_getShipmentRanking).subscribe((res: any) => { console.log(res); diff --git a/src/app/routes/datatable/services/data.service.ts b/src/app/routes/datatable/services/data.service.ts index 32f2c4e0..e7443148 100644 --- a/src/app/routes/datatable/services/data.service.ts +++ b/src/app/routes/datatable/services/data.service.ts @@ -4,7 +4,7 @@ * @Author : Shiming * @Date : 2021-12-27 10:30:56 * @LastEditors : Shiming - * @LastEditTime : 2022-04-07 09:30:16 + * @LastEditTime : 2022-04-07 15:07:27 * @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\services\\data.service.ts * Copyright (C) 2022 huzhenhong. All rights reserved. */ @@ -82,6 +82,8 @@ export class DataService extends BaseService { $api_getTradingTrend = `/api/sdc/reportDataLargeScreen/getTradingTrend`; // 数据大屏-交易额(今日，本月，累计) $api_getTransactionAmount = `/api/sdc/reportDataLargeScreen/getTransactionAmount`; + // 数据大屏-交易分布 + $api_getTransactionDistribution = `/api/sdc/reportDataLargeScreen/getTransactionDistribution`;