141 lines
3.7 KiB
TypeScript
141 lines
3.7 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 },
|
|
|
|
];
|
|
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 }) => {
|
|
|
|
obj.trend = obj.value > 100 ? '蓝色地区' : '灰色地区';
|
|
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', ['#c7daf3', '#1779f3']).tooltip('').style({fillOpacity: 0.85 })
|
|
// .animate({
|
|
// leave: {
|
|
// animation: 'fade-out'
|
|
// }
|
|
// });
|
|
this.userView.interaction('element-active');
|
|
this.chart.render();
|
|
|
|
|
|
});
|
|
|
|
console.log('9999');
|
|
|
|
|
|
}
|
|
|
|
}
|