(function(){
const chartData = {
classroom:{
title:'教室每日用电量统计',
data:{
categories:['周一','周二','周三','周四','周五','周六','周日'],
series:[
{name:'早',data:[6.28,9.55,8.69,8.63,6.64,4.17,2.69]},
{name:'晚',data:[5.71,8.65,5.32,5.91,5.77,3.17,1.85]}
]
},
colors:['#5470C6','#91CC75']
},
lab:{...},
dormitory:{...}
};
document.addEventListener('DOMContentLoaded',function(){
var barChartDom = document.querySelector('.bar .char');
var titleElement = document.querySelector('.bar .chart-title h2');
var tabButtons = document.querySelectorAll('.bar .tab-btn');
if(barChartDom && titleElement && tabButtons.length >0){
var barChart = echarts.init(barChartDom);
var currentType = 'classroom';
function updateChart(type){
const data = chartData[type].data;
const colors = chartData[type].colors;
const barOption = {
color: colors,
title:{text: chartData[type].title,left:'center',textStyle:{fontSize:16,color:'#fff'},top:-3},
tooltip:{trigger:'axis',axisPointer:{type:'shadow'}},
legend:{data:['早','晚'],textStyle:{color:'#fff'},top:20},
grid:{top:'20%',left:'3%',right:'4%',bottom:'3%',containLabel:true},
xAxis:{type:'category',data: data.categories,axisLine:{lineStyle:{color:'#fff'}},axisLabel:{color:'#fff',interval:0}},
yAxis:{type:'value',name:'用电量 (千瓦)',nameTextStyle:{color:'#fff',padding:[0,0,0,30]},axisLine:{show:true,lineStyle:{color:'#fff'}},axisLabel:{color:'#fff'},splitLine:{lineStyle:{color:'rgba(255, 255, 255, 0.2)'}}},
series:[
{name:'早',type:'bar',barWidth:'30%',barGap:'50%',data: data.series[0].data,},
{name:'晚',type:'bar',barWidth:'30%',data: data.series[1].data,}
]
};
barChart.setOption(barOption);
}
updateChart(currentType);
tabButtons.forEach(button=>{
button.addEventListener('click',function(){
tabButtons.forEach(btn=> btn.classList.remove('active'));
this.classList.add('active');
currentType = this.dataset.type;
updateChart(currentType);
});
});
window.addEventListener('resize',function(){ barChart.resize();});
}
});
})();
(function(){
const chartData = {
classroom:{
title:'教室每日用水量统计',
data:{
categories:['周一','周二','周三','周四','周五','周六','周日'],
series:[
{name:'早',data:[32.5,28.7,35.6,30.2,33.1,15.3,12.8]},
{name:'晚',data:[28.4,31.2,26.8,29.5,18.7,8.2,6.5]}
]
},
colors:['#5470C6','#91CC75']
},
lab:{...},
dormitory:{...}
};
document.addEventListener('DOMContentLoaded',function(){
if(typeof echarts ==='undefined'){ console.error('ECharts library is not loaded');return;}
var chartDom = document.getElementById('vehicleChart');
var titleElement = document.querySelector('.right-chart-module .chart-title h2');
var tabButtons = document.querySelectorAll('.right-chart-module .tab-btn');
if(chartDom && titleElement && tabButtons.length >0){
try{
var myChart = echarts.init(chartDom);
var currentType = 'classroom';
function updateChart(type){
const data = chartData[type].data;
const colors = chartData[type].colors;
const option = {
color: colors,
title:{text: chartData[type].title,left:'center',textStyle:{fontSize:16,color:'#fff'},top:0},
tooltip:{trigger:'axis',axisPointer:{lineStyle:{color:'#dddc6b'}},formatter:function(params){var result = params[0].axisValue +'<br/>'; params.forEach(function(item){ result += item.marker +' '+ item.seriesName +': '+ item.value +'千升<br/>';});return result;}},
legend:{data:['早','晚'],textStyle:{color:'rgba(255,255,255,.5)',fontSize:12},top:25},
grid:{top:'20%',left:'3%',right:'4%',bottom:'3%',containLabel:true},
xAxis:{type:'category',boundaryGap:false,data: data.categories,axisLine:{lineStyle:{color:'rgba(255,255,255,.2)'}},axisLabel:{textStyle:{color:"rgba(255,255,255,.6)",fontSize:12}}},
yAxis:{type:'value',name:'用水量 (千升)',nameTextStyle:{color:'#fff',padding:[0,0,0,30]},axisTick:{show:false},axisLine:{lineStyle:{color:"rgba(255,255,255,.1)"}},axisLabel:{textStyle:{color:"rgba(255,255,255,.6)",fontSize:12}},splitLine:{lineStyle:{color:"rgba(255,255,255,.1)"}}},
series:[
{name:'早',type:'line',smooth:true,symbol:'circle',symbolSize:8,showSymbol:true,lineStyle:{width:2},areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color: colors[0]+'40'},{offset:0.8,color: colors[0]+'10'}],false),shadowColor:"rgba(0, 0, 0, 0.1)"},itemStyle:{color: colors[0],borderColor:"rgba(221, 220, 107, .1)",borderWidth:12},data: data.series[0].data },
{name:'晚',type:'line',smooth:true,symbol:'circle',symbolSize:8,showSymbol:true,lineStyle:{width:2},areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color: colors[1]+'40'},{offset:0.8,color: colors[1]+'10'}],false),shadowColor:"rgba(0, 0, 0, 0.1)"},itemStyle:{color: colors[1],borderColor:"rgba(221, 220, 107, .1)",borderWidth:12},data: data.series[1].data }
]
};
myChart.setOption(option);
}
updateChart(currentType);
tabButtons.forEach(button=>{
button.addEventListener('click',function(){
tabButtons.forEach(btn=> btn.classList.remove('active'));
this.classList.add('active');
currentType = this.dataset.type;
updateChart(currentType);
});
});
window.addEventListener('resize',function(){ myChart.resize();});
}catch(error){ console.error('Error initializing chart:', error);}
}else{ console.error('Required DOM elements not found');}
});
})();
(function(){
const pieData = {
morning:[{value:30,name:"自行车"},{value:20,name:"步行"},{value:15,name:"出租车"},{value:25,name:"地铁"},{value:10,name:"大巴"}],
evening:[{value:25,name:"自行车"},{value:25,name:"步行"},{value:20,name:"出租车"},{value:20,name:"地铁"},{value:10,name:"大巴"}]
};
const colors = ["#006cff","#60cda0","#ed8884","#ff9f7f","#32c5e9"];
var myChart = echarts.init(document.querySelector(".pie .char"));
var currentTime = 'morning';
function getOption(time){
const titleText = time ==='morning'?'上学交通工具次数统计':'放学交通工具次数统计';
return{
title:{text: titleText,left:'center',top:0,textStyle:{color:'#fff',fontSize:16}},
legend:{top:"90%",itemWidth:10,itemHeight:10,textStyle:{color:"rgba(255,255,255,.5)",fontSize:"12"}},
tooltip:{trigger:"item",formatter:"{a} <br/>{b} : {c} ({d}% )"},
color: colors,
series:[{name:"统计",type:"pie",radius:["10%","70%"],center:["50%","50%"],roseType:"radius",data: pieData[time],label:{fontSize:10},labelLine:{length:10,length2:15,smooth:true},animationType:'scale',animationEasing:'elasticOut',animationDelay:function(idx){return Math.random()*200;}}]
};
}
function updateChart(time){ myChart.setOption(getOption(time)); }
updateChart(currentTime);
const tabButtons = document.querySelectorAll('.pie .tab-btn');
tabButtons.forEach(button=>{
button.addEventListener('click',function(){
tabButtons.forEach(btn=> btn.classList.remove('active'));
this.classList.add('active');
currentTime = this.dataset.time;
updateChart(currentTime);
});
});
window.addEventListener("resize",function(){ myChart.resize();});
})();
(function(){
var myChart = echarts.init(document.getElementById("horizontalBarChart"));
var data = [70,34,60,78,69];
var titlename = ["商学院","人工智能学院","法学院","医学院","计算机学院"];
var valdata = [702,350,610,793,664];
var myColor = ["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6"];
var option = {
grid:{top:"10%",left:"22%",bottom:"10%",height:"90%"},
xAxis:{show:false},
yAxis:[
{show:true,data: titlename,inverse:true,axisLine:{show:false},splitLine:{show:false},axisTick:{show:false},axisLabel:{color:"#fff",rich:{lg:{backgroundColor:"#339911",color:"#fff",borderRadius:15,align:"center",width:15,height:15}}}},
{show:true,inverse:true,data: valdata,axisLabel:{textStyle:{fontSize:12,color:"#fff"}}}
],
series:[
{name:"条",type:"bar",yAxisIndex:0,data: data,barCategoryGap:50,barWidth:10,itemStyle:{normal:{barBorderRadius:20,color:function(params){return myColor[params.dataIndex % myColor.length];}}},label:{normal:{show:true,position:"inside",formatter:"{c}%"}}},
{name:"框",type:"bar",yAxisIndex:1,barCategoryGap:50,data:[100,100,100,100,100],barWidth:15,itemStyle:{normal:{color:"none",borderColor:"#00c1de",borderWidth:3,barBorderRadius:15}}}
]
};
myChart.setOption(option);
window.addEventListener("resize",function(){ myChart.resize();});
})();
function initGlobe(){
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,1,0.1,1000);
const renderer = new THREE.WebGLRenderer({canvas: document.getElementById('globe-canvas'),antialias:true,alpha:true});
renderer.setSize(400,300);
renderer.setClearColor(0x000000,0);
const geometry = new THREE.SphereGeometry(5,64,64);
const material = new THREE.MeshPhongMaterial({color:0x156289,emissive:0x072534,shininess:5,transparent:true,opacity:0.8,wireframe:false});
const textureLoader = new THREE.TextureLoader();
material.map = textureLoader.load('/static/images/img.png');
material.bumpMap = textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg');
material.specularMap = textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);
const ambientLight = new THREE.AmbientLight(0x333333); scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff,1); directionalLight.position.set(5,3,5); scene.add(directionalLight);
camera.position.z = 12;
function animate(){
requestAnimationFrame(animate);
earth.rotation.y += 0.002;
renderer.render(scene, camera);
}
animate();
function resizeGlobe(){
const container = document.querySelector('.globe-container');
const width = container.clientWidth;
const height = container.clientHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
window.addEventListener('resize', resizeGlobe);
resizeGlobe();
}
if(typeof THREE==='undefined'){
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js';
script.onload = initGlobe;
document.head.appendChild(script);
}else{
initGlobe();
}
