基于 ECharts 与 Three.js 的碳排放可视化大屏实现

2. 样式适配与布局 (view.css)

样式部分采用了 Rem 单位配合 flexible.js 进行自适应。背景图设置为固定定位，避免滚动时闪烁。图表容器使用了半透明边框和四角装饰，增强科技感。特别需要注意的是媒体查询部分，针对不同屏幕宽度调整了字体大小，保证移动端也能查看。

* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
@font-face { font-family: electronicFont; src: url(/static/font/ziti.TTF); }
html { font-size: 100px; overflow: hidden; width: 100%; height: 100%; }
body {
    font-family: Arial, Helvetica, sans-serif;
    background: url(/static/images/bei.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    line-height: 1.15;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
header {
    position: relative;
    height: 1.11rem;
    background: url(/static/images/head.png) no-repeat top center;
    background-size: 100% 100%;
    width: 100%;
}
header .container h1 {
    font-size: 0.51rem;
    color: #fff;
    text-align: center;
    line-height: 1.07rem;
    -webkit-text-stroke: 2px #00f7ff;
    text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
}
.box { display: flex; min-width: 1024px; max-width: 1920px; width: 100%; height: calc(100% - 1.11rem); margin: 0 auto; padding: 0.13rem; overflow: hidden; }
.box .column { flex: 3; height: 100%; display: flex; flex-direction: column; }
.box .column:nth-child(2) { flex: 5; margin: 0 0.13rem; }
/* ... 更多样式省略 ... */
@media screen and (max-width: 1024px) { html { font-size: 42px !important; } }
@media screen and (min-width: 1920px) { html { font-size: 80px !important; } }

3. 图表交互逻辑 (view.js)

JS 文件是核心所在，我们将不同图表封装在 IIFE 中以避免污染全局变量。每个图表模块都配置了独立的数据源，并通过 Tab 按钮触发 updateChart 函数来切换数据。

以柱状图为例，我们定义了 chartData 对象存储不同场景（教室、实验室、宿舍）的用电量数据。当用户点击 Tab 时，移除旧激活状态，更新当前类型并重新渲染 ECharts 实例。同时监听了 window.resize 事件，确保窗口缩放时图表自动适应。

// 柱状图模块
(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(); });
        }
    });
})();

4. 3D 地球动画 (initGlobe)

中间区域的地球使用了 Three.js 构建。我们通过加载纹理贴图（法线贴图、高光贴图）来增加真实感。光照系统包含环境光和方向光，模拟自然光照效果。动画循环中不断旋转地球 Mesh，营造动态视觉体验。

// 初始化 3D 地球
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();
}

5. 辅助工具

项目中还包含了 jiazai.js 用于处理资源加载缓存问题，以及 flexible.js 用于计算 Rem 基准值，确保在不同设备上的布局一致性。这些工具函数虽然不起眼，但对大屏项目的稳定性至关重要。