1. 实现根据经纬度自定义标注图片样式
设置 symbol
属性为 image://${require("@/assets/img/dataView/point.png")}
图片地址即可,注意前面跟 image://
特有的写法
baseData
是经纬度数据,这里不贴了
let option = {
tooltip : {
... .
} ,
geo : {
... .
} ,
series : [
{
type : "map" ,
... .
} ,
{
type : "scatter" ,
coordinateSystem : "geo" ,
itemStyle : {
color : "#f00" ,
} ,
tooltip : {
trigger : "item" ,
backgroundColor : "transparent" ,
formatter : function ( params ) {
return formatHtml ( params. data) ;
} ,
} ,
symbol : ` image:// ${ require ( "@/assets/img/dataView/point.png" ) } ` ,
symbolSize : [ 48 , 58 ] ,
symbolOffset : [ 0 , 0 ] ,
z : 9999 ,
data : this . baseData,
} ,
] ,
} ;
2. 实现鼠标悬浮标注自定义弹窗样式内容
结合上面代码,设置 tooltip
为自定义的一个函数 formatHtml
,内容如下,主要是自定义css样式即可
let formatHtml = ( { name, computilityData } ) => {
return `
<div class="tooltip-chart">
<div class="item">
<span>基地名称</span>
<span class="name"> ${ name} </span>
</div>
<div class="item">
<span>基地CPU服务器数量</span>
<span> ${ computilityData?. baseCpuserverNumber || 0 } </span>
</div>
<div class="item">
<span>基地CPU总核数</span>
<span> ${ computilityData?. baseCpuScores || 0 } </span>
</div>
<div class="item">
<span>基地空闲CPU核数</span>
<span> ${ computilityData?. baseIdlecpuScores || 0 } </span>
</div>
<div class="item">
<span>基地内存空间总容量</span>
<span> ${ computilityData?. baseMemoryCapacity || 0 } </span>
</div>
<div class="item">
<span>基地空闲内存空间容量</span>
<span> ${ computilityData?. baseIdlememoryCapacity || 0 } </span>
</div>
<div class="item">
<span>基地存储空间总容量</span>
<span> ${ computilityData?. baseStorageCapacity || 0 } </span>
</div>
<div class="item">
<span>基地空闲存储空间容量</span>
<span> ${ computilityData?. baseIdlestorageCapacity || 0 } </span>
</div>
<div class="item">
<span>基地上行网络带宽总量</span>
<span> ${ computilityData?. baseUploadBandwidthCapacity || 0 } </span>
</div>
<div class="item">
<span>基地空闲上行网络带宽</span>
<span> ${
computilityData?. baseIdleuploadBandwidthCapacity || 0
} </span>
</div>
<div class="item">
<span>基地下行网络带宽总量</span>
<span> ${ computilityData?. baseDownloadBandwidthCapacity || 0 } </span>
</div>
<div class="item">
<span>基地空闲下行网络带宽</span>
<span> ${
computilityData?. baseIdledownloadBandwidthCapacity || 0
} </span>
</div>
<div class="item">
<span>基地GPU服务器数量</span>
<span> ${ computilityData?. baseGpuserverNumber || 0 } </span>
</div>
<div class="item">
<span>基地GPU总核数</span>
<span> ${ computilityData?. baseGpuScores || 0 } </span>
</div>
<div class="item">
<span>基地空闲GPU核数</span>
<span> ${ computilityData?. baseIdlegpuScores || 0 } </span>
</div>
<div class="item">
<span>基地NPU服务器数量</span>
<span> ${ computilityData?. baseNpuServerNumber || 0 } </span>
</div>
<div class="item">
<span>基地NPU总核数</span>
<span> ${ computilityData?. baseNpuScores || 0 } </span>
</div>
<div class="item">
<span>基地空闲NPU核数</span>
<span> ${ computilityData?. baseIdlenpuScores || 0 } </span>
</div>
<div class="item">
<span>基地FP16总算力</span>
<span> ${ computilityData?. baseFp16Computility || 0 } </span>
</div>
<div class="item">
<span>基地空闲FP16算力</span>
<span> ${ computilityData?. baseIdlefp16Computility || 0 } </span>
</div>
<div class="item">
<span>基地FP32总算力</span>
<span> ${ computilityData?. baseFp32Computility || 0 } </span>
</div>
<div class="item">
<span>基地空闲FP32算力</span>
<span> ${ computilityData?. baseIdlefp32Computility || 0 } </span>
</div>
<div class="item">
<span>基地显存总量</span>
<span> ${ computilityData?. baseGraphicsMemoryCapacity || 0 } </span>
</div>
<div class="item">
<span>基地空闲显存</span>
<span> ${ computilityData?. baseIdlegraphicsMemoryCapacity || 0 } </span>
</div>
</div>
` ;
} ;
<style scoped lang="less">
/deep/ .tooltip-chart {
background-color : transparent;
width : 520px;
height : 334px;
background : url ( "../../../../assets/img/dataView/tooltip_bg.webp" ) no-repeat;
background-size : 100% 100%;
background-position : center;
padding : 16px 25px 16px 20px;
grid-gap : 0 40px;
overflow : auto;
display : grid;
grid-template-columns : repeat ( 2, 1fr) ;
.item {
font-weight : 500;
font-size : 13px;
color : #ffffff;
line-height : 20px;
display : flex;
justify-content : space-between;
align-items : center;
span {
&:first-child {
position : relative;
padding-left : 14px;
&::after {
content : "" ;
position : absolute;
top : 50%;
left : 0;
transform : translateY ( -50%) ;
width : 5px;
height : 5px;
border-radius : 50%;
background : #fff;
}
}
&:last-child {
text-align : left;
}
}
}
}
</style>