如何用CSS或ECharts优雅地实现比赛对阵图？

实现比赛对阵图可以使用CSS或ECharts，具体选择取决于你的需求和对工具的熟悉程度。以下是两种方法的简要说明：

使用CSS实现比赛对阵图

CSS实现比赛对阵图主要依赖于Flexbox或Grid布局来创建结构，并使用伪元素和边框来绘制连接线。

步骤：

1. HTML结构：

   • 使用嵌套的div元素来表示每一轮比赛和对阵。
   • 例如，第一轮有4场比赛，第二轮有2场，第三轮有1场。

   <div class="bracket">
      <div class="round">
          <div class="match">
              <div class="team">Team A</div>
              <div class="team">Team B</div>
          </div>
          <div class="match">
              <div class="team">Team C</div>
              <div class="team">Team D</div>
          </div>
          <!-- 更多比赛 -->
      </div>
      <div class="round">
          <div class="match">
              <div class="team">Winner 1</div>
              <div class="team">Winner 2</div>
          </div>
          <!-- 更多比赛 -->
      </div>
      <!-- 更多轮次 -->
   </div>
   

2. CSS样式：

   • 使用Flexbox或Grid布局来排列每一轮比赛。
   • 使用伪元素（如::before和::after）来绘制连接线。

   .bracket {
      display: flex;
      justify-content: space-around;
   }
   
   .round {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
   }
   
   .match {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      position: relative;
   }
   
   .team {
      padding: 5px;
      border: 1px solid #ccc;
      margin: 2px;
      width: 100px;
      text-align: center;
   }
   
   .match::before, .match::after {
      content: '';
      position: absolute;
      background-color: #000;
   }
   
   .match::before {
      width: 2px;
      height: 50%;
      top: 50%;
      left: -20px;
   }
   
   .match::after {
      width: 20px;
      height: 2px;
      top: 50%;
      left: -20px;
   }
   

使用ECharts实现比赛对阵图

ECharts是一个强大的JavaScript图表库，支持多种图表类型，包括树状图、关系图等，可以用来实现比赛对阵图。

步骤：

1. 引入ECharts：

   • 在HTML中引入ECharts库。

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
   

2. 配置ECharts：

   • 使用ECharts的tree或graph图表类型来绘制对阵图。

   <div id="chart" style="width: 600px;height:400px;"></div>
   <script>
      var chartDom = document.getElementById('chart');
      var myChart = echarts.init(chartDom);
      var option;
   
      option = {
          series: [
              {
                  type: 'tree',
                  data: [
                      {
                          name: 'Final',
                          children: [
                              {
                                  name: 'Semi-Final 1',
                                  children: [
                                      { name: 'Quarter-Final 1' },
                                      { name: 'Quarter-Final 2' }
                                  ]
                              },
                              {
                                  name: 'Semi-Final 2',
                                  children: [
                                      { name: 'Quarter-Final 3' },
                                      { name: 'Quarter-Final 4' }
                                  ]
                              }
                          ]
                      }
                  ],
                  top: '1%',
                  left: '7%',
                  bottom: '1%',
                  right: '20%',
                  symbolSize: 10,
                  label: {
                      position: 'left',
                      verticalAlign: 'middle',
                      align: 'right',
                      fontSize: 9
                  },
                  leaves: {
                      label: {
                          position: 'right',
                          verticalAlign: 'middle',
                          align: 'left'
                      }
                  },
                  expandAndCollapse: true,
                  animationDuration: 550,
                  animationDurationUpdate: 750
              }
          ]
      };
   
      myChart.setOption(option);
   </script>
   

总结

• CSS实现：适合简单的对阵图，自定义程度高，但需要手动处理布局和连接线。
• ECharts实现：适合复杂的对阵图，ECharts提供了丰富的配置选项和交互功能，但需要学习ECharts的API。

根据你的项目需求和技术栈选择合适的实现方式。