原生微信小程序css实现雷达图

Code female artist

已于 2024-01-03 16:48:41 修改

阅读量424

点赞数 10

文章标签：微信小程序 css 小程序

于 2024-01-02 15:29:43 首次发布

本文链接：https://blog.csdn.net/2301_81331526/article/details/135342102

版权

本文详细介绍了在微信小程序中使用WXML和WXSS实现雷达图以及相关的UI组件设计，包括.viewclass类中的样式和布局。

摘要由CSDN通过智能技术生成

1、wxml文件：

<view class="intelligence-echarts">
    <!-- 雷达图 -->
    <view class="intelligence-nei"></view>
    <view class="intelligence-first"></view>
    <view class="intelligence-second"></view>
    <view class="intelligence-third"></view>
    <view class="intelligence-Four"></view>
    <view class="intelligence-Five"></view>
    <view class="intelligence-do one"></view>
    <view class="intelligence-do two"></view>
    <view class="intelligence-do three"></view>
    <view class="intelligence-do four"></view>
    <view class="intelligence-doA five"></view>
    <view class="intelligence-doA six"></view>
    <view class="intelligence-doA seven"></view>
</view>

2、wxss文件:

.intelligence-echarts {
  position: relative;
  margin: 125rpx auto;
  width: 427rpx;
  height: 427rpx;
  background: rgba(255, 218, 69, 0.1);
  border: 1px solid #DFFFFA;
  opacity: 0.55;
  border-radius: 50%;
}

.intelligence-nei {
  width: 300rpx;
  height: 300rpx;
  margin: 60rpx auto;
  background: rgba(255, 218, 69, 0.1);
  border: 1px solid #DFFFFA;
  opacity: 0.55;
  border-radius: 50%;
}

.intelligence-first {
  position: absolute;
  width: 427rpx;
  height: 1px;
  background-color: #DFFFFA;
  top: 50%;
}

.intelligence-second {
  width: 427rpx;
  height: 1px;
  background-color: #DFFFFA;
  position: absolute;
  top: 50%;
  transform: rotateZ(90deg);
}

.intelligence-third {
  position: absolute;
  width: 427rpx;
  height: 1px;
  background-color: #DFFFFA;
  transform: rotateZ(45deg);
  top: 209rpx;
}

.intelligence-Four {
  position: absolute;
  width: 427rpx;
  height: 1px;
  background-color: #DFFFFA;
  transform: rotateZ(135deg);
  top: 209rpx;
}

.intelligence-Five {
  position: absolute;
  width: calc(432rpx / 2);
  height: calc(425rpx / 2);
  background: linear-gradient(45deg, rgba(255, 255, 255, -388.5) -15%, #d2a2a0 100%);
  border-radius: 100% 0 0 0;
  top: calc(-2rpx/ 2);
  left: calc(0rpx / 2);
  /* 执行动画：动画名称 时长 线性的 无限次播放 */
  animation: scanning 5s linear infinite;
  /* 设置旋转元素的基点位置 */
  transform-origin: 100% 100%;
}
.intelligence-do{
  width: 13rpx;
  height: 13rpx;
  background: #FFFFFF;
  opacity: 0.64;
  border-radius: 50%;
  position: absolute;
}
.intelligence-doA{
  width: 8rpx;
  height: 8rpx;
  background: #FFFFFF;
  opacity: 0.64;
  border-radius: 50%;
  position: absolute;
}
.one{
  top: 36rpx;
  left: 13rpx;
}
.two{
  top: 80rpx;
  right: 0rpx;
}
.three{
  bottom: 50rpx;
  left: 5rpx;
}
.four{
  right: 20rpx;
  bottom: 0rpx;
}
.five{
  top: 120rpx;
  left: 50rpx;
}
.six{
  top: 30rpx;
  right: 50rpx;
}
.seven{
  bottom: 100rpx;
  right: 0rpx;
}


  
/* 定义动画 */
@keyframes scanning {
  to {
    transform: rotate(360deg);
  }
}

## 效果展示：