eCharts给图标添加边框

最新推荐文章于 2024-06-12 17:47:34 发布

乐容

最新推荐文章于 2024-06-12 17:47:34 发布

阅读量2.3k

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/m0_61265297/article/details/127753842

版权

<template>
  <div>
    <div class="panel" style="width: 100%;   height:3.6875rem">
      <div class="h-title">当天lR统计/今月lR统计</div>
      <div ref="chart" style="width: 100%; height: 3.15rem;" />
      // 添加一个盒子，当作底部边框
      <div class="panel-footer" />
    </div>
  </div>
</template>

.panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 0.1875rem 0 0 0;
  position: relative;
  margin-bottom: .2rem;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.175rem;
    height: 0.175rem;
    border-left: 0.025rem solid #02a6b5;
    border-top: 0.025rem solid #02a6b5;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0.175rem;
    height: 0.175rem;
    border-right: 0.025rem solid #02a6b5;
    border-top: 0.025rem solid #02a6b5;
  }
  .panel-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0.175rem;
      height: 0.175rem;
      border-left: 0.025rem solid #02a6b5;
      border-bottom: 0.025rem solid #02a6b5;
    }
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0.175rem;
      height: 0.175rem;
      border-right: 0.025rem solid #02a6b5;
      border-bottom: 0.025rem solid #02a6b5;

    }
  }
}