基于echarts、php、Mysql开发的数据可视化大屏

最新推荐文章于 2025-06-12 14:08:40 发布

原创

最新推荐文章于 2025-06-12 14:08:40 发布 · 727 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #信息可视化 #前端 #后端

大屏效果展示

管理员进入数据可视化页面将看到数据可视化大屏。大屏内容包括两个条形图，用于统计当前网站所有用户的MBTI 16型人格分布；玫瑰图，用于展示当前网站用户MBTI四个维度，八个字母的占比；折线图，用于展示当前网站在交友论坛中周一至周如的发言数量；饼图用于展示当前网站用户的男女比例；中间的文字显示屏用于直观展示用户人数、男女比例、最稀有人格、用户活跃时间的信息。数据可视化大屏如下。

设计大屏之前完成echarts引入

 <script src="echarts.js/echarts.min.js"></script>

大屏框架

<div class="whole">
<header>
    <h1>数据可视化大屏</h1>
</header>
<div class="screen">
    <div class="left_chart">
        <div class="left_top" id="chart" >
            
        </div>
        <div class="left_bottom" id="chart4"></div>
        

    </div>

    <div class="middle_chart">

        <div class="middle_top" >
            <h3 class="tech-display">用<br>户<br>人<br>数<br><?echo $usernum?></h3>
            <h3 class="tech-display">男<br>女<br>比<br>例<br><?echo $male?>:<?echo $female?></h3>
            <h3 class="tech-display">稀<br>有<br>人<br>格<br><?echo $minMBTI?></h3>
            <h3 class="tech-display">活<br>跃<br>时<br>间<br><?echo $maxDAY?></h3>
        </div>
        <div class="middle_bottom" id="chart1"></div>
        
    </div>

    <div class="right_chart">

        <div class="right_top" id="chart2" ></div>
        <div class="right_bottom" id="chart3"></div>
        

    </div>
</div>

</div>

大屏css样式

.whole{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.screen{
   
    display: flex;
    justify-content: center;
    margin-top: 5px;
  
    
}

.left_chart{

}
.left_top{
    border: solid;
    width: 520px;
    height: 390px;
    background: #fff;
    
}
.left_bottom{
    border: solid;
    width: 520px;
    height: 400px;
    margin-top: 10px;
    background: #fff;
}


.middle_chart{
    margin-left: 20px;
}
.middle_top{
    border: solid;
    width: 520px;
    height: 190px;
    background: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-family: 'Arial', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 5px;
        padding-right: 5px;
}
.middle_top h3{
    margin-left: 10px;
    width: 100px;
    text-align: center;
}
.middle_bottom{
    border: solid;
    width: 520px;
    height: 600px;
    margin-top: 10px;
    background: #fff;
}


.right_chart{
    margin-left: 20px;
}
.right_top{
    border: solid;
    width: 520px;
    height: 390px;
    b