158 lines
4.2 KiB
TypeScript
158 lines
4.2 KiB
TypeScript
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
|
import { Chart } from '@antv/g2';
|
|
import DataSet from '@antv/data-set';
|
|
import { DataService } from 'src/app/routes/datatable/services/data.service';
|
|
@Component({
|
|
selector: 'app-datatable-customindex-map',
|
|
templateUrl: './map.component.html',
|
|
styleUrls: ['./map.component.less']
|
|
})
|
|
export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
|
|
el: any;
|
|
@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 {
|
|
if (this.chartData) {
|
|
// setTimeout(()=>{
|
|
// this.chart.render(true)
|
|
// }, 1000)
|
|
}
|
|
}
|
|
|
|
ngOnInit(): void {}
|
|
reRender() {
|
|
console.log('5454545');
|
|
setTimeout(() => {
|
|
this.chart.render();
|
|
}, 1000);
|
|
}
|
|
render(el: ElementRef<HTMLDivElement>): void {
|
|
this.el = el.nativeElement;
|
|
setTimeout(() => {
|
|
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
|
}, 500);
|
|
}
|
|
|
|
private init(el: HTMLElement): void {
|
|
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/china.json')
|
|
.then(res => res.json())
|
|
.then(mapData => {
|
|
this.mapData =mapData
|
|
this.chart = new Chart({
|
|
container: el,
|
|
autoFit: true,
|
|
height: 680,
|
|
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.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',
|
|
type: 'geo.region',
|
|
as: ['longitude', 'latitude']
|
|
}).transform({
|
|
type: 'map',
|
|
callback: (obj: { trend: string; value: number }) => {
|
|
if(obj.value < 500) {
|
|
obj.trend = '500以下';
|
|
} else if(obj.value >= 500 && obj.value < 1000){
|
|
obj.trend = '500-1000';
|
|
} else if(obj.value >= 1000 ){
|
|
obj.trend = '>1000';
|
|
}
|
|
return obj;
|
|
}
|
|
});
|
|
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', ['#0a3f80', '#1b6aca', '#5d93d4']).tooltip('name*trend*value').style({fillOpacity: 0.85 })
|
|
.animate({
|
|
leave: {
|
|
animation: 'fade-out'
|
|
}
|
|
});
|
|
this.userView.interaction('element-active');
|
|
this.chart.render();
|
|
|
|
}
|
|
})
|
|
});
|
|
|
|
console.log('9999');
|
|
|
|
|
|
}
|
|
|
|
}
|