博客

1.实现效果

2.实现原理

https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html


覆盖在原生组件之上的文本视图。

目前原生组件均已支持同层渲染，建议使用 view 替代。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

3.完整代码

https://gitee.com/susuhhhhhh/wxmini_demo

4.部分代码

<view class="con">
  <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>

  <cover-view class="covew">
    <cover-view class="text1">苏苏</cover-view>
    <cover-view class="text2">100%</cover-view>
  </cover-view>
</view>

page{
  background-color: #fff;
}
.con{
  height: 800rpx;
  margin: 80px auto;
  position: relative;
}
.ec-canvas {
  width: 100%;
  height: 100%;
}

.covew{
  width: 220rpx;
  border-radius: 50%;
  height: 220rpx;
  position: absolute;
  top: 36%;
  left: 50%;
  margin-left: -111rpx;
}
.text1{
  text-align: center;
  font-size: 35rpx;
  font-weight: bold;
  padding-top: 50rpx;
  padding-bottom: 30rpx;
}
.text2{
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
  color: red;
}