2023-12-11学习日记（大屏3）

最新推荐文章于 2025-06-05 00:56:58 发布

SWUT胖虎

最新推荐文章于 2025-06-05 00:56:58 发布

阅读量93

点赞数

文章标签：学习前端 javascript css html5

本文链接：https://blog.youkuaiyun.com/YingHuaBuRuTa/article/details/134932670

版权

这篇文章详细描述了一个网页中的数据展示，包括客户订单数据、单量和金额统计、等级概况、平均单量和金额以及品类销售额。使用了ECharts库创建了饼图进行品类分布展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./大屏3.css" />
  </head>
  <body>
    <script src="../vue.js/echarts.min.js"></script>
    <div id="box">
      <div class="topbox"></div>
      <div id="left">
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>客户名称</th>
              <th>业务员</th>
              <th>下单次数</th>
              <th>下单金额</th>
              <th>加单数量</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>现礼鲜花</td>
              <td>张久州</td>
              <td>28</td>
              <td>581155</td>
              <td>454882</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="mid1">
        <div id="small-box">平均每单数量</div>
        <div id="numbers">
          ￥638510 <br />
          <span class="span1">
            <span class="span2">环比:</span>50%&nbsp;&nbsp;&nbsp;&nbsp;<span
              class="span2"
              >同比:</span
            >50%
          </span>
        </div>
        <!-- <div id="comparison">环比:50%&nbsp;&nbsp;&nbsp;&nbsp;同比:50%</div> -->
      </div>
      <div id="mid2">
        <div id="small-box">平均每单金额</div>
        <div id="numbers">
          ￥638510 <br />
          <span class="span1">
            <span class="span2">环比:</span>50%&nbsp;&nbsp;&nbsp;&nbsp;<span
              class="span2"
              >同比:</span
            >50%
          </span>
        </div>
      </div>
      <div id="mid3">
        <div class="small-box">等级概况</div>
        <table>
          <thead>
            <tr>
              <th>等级</th>
              <th>数量</th>
              <th>数量占比</th>
              <th>金额</th>
              <th>金额占比</th>
              <th>均价</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>A</td>
              <td>125121</td>
              <td>10%</td>
              <td>251150</td>
              <td>15%</td>
              <td>1.05</td>
            </tr>
            <tr>
              <td>B</td>
              <td>125121</td>
              <td>10%</td>
              <td>251150</td>
              <td>15%</td>
              <td>1.05</td>
            </tr>
            <tr>
              <td>C</td>
              <td>125121</td>
              <td>10%</td>
              <td>251150</td>
              <td>15%</td>
              <td>1.05</td>
            </tr>
            <tr>
              <td>D</td>
              <td>125121</td>
              <td>10%</td>
              <td>251150</td>
              <td>15%</td>
              <td>1.05</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="rightTop">
        <div id="small-box">平均每单数量</div>
        <div id="numbers">
          3天 <br />
          <span class="span1">
            <span class="span2">环比:</span>50%&nbsp;&nbsp;&nbsp;&nbsp;<span
              class="span2"
              >同比:</span
            >50%
          </span>
        </div>
      </div>
      <div id="rightButtom">
        <div class="small-box11">品类概况</div>
        <div id="chartBox"></div>
        <table id="salesTable">
          <tr>
            <th></th>
            <th>销售额</th>
            <th>数量</th>
            <th>占比</th>
          </tr>
          <tr>
            <td><div class="colorSquare"></div>玫瑰花</td>
            <td>15245</td>
            <td>15245</td>
            <td>25%</td>
          </tr>
          <tr>
            <td><div class="colorSquare"></div>郁金香</td>
            <td>15245</td>
            <td>15245</td>
            <td>25%</td>
          </tr>
          <tr>
            <td><div class="colorSquare"></div>百合</td>
            <td>15245</td>
            <td>15245</td>
            <td>25%</td>
          </tr>
          <tr>
            <td><div class="colorSquare"></div>康乃馨</td>
            <td>15245</td>
            <td>15245</td>
            <td>25%</td>
          </tr>
        </table>
      </div>
    </div>

    <script>

      var Chart = echarts.init(
        document.getElementById("chartBox")
      );
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "Radius Mode",
            type: "pie",
            radius: ["30%", "100%"],
            center: ["40%", "50%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: true,
              position: "inside",
              formatter: "{b}",
              color: "white", // 设置标签颜色为白色
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              { value: 40, name: "玫瑰花" },
              { value: 33, name: "康乃馨" },
              { value: 28, name: "百合" },
              { value: 22, name: "郁金香" },
            ],
          },
        ],
      };

      Chart.setOption(option);
    </script>
  </body>
