echarts 自定义标注样式自定义tooltip弹窗样式

1. 实现根据经纬度自定义标注图片样式

1. 设置 symbol 属性为 image://${require("@/assets/img/dataView/point.png")} 图片地址即可，注意前面跟 image:// 特有的写法
2. 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. 实现鼠标悬浮标注自定义弹窗样式内容

1. 结合上面代码，设置 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>