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>
相关推荐
光影少年5 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_6 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189118 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾9 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking10 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu12 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym16 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫17 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫21 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat23 分钟前
前端性能优化2
前端