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 += '<div>'+params.data.linkstatusArr[i].deviceName+':'+params.data.linkstatusArr[i].linkStatus+'</div>'
                                }
                            }else{
                                wangguanarr=''
                            }

                            let plcarr=''
                            if (params.data.plcstatusArr.length!=0) {
                                for (let k = 0; k < params.data.plcstatusArr.length; k++) {
                                    plcarr += '<div>'+params.data.plcstatusArr[k].deviceName+':'+params.data.plcstatusArr[k].plcStatus+'</div>'
                                }
                            }else{
                                plcarr=''
                            }
                            console.log("------------------",params.data)
                            if(params.value){
                                return  params.name + 
                                '&nbsp;&nbsp;&nbsp' +
                                // 拼接a标签
                                '<a style="color:rgb(64, 158, 255);"  target="_blank" href="'+ params.data.webAddress + '">查 看</a><br>'+
                                '网关数量:'+params.data.linkCount+wangguanarr+'<br>'+
                                'PLC数量:'+params.data.plcCount+plcarr+'<br>'+
                                '设备总数:'+params.data.deviceCount+'<br>'+
                                '故障设备数:'+params.data.ngCount+'<br>'
                                // '设备异常总数:'+params.data.devicengCount+'<br>'
                                // <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 '&nbsp;&nbsp;' + params.name +'&nbsp;&nbsp;' ;
                            }
                        }
                    }, 
                    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'
   }
},
  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值