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

大屏效果展示

管理员进入数据可视化页面将看到数据可视化大屏。大屏内容包括两个条形图，用于统计当前网站所有用户的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;
    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;
        padding: 1rem;
        text-align: center;
    }

    .tech-display {
        display: inline-block;
        font-size: 2em;
        font-weight: bold;
        color: #007bff;
        text-shadow: 0 0 2px #007bff, 0 0 40px #007bff, 0 0 60px #007bff, 0 0 0px #007bff;
        background: linear-gradient(45deg, #007bff, #0033cc);
        -webkit-background-clip: text;
        letter-spacing: 10px;
        transition: all 0.5s ease-in-out;
    }

    .tech-display:hover {
        transform: scale(1.1);
        text-shadow: 0 0 20px #007bff, 0 0 40px #007bff, 0 0 60px #007bff, 0 0 80px #007bff;
    }

数据库数据调用 

<?
    require "conn.php";
    // 获取用户mbti性格数量

    $sql1 = "select * from user where mbti='INTJ'";$result1 = mysqli_query($conn,$sql1);$INTJ = mysqli_num_rows($result1);
    $sql2 = "select * from user where mbti='INTP'";$result2 = mysqli_query($conn,$sql2);$INTP = mysqli_num_rows($result2);
    $sql3 = "select * from user where mbti='ENTJ'";$result3 = mysqli_query($conn,$sql3);$ENTJ = mysqli_num_rows($result3);
    $sql4 = "select * from user where mbti='ENTP'";$result4 = mysqli_query($conn,$sql4);$ENTP = mysqli_num_rows($result4);
    $sql5 = "select * from user where mbti='INFJ'";$result5 = mysqli_query($conn,$sql5);$INFJ = mysqli_num_rows($result5);
    $sql6 = "select * from user where mbti='INFP'";$result6 = mysqli_query($conn,$sql6);$INFP = mysqli_num_rows($result6);
    $sql7 = "select * from user where mbti='ENFJ'";$result7 = mysqli_query($conn,$sql7);$ENFJ = mysqli_num_rows($result7);
    $sql8 = "select * from user where mbti='ENFP'";$result8 = mysqli_query($conn,$sql8);$ENFP = mysqli_num_rows($result8);
    $sql9 = "select * from user where mbti='ISTJ'";$result9 = mysqli_query($conn,$sql9);$ISTJ = mysqli_num_rows($result9);
    $sql10 = "select * from user where mbti='ISFJ'";$result10 = mysqli_query($conn,$sql10);$ISFJ = mysqli_num_rows($result10);
    $sql11 = "select * from user where mbti='ESTJ'";$result11 = mysqli_query($conn,$sql11);$ESTJ = mysqli_num_rows($result11);
    $sql12 = "select * from user where mbti='ESFJ'";$result12 = mysqli_query($conn,$sql12);$ESFJ = mysqli_num_rows($result12);
    $sql13 = "select * from user where mbti='ISTP'";$result13 = mysqli_query($conn,$sql13);$ISTP = mysqli_num_rows($result13);
    $sql14 = "select * from user where mbti='ISFP'";$result14 = mysqli_query($conn,$sql14);$ISFP = mysqli_num_rows($result14);
    $sql15 = "select * from user where mbti='ESTP'";$result15 = mysqli_query($conn,$sql15);$ESTP = mysqli_num_rows($result15);
    $sql16 = "select * from user where mbti='ESFP'";$result16 = mysqli_query($conn,$sql16);$ESFP = mysqli_num_rows($result16);

    $array = [$INTJ, $INTP,$ENTJ,$ENTP, $INFJ, $INFP, $ENFJ,$ENFP,$ISTJ, $ISFJ, $ESTJ, $ESFJ, $ISTP, $ISFP, $ESTP, $ESFP];
    $minValue = min($array);
    
    

    if($INTJ==$minValue){$minMBTI = "INTJ";}if($INTP==$minValue){$minMBTI = "INTP";}if($ENTJ==$minValue){$minMBTI = "ENTJ";}if($ENTP==$minValue){$minMBTI = "ENTP";}
    if($INFJ==$minValue){$minMBTI = "INFJ";}if($INFP==$minValue){$minMBTI = "INFP";}if($ENFJ==$minValue){$minMBTI = "ENFJ";}if($ENFP==$minValue){$minMBTI = "ENFP";}
    if($ISTJ==$minValue){$minMBTI = "ISTJ";}if($ISFJ==$minValue){$minMBTI = "ISFJ";}if($ESTJ==$minValue){$minMBTI = "ESTJ";}if($ESFJ==$minValue){$minMBTI = "ESFJ";}
    if($ISTP==$minValue){$minMBTI = "ISTP";}if($ISFP==$minValue){$minMBTI = "ISFP";}if($ESTP==$minValue){$minMBTI = "ESTP";}if($ESFP==$minValue){$minMBTI = "ESFP";}

    
    

    $sql = "select mbti,sex from user";
    $result = mysqli_query($conn,$sql); $usernum = mysqli_num_rows($result);
    $all = "";
    $allsex = "";
    while($row = mysqli_fetch_array($result)){
        list($mbti,$sex) = $row;        
        

        $all=$all."$mbti";
        $allsex=$allsex."$sex";
    }

    $E = substr_count($all,"E");
    $I = substr_count($all,"I");
    $S = substr_count($all,"S");
    $N = substr_count($all,"N");
    $T = substr_count($all,"T");
    $F = substr_count($all,"F");
    $J = substr_count($all,"J");
    $P = substr_count($all,"P");

    $male = substr_count($allsex,"1");
    $female = substr_count($allsex,"0");
    //获取周一至周日用户聊天记录数

    $sqlchat = "select sendtime from comment";
    $resultchat = mysqli_query($conn,$sqlchat);

    $MON = 0;
    $TUE = 0;
    $WED = 0;
    $THU = 0;
    $FRI = 0;
    $SAT = 0;
    $SUN = 0;
    while($rowchat = mysqli_fetch_array($resultchat)){
        list($week) = $rowchat;
        $date = date_create_from_format('U', $week);
        $dayOfWeekEn = date_format($date, 'l');
        if($dayOfWeekEn=="Monday"){
            $MON=$MON+1;
        }
        if($dayOfWeekEn=="Tuesday"){
            $TUE=$TUE+1;
        }
        if($dayOfWeekEn=="Wednesday"){
            $WED=$WED+1;
        }
        if($dayOfWeekEn=="Thursday"){
            $THU=$THU+1;
        }
        if($dayOfWeekEn=="Friday"){
            $FRI=$FRI+1;
        }
        if($dayOfWeekEn=="Saturday"){
            $SAT=$SAT+1;
        }
        if($dayOfWeekEn=="Sunday"){
            $SUN=$SUN+1;
        }
    }
  
    $array1 = [$MON,$TUE,$WED,$THU,$FRI,$SAT,$SUN];
    $maxValue = max($array1);

    if($MON==$maxValue){$maxDAY = "周一";}if($TUE==$maxValue){$maxDAY = "周二";}if($WED==$maxValue){$maxDAY = "周三";}if($THU==$maxValue){$maxDAY = "周四";}
    if($FRI==$maxValue){$maxDAY = "周五";}if($SAT==$maxValue){$maxDAY = "周六";}if($SUN==$maxValue){$maxDAY = "周日";}
?>

可视化大屏图表

<?echo "<script>


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart'));
    var myChart1 = echarts.init(document.getElementById('chart1'));
    var myChart2 = echarts.init(document.getElementById('chart2'));
     var myChart3 = echarts.init(document.getElementById('chart3'));
       var myChart4 = echarts.init(document.getElementById('chart4'));
       
    // 指定图表的配置项和数据
    //柱状图
    var option = {
        title : {
                text: '16性格用户占比（分析家、外交家）',
                // 设置标题位置，默认居中
                left: 'center',
                // 设置标题样式
                textStyle: {
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
            },
        xAxis: {
            type: 'category',
            data: [ 'INTJ', 'INTP', 'ENTJ', 'ENTP', 'INFJ', 'INFP', 'ENFJ', 'ENFP']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [$INTJ, $INTP,$ENTJ,$ENTP, $INFJ, $INFP, $ENFJ,$ENFP],
            type: 'bar'
            }
        ]
};




  var  option1 = {

     title : {
                text: 'MBTI性格分布（八个性格字母）',
                // 设置标题位置，默认居中
                left: 'center',
                // 设置标题样式
                textStyle: {
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
            },

  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 200],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: $E, name: 'E外向型' },
        { value: $I, name: 'I内向型' },
        { value: $S, name: 'S观察型' },
        { value: $N, name: 'N直觉型' },
        { value: $T, name: 'T理性型' },
        { value: $F, name: 'F感受型' },
        { value: $J, name: 'J判断型' },
        { value: $P, name: 'P展望型' },
      ]
    }
  ]
};