</html>

#box {
    width: 1500px;
    height: 700px;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    background: radial-gradient(#0a63cf, #122e43);
}

.topbox {
    width: 100%;
    height: 10%;
    background-image: url(../image/表头.png);
    background-size: cover;
}

#left {
    width: 30%;
    height: 80%;
    border: 1px solid blue;
    display: flex;
    background-color: #0d285f;
    border-radius: 5%;
}

#left th,
td {

    padding: 8px;
    text-align: center;
    color: #fff;
    /* 设置文字颜色为白色 */
    font-weight: bold;
    /* 加粗文字 */
    border-bottom: 1px solid #295ca7;
    /* 下边框颜色为#295ca7 */
}

#left table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    height: 15%;
    /* 表格高度为盒子高度的15% */
}

#mid1 {
    width: 25%;
    height: 15%;
    border: 1px solid blue;
    display: flex;
    background-color: #0d285f;
    border-radius: 5%;
    margin-left: 2%;

}

#mid2 {
    width: 25%;
    height: 15%;
    border: 1px solid blue;
    display: flex;
    background-color: #0d285f;
    border-radius: 5%;
    margin-left: 2%;
    position: relative;
    top: 20%;
    right: 27%;
}

#mid3 {
    width: 25%;
    height: 40%;
    border: 1px solid blue;
    display: flex;
    flex-wrap: wrap;
    background-color: #0d285f;
    border-radius: 5%;
    margin-left: 2%;
    position: relative;
    top: -40%;
    right: -30%;

}

#small-box {
    /* position: relative;
    top: 1%;
    left: 2%; */
    width: 100%;
    height: 10%;
    background-color: #223e6e;
    border: 1px solid #0a63cf;
    padding: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15%;
}

#numbers {
    height: 90%;
    width: 200%;
    font-weight: bold;
    position: relative;
    top: 35%;
    left: -20%;
    text-align: center;
    font-size: 200%;
    color: #04ffff;
}
.span1{
    font-size: 50%;
    position: relative;
    bottom: 15%;
}
.span2{
    color: white;
}
#mid3 .small-box {
    /* position: relative;
    top: 1%;
    left: 2%; */
    /* width: 100%; */
    height: 10%;
    background-color: #223e6e;
    border: 1px solid #0a63cf;
    padding: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15%;
}

#mid3 th,
td {

    /* padding: 8px; */
    text-align: center;
    color: #fff;
    /* 设置文字颜色为白色 */
    font-weight: bold;
    /* 加粗文字 */
    border-bottom: 1px solid #295ca7;
    /* 下边框颜色为#295ca7 */
}

#mid3 table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    /* height: 90%; */
    /* 表格高度为盒子高度的15% */
}
#rightTop{
    width: 35%;
    height: 15%;
    border: 1px solid blue;
    display: flex;
    background-color: #0d285f;
    border-radius: 5%;
    margin-left: 2%;
    position: relative;
    top: -80%;
    right: -33%;
}
#rightButtom{
    width: 35%;
    height: 60%;
    border: 1px solid blue;
    display: flex;
    flex-wrap: wrap;
    background-color: #0d285f;
    border-radius: 5%;
    margin-left: 2%;
    position: relative;
    top: -100%;
    right: -60%;
}
.small-box11 {
    width: 20%;
    height: 5%;
    background-color: #223e6e;
    border: 1px solid #0a63cf;
    padding: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15%;
}
#chartBox{
    width: 100%;
    height: 40%;
    border-radius: 10%;
    background-color: #0d285f;
    margin-top: 1%;
    
}

#salesTable {
    width: 100%;
    border-collapse: collapse;
}

#salesTable th,
#salesTable td {
    border: none;
    /* 去掉边框 */
    padding: 8px;
    text-align: center;
    color: #02d3ee;
    /* 字体颜色为 #02d3ee */
}

#salesTable th {
    color: white;
    /* 字体颜色为白色 */
    font-weight: bold;
    background-color: transparent;
    /* 去掉背景颜色 */
}

#salesTable td:first-child {
    color: white;
    /* 字体颜色为白色 */
}

.colorSquare {
    display: inline-block;
    width: 10px;
    /* 调整正方形的大小 */
    height: 10px;
    background-color: #02d3ee;
    margin-right: 5px;
    /* 调整正方形与文字的间距 */
    vertical-align: middle;
    /* 设置垂直对齐方式为中间 */
}