一、运行截图
二、代码
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("地图数据加载超时");
}
}
}