当前位置：首页 > news >正文

自己写的html放入wordpress杭州seo技术培训

news 2025/8/9 13:04:22

自己写的html放入wordpress,杭州seo技术培训,wordpress更改链接地址,查询成绩的网站怎么做大屏效果展示管理员进入数据可视化页面将看到数据可视化大屏。大屏内容包括两个条形图，用于统计当前网站所有用户的MBTI 16型人格分布；玫瑰图，用于展示当前网站用户MBTI四个维度，八个字母的占比；折线图，用…

大屏效果展示

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