echarts散点地图根据不同数据显示不同颜色的标记
var convertData = function (data) {
// console.log("convertData",data)
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = data[i].coordinate;
console.log("data[i]",data[i])
if (geoCoord) {
res.push({
name: data[i].factoryName,
value: geoCoord.concat(data[i].circleSize),
linkCount:data[i].linkStatus.deviceCount,
linkstatusArr:data[i].linkStatus.deviceArray,
plcCount:data[i].plcStatus.deviceCount,
plcstatusArr:data[i].plcStatus.deviceArray,
deviceCount:data[i].deviceStatus.deviceCount,
ngCount:data[i].deviceStatus.ngCount,
// deviceokCount:data[i].deviceStatus.okCount,
webAddress:data[i].webAddress,
});
}
}
return res;
};
var data=this.mapTableData
var option = {
tooltip: {
show: true, // 是否显示
trigger: 'item',
enterable: true,
triggerOn: 'click',
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距，
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
formatter: function(params,ticket, callback) {
console.log("params",params)
let wangguanarr = ""
if (params.data.linkstatusArr.length!=0) {
for (let i = 0; i < params.data.linkstatusArr.length; i++) {
wangguanarr += ''+params.data.linkstatusArr[i].deviceName+'：'+params.data.linkstatusArr[i].linkStatus+''
}
}else{
wangguanarr=''
}
let plcarr=''
if (params.data.plcstatusArr.length!=0) {
for (let k = 0; k < params.data.plcstatusArr.length; k++) {
plcarr += ''+params.data.plcstatusArr[k].deviceName+'：'+params.data.plcstatusArr[k].plcStatus+''
}
}else{
plcarr=''
}
console.log("------------------",params.data)
if(params.value){
return params.name +
' ' +
// 拼接a标签
''">查 看
'+
'网关数量：'+params.data.linkCount+wangguanarr+'
'+
'PLC数量：'+params.data.plcCount+plcarr+'
'+
'设备总数：'+params.data.deviceCount+'
'+
'故障设备数：'+params.data.ngCount+'
'
// '设备异常总数：'+params.data.devicengCount+'
'
// <a class="fr btn closeHandle" id="specialLook" οnclick="lookVideoGo(\''+ date + ' ' +params[0].name +' '+ params[int].seriesName+' '+params[int].data +' '+ params[int + 1].seriesName+': '+params[int + 1].data + '\')">查 看</a><br>
}else{
return ' ' + params.name +' ' ;
}
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: '#0f2c70' // 0% 处的颜色
}, {
offset: 1, color: '#091732' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
geo: {
map: 'china',
show: true,
roam: false,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#091632',
borderColor: '#1773c3',
shadowColor: '#1773c3',
shadowBlur: 20
}
}
},
series: [
{
type: 'map',
map: 'china',
geoIndex: 1,
aspectScale: 0.75, //长宽比
showLegendSymbol: true, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
borderWidth: 1
},
emphasis: {
areaColor: '#0f2c70'
}
},
data:[]
},
{
type: 'effectScatter',
show: true, // 是否显示
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 20;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color:function(params){ //根据不同数据显示不同颜色的标记
console.log("------",params)
if (params.data.name=="京科热电") {
return '#fff';
} else{
return '#00ff00';
}
},
// color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
};
this.myChart.setOption(option);
关键代码
itemStyle: {
normal: {
color:function(params){ //根据不同数据显示不同颜色的标记
console.log("------",params)
if (params.data.name=="京科热电") {
return '#fff';
} else{
return '#00ff00';
}
},
// color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},