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

文章目录

[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>