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 4abcefe1..b1f08a74 100644 --- a/src/app/routes/datatable/components/datascreen/curve/map.component.ts +++ b/src/app/routes/datatable/components/datascreen/curve/map.component.ts @@ -12,6 +12,11 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { @Input() chartData: any; chart: any; mapData: any; + ds!: DataSet ; + worldMap: any; + userView: any; + userDv: any; + userData: any = []; constructor(private service: DataService, private ngZone: NgZone) {} ngOnChanges(changes: SimpleChanges): void { @@ -40,90 +45,96 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges { fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/china.json') .then(res => res.json()) .then(mapData => { - console.log(mapData); this.mapData =mapData + this.chart = new Chart({ + container: el, + autoFit: true, + height: 540, + padding: [0, 0] + }); + this.chart.tooltip({ + showTitle: false, + showMarkers: false, + shared: true + }); + // 同步度量 + this.chart.scale({ + longitude: { + sync: true + }, + latitude: { + sync: true + } + }); + this.chart.axis(false); + this.chart.legend('trend', { + position: 'left' + }); + console.log('8888'); + + // 绘制世界地图背景 + this.ds = new DataSet(); + this.worldMap = this.ds.createView('back').source(this.mapData, { + type: 'GeoJSON' + }); + const worldMapView = this.chart.createView(); + worldMapView.data(this.worldMap.rows); + worldMapView.tooltip(false); + worldMapView.polygon().position('longitude*latitude').style({ + fill: '#fff', + stroke: '#ccc', + lineWidth: 1 }); - this.chart = new Chart({ - container: el, - autoFit: true, - height: 500, - padding: [0, 0] - }); - this.chart.tooltip({ - showTitle: false, - showMarkers: false, - shared: true - }); - // 同步度量 - this.chart.scale({ - longitude: { - sync: true - }, - latitude: { - sync: true - } - }); - this.chart.axis(false); - this.chart.legend('trend', { - position: 'left' - }); - - // 绘制世界地图背景 - const ds = new DataSet(); - const worldMap = ds.createView('back').source(this.mapData, { - type: 'GeoJSON' - }); - const worldMapView = this.chart.createView(); - worldMapView.data(worldMap.rows); - worldMapView.tooltip(false); - worldMapView.polygon().position('longitude*latitude').style({ - fill: '#fff', - stroke: '#ccc', - lineWidth: 1 - }); // 可视化用户数据 - const userData = [ - { name: 'China', value: 106.3 }, + this.userData = [ + { name: '山东', value: '21',trend:'#F51D27' }, + { name: '山东', value: 22}, + { name: '广东', value: 20,trend:'#0A61D7' }, + { name: '广东', value: 20 }, + { name: '四川', value: 120 }, + { name: '湖南', value: 200 }, + { name: '河北', value: 30 }, + ]; - const userDv = ds - .createView() - .source(userData) - .transform({ - geoDataView: worldMap, + this.userDv = this.ds.createView().source(this.userData).transform({ + geoDataView: this.worldMap, field: 'name', type: 'geo.region', as: ['longitude', 'latitude'] - }) - .transform({ + }).transform({ type: 'map', callback: (obj: { trend: string; value: number }) => { - obj.trend = obj.value > 100 ? '男性更多' : '女性更多'; + + obj.trend = obj.value > 100 ? '蓝色地区' : '红色地区'; return obj; } }); - const userView = this.chart.createView(); - userView.data(userDv.rows); - userView.scale({ - trend: { - alias: '每100位女性对应的男性数量' - } - }); - userView - .polygon() - .position('longitude*latitude') - .color('trend', ['#F51D27', '#0A61D7']) - .tooltip('name*trend') - .style({ - fillOpacity: 0.85 - }) - .animate({ - leave: { - animation: 'fade-out' - } - }); - userView.interaction('element-active'); + this.userView = this.chart.createView(); + this.userView.data(this.userDv.rows); + // this.userView.scale({ + // trend: { + // 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: { + // animation: 'fade-out' + // } + // }); + this.userView.interaction('element-active'); + this.chart.render(); + + + }); + + console.log('9999'); + - 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 f4852de4..0689ce07 100644 --- a/src/app/routes/datatable/components/datascreen/datascreen.component.html +++ b/src/app/routes/datatable/components/datascreen/datascreen.component.html @@ -4,13 +4,13 @@ * @Author : Shiming * @Date : 2022-04-06 10:57:56 * @LastEditors : Shiming - * @LastEditTime : 2022-04-06 20:39:43 + * @LastEditTime : 2022-04-07 01:26:56 * @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.html * Copyright (C) 2022 huzhenhong. All rights reserved. --> -
+
@@ -31,26 +31,60 @@ - + - + [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }" [loading]="service.http.loading">
- - + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + @@ -70,14 +104,27 @@ - + + + + + + + + + + + + + + - + [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }" [loading]="service.http.loading"> +
\ No newline at end of file diff --git a/src/app/routes/datatable/components/datascreen/datascreen.component.ts b/src/app/routes/datatable/components/datascreen/datascreen.component.ts index d5780871..876f729a 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-06 20:39:15 + * @LastEditTime : 2022-04-07 01:48:44 * @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.ts * Copyright (C) 2022 huzhenhong. All rights reserved. */ @@ -15,6 +15,10 @@ import { SFSchema } from '@delon/form'; import { ModalHelper, _HttpClient } from '@delon/theme'; import { DataService } from '../../services/data.service'; import { DatatableCustomindexMapComponent } from './curve/map.component'; +import { G2TimelineData } from '@delon/chart/timeline'; +import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area'; +import { format } from 'date-fns'; + @Component({ selector: 'app-datatable-datascreen', @@ -26,8 +30,9 @@ export class DatatableDatascreenComponent implements OnInit { @ViewChild('orderSt') private readonly orderSt!: STComponent; @ViewChild('map') private readonly map!: DatatableCustomindexMapComponent; columns: STColumn[] = []; - chartData: any = []; - orderColumns!: STColumn[]; + chartData: G2TimelineData[] = []; + orderColumns: STColumn[] = []; + salesData = this.genData(); constructor(public service: DataService) { } @@ -51,6 +56,27 @@ export class DatatableDatascreenComponent implements OnInit { ngOnInit(): void { this.initST() this.initOrderST() + this.initLineData() + } + initLineData(){ + for (let i = 0; i < 20; i += 1) { + this.chartData.push({ + time: new Date().getTime() + 1000 * 60 * 60 * 24 * i, + y1: Math.floor(Math.random() * 100) + 1000, + y2: Math.floor(Math.random() * 100) + 10, + }); + } + } + private genData(): G2MiniAreaData[] { + const beginDay = new Date().getTime(); + const res: G2MiniAreaData[] = []; + for (let i = 0; i < 20; i += 1) { + res.push({ + x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), + y: Math.floor(Math.random() * 100) + 10, + }); + } + return res; } /** * 初始化数据列表 @@ -72,11 +98,15 @@ export class DatatableDatascreenComponent implements OnInit { } initOrderST() { - this.columns = [ + this.orderColumns = [ { title: '运单号', index: 'carNo', className: 'text-center' }, { title: '货主', index: 'carNoColorLabel', className: 'text-center' }, { title: '时间', index: 'carModelLabel', className: 'text-center' }, { title: '风险等级', index: 'carStatus', className: 'text-center'} ]; } + + handleClick(data: G2MiniAreaClickItem): void { + this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`); + } }