wordpress是建站最快的,WordPress之类的,天河区门户网站教育专栏,低价建网站大屏效果展示
管理员进入数据可视化页面将看到数据可视化大屏。大屏内容包括两个条形图#xff0c;用于统计当前网站所有用户的MBTI 16型人格分布#xff1b;玫瑰图#xff0c;用于展示当前网站用户MBTI四个维度#xff0c;八个字母的占比#xff1b;折线图#xff0c;用…大屏效果展示
管理员进入数据可视化页面将看到数据可视化大屏。大屏内容包括两个条形图用于统计当前网站所有用户的MBTI 16型人格分布玫瑰图用于展示当前网站用户MBTI四个维度八个字母的占比折线图用于展示当前网站在交友论坛中周一至周如的发言数量饼图用于展示当前网站用户的男女比例中间的文字显示屏用于直观展示用户人数、男女比例、最稀有人格、用户活跃时间的信息。数据可视化大屏如下。 设计大屏之前完成echarts引入 script srcecharts.js/echarts.min.js/script 大屏框架
div classwhole
headerh1数据可视化大屏/h1
/header
div classscreendiv classleft_chartdiv classleft_top idchart /divdiv classleft_bottom idchart4/div/divdiv classmiddle_chartdiv classmiddle_top h3 classtech-display用br户br人br数br?echo $usernum?/h3h3 classtech-display男br女br比br例br?echo $male?:?echo $female?/h3h3 classtech-display稀br有br人br格br?echo $minMBTI?/h3h3 classtech-display活br跃br时br间br?echo $maxDAY?/h3/divdiv classmiddle_bottom idchart1/div/divdiv classright_chartdiv classright_top idchart2 /divdiv classright_bottom idchart3/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 mbtiINTJ;$result1 mysqli_query($conn,$sql1);$INTJ mysqli_num_rows($result1);$sql2 select * from user where mbtiINTP;$result2 mysqli_query($conn,$sql2);$INTP mysqli_num_rows($result2);$sql3 select * from user where mbtiENTJ;$result3 mysqli_query($conn,$sql3);$ENTJ mysqli_num_rows($result3);$sql4 select * from user where mbtiENTP;$result4 mysqli_query($conn,$sql4);$ENTP mysqli_num_rows($result4);$sql5 select * from user where mbtiINFJ;$result5 mysqli_query($conn,$sql5);$INFJ mysqli_num_rows($result5);$sql6 select * from user where mbtiINFP;$result6 mysqli_query($conn,$sql6);$INFP mysqli_num_rows($result6);$sql7 select * from user where mbtiENFJ;$result7 mysqli_query($conn,$sql7);$ENFJ mysqli_num_rows($result7);$sql8 select * from user where mbtiENFP;$result8 mysqli_query($conn,$sql8);$ENFP mysqli_num_rows($result8);$sql9 select * from user where mbtiISTJ;$result9 mysqli_query($conn,$sql9);$ISTJ mysqli_num_rows($result9);$sql10 select * from user where mbtiISFJ;$result10 mysqli_query($conn,$sql10);$ISFJ mysqli_num_rows($result10);$sql11 select * from user where mbtiESTJ;$result11 mysqli_query($conn,$sql11);$ESTJ mysqli_num_rows($result11);$sql12 select * from user where mbtiESFJ;$result12 mysqli_query($conn,$sql12);$ESFJ mysqli_num_rows($result12);$sql13 select * from user where mbtiISTP;$result13 mysqli_query($conn,$sql13);$ISTP mysqli_num_rows($result13);$sql14 select * from user where mbtiISFP;$result14 mysqli_query($conn,$sql14);$ISFP mysqli_num_rows($result14);$sql15 select * from user where mbtiESTP;$result15 mysqli_query($conn,$sql15);$ESTP mysqli_num_rows($result15);$sql16 select * from user where mbtiESFP;$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($dayOfWeekEnMonday){$MON$MON1;}if($dayOfWeekEnTuesday){$TUE$TUE1;}if($dayOfWeekEnWednesday){$WED$WED1;}if($dayOfWeekEnThursday){$THU$THU1;}if($dayOfWeekEnFriday){$FRI$FRI1;}if($dayOfWeekEnSaturday){$SAT$SAT1;}if($dayOfWeekEnSunday){$SUN$SUN1;}}$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?
