文章目录
- [1. 实现根据经纬度自定义标注图片样式](#1. 实现根据经纬度自定义标注图片样式)
- [2. 实现鼠标悬浮标注自定义弹窗样式内容](#2. 实现鼠标悬浮标注自定义弹窗样式内容)
1. 实现根据经纬度自定义标注图片样式
- 设置
symbol
属性为image://${require("@/assets/img/dataView/point.png")}
图片地址即可,注意前面跟image://
特有的写法 baseData
是经纬度数据,这里不贴了
js
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样式即可
js
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>
`;
};
css
<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>