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

文章目录

  • [1. 实现根据经纬度自定义标注图片样式](#1. 实现根据经纬度自定义标注图片样式)
  • [2. 实现鼠标悬浮标注自定义弹窗样式内容](#2. 实现鼠标悬浮标注自定义弹窗样式内容)

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

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

  1. 结合上面代码,设置 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>
相关推荐
excel14 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼17 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping17 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙18 小时前
[译] Composition in CSS
前端·css
白水清风18 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix18 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780018 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端18 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧18 小时前
Promise 的使用
前端·javascript