解决冲突

2022-04-07 18:27:27 +08:00
parent deec1b0bd6
commit 7b0f2d49b5
9 changed files with 209 additions and 33 deletions
--- a/src/app/routes/datatable/components/datascreen/map/map.component.ts
+++ b/src/app/routes/datatable/components/datascreen/map/map.component.ts
@ -0,0 +1,152 @@
+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 }) => {
+          
+          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');
+  
+
+  }
+  
+}