var option2 = {
 title : {
                text: '用户活跃度（论坛发言次数）',
                // 设置标题位置，默认居中
                left: 'center',
                // 设置标题样式
                textStyle: {
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
            },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [$MON,$TUE,$WED,$THU,$FRI,$SAT,$SUN],
      type: 'line',
      smooth: true
    }
  ]
};


var option3 = {
title : {
                text: '用户性别占比',
                // 设置标题位置，默认居中
                left: 'center',
                // 设置标题样式
                textStyle: {
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
            },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'sex',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: $male, name: '男性用户' },
        { value: $female, name: '女性用户' },
      ]
    }
  ]
};


let dataAxis = ['ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP'];
// prettier-ignore
let data = [$ISTJ, $ISFJ, $ESTJ, $ESFJ, $ISTP, $ISFP, $ESTP, $ESFP];
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}
var option4 = {
  title: {
    text: '16性格用户占比（守护者、探险家）',
                // 设置标题位置，默认居中
                left: 'center',
                // 设置标题样式
                textStyle: {
                    color: '#333',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
  },
  xAxis: {
    data: dataAxis,
    axisLabel: {
      inside: true,
      color: '#000',
      fontSize: 14,
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#999'
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
    {
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      data: data
    }
  ]
};
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.on('click', function (params) {
  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
  myChart.dispatchAction({
    type: 'dataZoom',
    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    endValue:
      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  });
});

    
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart1.setOption(option1);
     myChart2.setOption(option2);
     myChart3.setOption(option3);
      myChart4.setOption(option4);
   
</script>"?>