ngx-echart地图

一、运行截图

　　

二、代码

　　html代码：

<div style="padding:24px;">
  
  <p style="font-size: 16px;margin-bottom: 0px;color: #8cc5fe;background-image: url('./../../assets/images/maptitle.png'); 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;
   29   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) {
    145     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("地图数据加载超时");
     }
      
  }

  

}