130 lines
3.2 KiB
TypeScript
130 lines
3.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;
|
|
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 => {
|
|
console.log(mapData);
|
|
this.mapData =mapData
|
|
});
|
|
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 },
|
|
];
|
|
const userDv = ds
|
|
.createView()
|
|
.source(userData)
|
|
.transform({
|
|
geoDataView: worldMap,
|
|
field: 'name',
|
|
type: 'geo.region',
|
|
as: ['longitude', 'latitude']
|
|
})
|
|
.transform({
|
|
type: 'map',
|
|
callback: (obj: { trend: string; value: number }) => {
|
|
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.chart.render();
|
|
}
|
|
}
|