ngx-echart地图

Posted 2021-02-09 mycnblogs-guoguo

一、运行截图

　　

二、代码

　　html代码：

 1 <div style="padding:24px;">
 2   
 3   <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;">
 4     电站数量：
 5     <label *ngIf="mapComponentConfig.length !=0" style="font-size: 22px;font-family: -webkit-pictograph;color: #1bc3fd;">
 6       <app-led-clockfont [fontValue]="mapComponentConfig.length"></app-led-clockfont>
 7       <!-- mapComponentConfig.length = 397 -->
 8     </label> 
 9     <label *ngIf="mapComponentConfig.length ==0" style="font-size: 22px;font-family: -webkit-pictograph;color: #1bc3fd;"><b>--</b></label> 
10   </p>
11   <div echarts [options]="option1"  (chartInit)="onChartInit($event)" class="demo-chart" style="min-height: 600px;"></div>
12 </div>

　　ts代码：

　　　　

  1 import { Component, OnInit, Input, SimpleChanges } from ‘@angular/core‘;
  2 import { HttpClient } from ‘@angular/common/http‘;
  3 import * as echarts from ‘echarts‘;
  4 
  5 @Component({
  6   selector: ‘app-map‘,
  7   templateUrl: ‘./map.component.html‘,
  8   styleUrls: [‘./map.component.css‘]
  9 })
 10 export class MapComponent implements OnInit {
 11   @Input() mapComponentConfig;
 12   private map:any ;
 13   public option1:any; 
 14   //地图
 15   private data = [];
 16   private provinceDataStatus:any;
 17   private echartsIntance:any;
 18    29   constructor(private http:HttpClient) {
 30     console.log("我在‘地图‘组件，构造函数中");
 31    }
 32 
 33 
 34   ngOnInit() {
 35     console.log("我在‘地图‘组件，初始化函数中");
 36     this.http.get(‘assets/data/china.json‘)
 37         .subscribe(geoJson  => {
 38             echarts.registerMap(‘china‘, geoJson);
 39             if(this.mapComponentConfig){
 40                 this.option1 = {
 41                     backgroundColor: ‘transparent‘,
 42                     title: {
 43                       text: ‘‘,
 44                     //   this.mapComponentConfig.count
 45                       left: ‘left‘,
 46                       textStyle: {
 47                           color: ‘#fff‘
 48                       }
 49                     },
 50                     tooltip : {
 51                       trigger: ‘item‘
 52                     },
 53                     legend: {
 54                       orient: ‘vertical‘,
 55                       y: ‘bottom‘,
 56                       x:‘right‘,
 57                       data:[‘pm2.5‘],
 58                       textStyle: {
 59                           color: ‘#fff‘
 60                       }
 61                     },
 62                     formatter: ‘{b}‘,
 63                     geo: {
 64                       map: ‘china‘,
 65                         // map: ‘China‘,
 66                       label: {
 67                           emphasis: {
 68                               show: false
 69                           }
 70                       },
 71                       roam: true,
 72                       itemStyle: {
 73                         //   color:‘purple‘, 
 74                           borderColor :‘black‘,
 75                           borderWidth :5,
 76                           normal: {
 77                               areaColor: ‘black‘,
 78                             //   borderColor: ‘purple‘
 79                           },
 80                           emphasis: {
 81                             areaColor: ‘black‘,
 82                             //   areaColor: ‘#2a333d‘
 83                           }
 84                       }
 85                     },
 86                     series : [
 87                       {
 88                           name: ‘‘,
 89                           type: ‘effectScatter‘,
 90                           coordinateSystem: ‘geo‘,
 91                           data:this.convertData(this.mapComponentConfig.data),
 92                           zoom: 3.2,
 93                           symbolSize:10,
 94                           showEffectOn: ‘render‘,
 95                           rippleEffect: {
 96                               brushType: ‘stroke‘
 97                           },
 98                           hoverAnimation: true,
 99                           label: {
100                               normal: {
101                                   formatter: ‘{b}‘,
102                                   position: ‘right‘,
103                                   show: false
104                               }
105                           },
106                           itemStyle: {
107                               normal: {
108                                   color: ‘#f4e925‘,
109                                   shadowBlur: 10,
110                                   shadowColor: ‘#333‘
111                               }
112                           },
113                           zlevel: 1
114                       }
115                     ]
116                 };
117 
118             }else{
119                 console.log("地图数据请求超时");
120             }; 
121         })
122   }
123 
124   convertData (data) {
125     const _self = this;
126     let res = [];
127     if(_self.mapComponentConfig){
128         for (var i = 0; i < _self.mapComponentConfig.length; i++) {
129             res.push({
130                 name:_self.mapComponentConfig[i].station_name,
131                 value:[_self.mapComponentConfig[i].jingdu,_self.mapComponentConfig[i].weidu]
132             })
133         }
134         return res;
135     }else{
136         //Do-nothing
137          res = [];
138          return res;
139     }
140   };
141 
142   //图表初始化实例
143   onChartInit(event) {
144     145     this.echartsIntance = event;
146     // this.echartsIntance.showLoading(this.default);
147   }
148 
149   ngOnChanges(changes: SimpleChanges): void {
150     
151      if(changes[‘mapComponentConfig‘] !== undefined){
152          let new_data = this.mapComponentConfig.data;
153             this.option1 = {
154                 backgroundColor: ‘transparent‘,
155                 title: {
156                   text: ‘‘,
157                   left: ‘left‘,
158                   textStyle: {
159                       color: ‘#fff‘
160                   }
161                 },
162                 tooltip : {
163                   trigger: ‘item‘
164                 },
165                 legend: {
166                   orient: ‘vertical‘,
167                   y: ‘bottom‘,
168                   x:‘right‘,
169                   data:[‘pm2.5‘],
170                   textStyle: {
171                       color: ‘#fff‘
172                   }
173                 },
174                 formatter: ‘{b}‘,
175             
176                 geo: {
177                   map: ‘china‘,
178                   label: {
179                       emphasis: {
180                           show: false
181                       }
182                   },
183                   roam: true,
184                   itemStyle: {
185                       borderColor :‘black‘,
186                       borderWidth :5,
187                       normal: {
188                           areaColor:‘black‘,
189                       },
190                       emphasis: {
191                         areaColor: ‘black‘,
192                       }
193                   }
194                 },
195                 series : [
196                   {
197                       name: ‘‘,
198                       type: ‘effectScatter‘,
199                       coordinateSystem: ‘geo‘,
200                       data:this.convertData(new_data),
201                       zoom: 3.2,
202                       symbolSize:10,
203                       showEffectOn: ‘render‘,
204                       rippleEffect: {
205                           brushType: ‘stroke‘
206                       },
207                       hoverAnimation: true,
208                       label: {
209                           normal: {
210                               formatter: ‘{b}‘,
211                               position: ‘right‘,
212                               show: false
213                           }
214                       },
215                       
216                       itemStyle: {
217                           normal: {
218                               color: ‘#f4e925‘,
219                             //   color:‘#e96c1d‘,
220                               shadowBlur: 10,
221                               shadowColor: ‘#333‘
222                           }
223                       },
224                       zlevel: 1
225                   }
226                 ]
227             };
228 
229             // if(this.echartsIntance){
230             //     console.log("this.echartsIntance:",this.echartsIntance);
231             //     this.echartsIntance.hideLoading();
232             // }else{
233             //     //Do-nothing
234             // }
235             
236      }else{
237          console.log("地图数据加载超时");
238      }
239       
240   }
241 
242   
243 
244 }