解决冲突

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();
   }
+  
 }