(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: {
title: '实验室每日用电量统计',
data: {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
series: [
{ name: '早', data: [13.85, 17.78, 20.12, 16.77, 14.69, 3.46, 5.72] },
{ name: '晚', data: [9.05, 11.72, 14.37, 11.42, 11.62, 3.17, 5.63] }
]
},
colors: ['#EE6666', '#FAC858']
},
dormitory: {
title: '宿舍每日用电量统计',
data: {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
series: [
{ name: '早', data: [4.23, 3.98, 4.56, 4.01, 4.34, 2.78, 2.45] },
{ name: '晚', data: [5.31, 5.45, 5.12, 5.78, 6.89, 7.01, 5.67] }
]
},
colors: ['#73C0DE', '#3BA272']
}
};
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: {
title: '实验室每日用水量统计',
data: {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
series: [
{ name: '早', data: [63.8, 60.6, 66.8, 45.2, 53.1, 23.2, 21.5] },
{ name: '晚', data: [25.7, 27.6, 23.4, 35.7, 35.8, 16.5, 21.1] }
]
},
colors: ['#EE6666', '#FAC858']
},
dormitory: {
title: '宿舍每日用水量统计',
data: {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
series: [
{ name: '早', data: [25.8, 28.1, 34.2, 45.9, 34.1, 15.9, 21.8] },
{ name: '晚', data: [34.4, 26.7, 33.3, 29.1, 15, 6.6, 7.1] }
]
},
colors: ['#73C0DE', '#3BA272']
}
};
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) {
chartDom.classList.add('chart-container');
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();
}
