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

大屏效果展示

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

设计大屏之前完成echarts引入

 大屏框架

    
数据可视化大屏


    

        

            
        
        

        

    

    


        

            
用
户
人
数

            
男
女
比
例
:
            
稀
有
人
格

            
活
跃
时
间

        
        

        
    

    


        

        

        

    

大屏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;
    background: #fff;
}
.right_bottom{
    border: solid;
    width: 520px;
    height: 400px;
    margin-top: 10px;
    background: #fff;
}

header {
        background: rgba(0, 0, 0, 0.5);
        color: white;
        pad