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

项目概述

本示例展示了一个基于 Web 技术的碳排放可视化大屏方案。通过整合 ECharts 图表库与 Three.js 3D 引擎，实现了多场景（教室、实验室、宿舍）的用电用水统计切换、实时时间显示以及 3D 地球模型展示。技术栈涵盖 HTML5、CSS3 响应式布局及原生 JavaScript，重点解决了动态图表渲染与自适应屏幕适配问题。

布局与样式设计

页面采用 Flexbox 弹性布局构建三栏结构，中间区域突出核心数据，两侧分布详细图表。为了适应不同分辨率的大屏设备，使用了 rem 单位配合 flexible.js 进行视口缩放处理。背景图与头部导航栏通过 CSS 定位固定，确保视觉一致性。

在样式细节上，使用了半透明色块与边框装饰增强科技感，字体方面引入了电子数字字体以匹配数据展示的工业风格。针对移动端和桌面端分别设置了媒体查询，保证在不同设备上都能保持良好的阅读体验。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 100px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
body {
  background: url(/static/images/bei.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.box {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  width: 100%;
  height: calc(100% - 1.11rem);
  margin: 0 auto;
}

核心图表交互逻辑

左侧与右侧的柱状图模块采用了 Tab 切换机制。当用户点击'教室'、'实验室'或'宿舍'按钮时，JavaScript 会动态更新 ECharts 的配置项（Option），包括标题、坐标轴标签及数据源。这种设计避免了页面频繁刷新，提升了交互流畅度。

值得注意的是，图表初始化时需监听 resize 事件，确保窗口大小改变时图表能自动重绘。对于折线图部分，我们使用了渐变填充效果来增强视觉层次，并通过 formatter 函数自定义了 Tooltip 的显示格式。

(() {
   chartData = {
    : {
      : ,
      : {
        : [, , , , , , ],
        : [
          { : , : [, , , , , , ] },
          { : , : [, , , , , , ] }
        ]
      },
      : [, ]
    }
  };

  .(, () {
     barChartDom = .();
     (barChartDom) {
       barChart = echarts.(barChartDom);
      
    }
  });
})();