ngx-echart地图

一、运行截图

　　

二、代码

　　html代码：

 <div style="padding:24px;">

   <p style="font-size: 16px;margin-bottom: 0px;color: #8cc5fe;background-image: url('./../../assets/images/maptitle.png');width: 250px;background-size: contain;background-repeat: no-repeat;height: 36px;line-height: 32px;padding-left: 10px;position: absolute;z-index: 0;">
     电站数量：
     <label *ngIf="mapComponentConfig.length !=0" style="font-size: 22px;font-family: -webkit-pictograph;color: #1bc3fd;">
       <app-led-clockfont [fontValue]="mapComponentConfig.length"></app-led-clockfont>
       <!-- mapComponentConfig.length = 397 -->
     </label>
     <label *ngIf="mapComponentConfig.length ==0" style="font-size: 22px;font-family: -webkit-pictograph;color: #1bc3fd;"><b>--</b></label>
   </p>
   <div echarts [options]="option1"  (chartInit)="onChartInit($event)" class="demo-chart" style="min-height: 600px;"></div>
 </div>

　　ts代码：

　　　　

 import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import * as echarts from 'echarts';

 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.css']
 })
 export class MapComponent implements OnInit {
   @Input() mapComponentConfig;
   private map:any ;
   public option1:any;
   //地图
   private data = [];
   private provinceDataStatus:any;
   private echartsIntance:any;
      constructor(private http:HttpClient) {
     console.log("我在'地图'组件，构造函数中");
    }

   ngOnInit() {
     console.log("我在'地图'组件，初始化函数中");
     this.http.get('assets/data/china.json')
         .subscribe(geoJson  => {
             echarts.registerMap('china', geoJson);
             if(this.mapComponentConfig){
                 this.option1 = {
                     backgroundColor: 'transparent',
                     title: {
                       text: '',
                     //   this.mapComponentConfig.count
                       left: 'left',
                       textStyle: {
                           color: '#fff'
                       }
                     },
                     tooltip : {
                       trigger: 'item'
                     },
                     legend: {
                       orient: 'vertical',
                       y: 'bottom',
                       x:'right',
                       data:['pm2.5'],
                       textStyle: {
                           color: '#fff'
                       }
                     },
                     formatter: '{b}',
                     geo: {
                       map: 'china',
                         // map: 'China',
                       label: {
                           emphasis: {
                               show: false
                           }
                       },
                       roam: true,
                       itemStyle: {
                         //   color:'purple',
                           borderColor :'black',
                           borderWidth :5,
                           normal: {
                               areaColor: 'black',
                             //   borderColor: 'purple'
                           },
                           emphasis: {
                             areaColor: 'black',
                             //   areaColor: '#2a333d'
                           }
                       }
                     },
                     series : [
                       {
                           name: '',
                           type: 'effectScatter',
                           coordinateSystem: 'geo',
                           data:this.convertData(this.mapComponentConfig.data),
                           zoom: 3.2,
                           symbolSize:10,
                           showEffectOn: 'render',
                           rippleEffect: {
                               brushType: 'stroke'
                           },
                           hoverAnimation: true,
                           label: {
                               normal: {
                                   formatter: '{b}',
                                   position: 'right',
                                   show: false
                               }
                           },
                           itemStyle: {
                               normal: {
                                   color: '#f4e925',
                                   shadowBlur: 10,
                                   shadowColor: '#333'
                               }
                           },
                           zlevel: 1
                       }
                     ]
                 };

             }else{
                 console.log("地图数据请求超时");
             };
         })
   }

   convertData (data) {
     const _self = this;
     let res = [];
     if(_self.mapComponentConfig){
         for (var i = 0; i < _self.mapComponentConfig.length; i++) {
             res.push({
                 name:_self.mapComponentConfig[i].station_name,
                 value:[_self.mapComponentConfig[i].jingdu,_self.mapComponentConfig[i].weidu]
             })
         }
         return res;
     }else{
         //Do-nothing
          res = [];
          return res;
     }
   };

   //图表初始化实例
   onChartInit(event) {
          this.echartsIntance = event;
     // this.echartsIntance.showLoading(this.default);
   }

   ngOnChanges(changes: SimpleChanges): void {

      if(changes['mapComponentConfig'] !== undefined){
          let new_data = this.mapComponentConfig.data;
             this.option1 = {
                 backgroundColor: 'transparent',
                 title: {
                   text: '',
                   left: 'left',
                   textStyle: {
                       color: '#fff'
                   }
                 },
                 tooltip : {
                   trigger: 'item'
                 },
                 legend: {
                   orient: 'vertical',
                   y: 'bottom',
                   x:'right',
                   data:['pm2.5'],
                   textStyle: {
                       color: '#fff'
                   }
                 },
                 formatter: '{b}',

                 geo: {
                   map: 'china',
                   label: {
                       emphasis: {
                           show: false
                       }
                   },
                   roam: true,
                   itemStyle: {
                       borderColor :'black',
                       borderWidth :5,
                       normal: {
                           areaColor:'black',
                       },
                       emphasis: {
                         areaColor: 'black',
                       }
                   }
                 },
                 series : [
                   {
                       name: '',
                       type: 'effectScatter',
                       coordinateSystem: 'geo',
                       data:this.convertData(new_data),
                       zoom: 3.2,
                       symbolSize:10,
                       showEffectOn: 'render',
                       rippleEffect: {
                           brushType: 'stroke'
                       },
                       hoverAnimation: true,
                       label: {
                           normal: {
                               formatter: '{b}',
                               position: 'right',
                               show: false
                           }
                       },

                       itemStyle: {
                           normal: {
                               color: '#f4e925',
                             //   color:'#e96c1d',
                               shadowBlur: 10,
                               shadowColor: '#333'
                           }
                       },
                       zlevel: 1
                   }
                 ]
             };

             // if(this.echartsIntance){
             //     console.log("this.echartsIntance:",this.echartsIntance);
             //     this.echartsIntance.hideLoading();
             // }else{
             //     //Do-nothing
             // }

      }else{
          console.log("地图数据加载超时");
      }

   }

 }