echarts鼠标移入的提示框自定义

最新推荐文章于 2024-08-08 17:57:58 发布

阳光男孩~Taner

最新推荐文章于 2024-08-08 17:57:58 发布

阅读量453

点赞数 4

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/qq_37750030/article/details/140355698

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码

tooltip: {
    trigger: "item",
    backgroundColor: "rgba(5,26,78,0)", // 背景色
    extraCssText: "box-shadow:none;", // 覆盖原始style样式
    borderWidth: 0, // 边框宽度

    textStyle: {
      color: "#fff", // 文字颜色
    },
	// 自定义提示内容
    formatter: function (params) {
      const itmData = params.data;
      const label = itmData?.dataLabel || params.name;
      let str = `<div class="map-info-popup"><div class="title">${label}</div>`;

      if (itmData && itmData.data && itmData.data.length > 0) {
        for (let i = 0; i < itmData.data.length; i++) {
          str += `<div class="pop-item">
            <div class="pop-item-name">${itmData.data[i].name}</div>
            <div class="pop-item-value">${itmData.data[i].value + itmData.data[i].unit}</div>
          </div>`;
        }
        str += `</div>`;
      } else {
        str += `<div class="pop-item">
        <div class="pop-item-name">无数据</div>
          <div class="pop-item-value">--</div>
          </div></div>`;
      }
      return str;
    },
    // 设置弹框位置
    position: function (pos, params, dom, rect, size) {
      return [pos[0] - size.contentSize[0] / 2, pos[1] - size.contentSize[1] - 10];
    },
  },

css 样式

<style lang="scss">
.map-info-popup {
  color: #fff;
  background: rgba(4, 31, 88, 0.9);
  border: 1px solid #0096ff;
  //box-shadow: inset 0 0 6px 2px rgba(0, 142, 255, 0.4);
  box-shadow: inset 0 0 10px 4px rgba(0, 222, 255, 0.4);
  background-attachment: fixed;

  padding: 10px;
  padding-bottom: 20px;
  width: 250px;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  &::after {
    content: "";
    position: absolute;
    bottom: -10px; /* 小三角形的顶部位于div底部下方10px的位置 */
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 18px;
    background: url("./img/popup-btm.png") no-repeat;
    background-size: 100% 100%;
  }

  .title {
    line-height: 14px;
  }
  .pop-item {
    display: flex;
    height: 14px;
    padding: 10px 0px;
    line-height: 14px;
    flex-direction: row;
    justify-content: space-between;
    .pop-item-name {
      min-width: 160px;
    }
    .pop-item-value {
      min-width: 60px;
      text-align: right;
    }
  }
}
</style>