大屏效果展示
管理员进入数据可视化页面将看到数据可视化大屏。大屏内容包括两个条形图，用于统计当前网站所有用户的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>"?>