只使用wxml和wxss，利用圆的构图显示八卦图

在微信小程序中，如果你想只使用WXML (Wechat Markup Language) 和 WXSS (Wechat CSS) 来展示八卦图，你可以通过基本的圆形元素和一些布局技巧来实现。八卦图通常由八个象征不同方向和属性的卦象组成，每个卦象可以看作是一个旋转和位置变换的圆形。

下面是一个简单的步骤描述：

1. **创建基础元素**:
- 使用`view`或者`circle`标签作为基本单元，代表八卦图中的每一个卦象。

2. **样式设计**:
- 在WXSS中，设置`circle`的宽度和高度相等，半径设为其一半，作为圆形的基本形状。
- 使用`transform: rotate()`来改变每个圆的位置和旋转角度，模拟八卦的八种变化。

3. **布局结构**:
- 利用CSS的绝对定位 (`position: absolute;`) 或者Flexbox/Grid布局，将八个圆按照八卦的顺序排列。

4. **旋转和中心点设置**:
- 对于每个圆，设置其旋转的角度，并调整其left、top属性，使其相对中心点的位置对应八卦的不同方位。

5. **颜色和图标**:
- 如果需要，给每个圆添加相应的颜色和图标，以增强视觉效果。

例如，你可以这样做：

<!-- wxml -->
<view class="gau-palace">
  <circle class="palace-1" wx:if="{{isPalace1}}" />
  <!-- ...重复类似代码 for 八卦的其他六个卦象 -->
</view>

<!-- .gau-palace 和 .palace-1 都在 WXSS 中定义 -->

/* 示例 WXSS */
.circle {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: absolute;
}

.palace-1 {
  transform: rotate(45deg);
  /* 更改left/top和颜色等 */
}