blogs

水球图

怡然

185字小于1分钟

HTMLCSS

2024-07-17

相关信息

开发中遇到的水球图样式，在echarts中没有合适的，手动封装一个

水球图

<div class="water">
  <div class="water-left">
    <div class="water-out">
      <span class="water-num">45385</span>
      <div class="water-border"></div>
      <div class="water-polo">
        <div class="water-inner"></div>
      </div>
    </div>
  </div>
<div>

.water {
  display: flex;
  margin-left: 20px;
  padding-top: 5px;
}

.water-out {
  position: relative;
  width: 110px;
  height: 110px;
}

.water-border,
.water-polo,
.water-inner {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  border: 2px solid #0A4E79;
  box-sizing: border-box;
  overflow: hidden;
}

.water-border {
  top: 0;
}

.water-inner {
  border-color: #3EDFFB;
  bottom: 0;
}

.water-polo {
  bottom: 0px;
  height: 40px;
  border: none;
  border-radius: 0;
}
.water-num {
  position: absolute;
  width: 100%;
  top: calc(50% - 12px);
  text-align: center;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(#7CD4F4 0.4150390625%, #2CA2C2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}