简介：面向计算机、电子信息工程及数学等专业大学生毕业设计、课程设计或期末大作业的智慧农业大数据可视化大屏页面，聚焦农业生产环境与产量数据监测展示场景。资源基于HTML+CSS+JavaScript技术栈，利用ECharts图表组件呈现可视化效果，已附完整运行结果，功能经测试可正常使用，适合作为农业大数据可视化课题的参考模板。
压缩包共13个文件，包括6个JS脚本、1个CSS样式文件、1个HTML页面入口、4张PNG图片及1个GIF动图，整体仅2.73MB。JS脚本涵盖ECharts、jQuery等核心库，CSS负责大屏布局与视觉风格，HTML组织页面结构，图片素材用于背景与内容展示，目录分类清晰，便于定位与二次开发。
目前已有436人学习查看。代码采用参数化编程，数据与配置集中于变量，修改方便；注释明细、逻辑清晰，便于理解大屏布局思路与ECharts交互写法。配套演示地址可预览最终效果，对课程设计、毕业设计中的可视化类项目具有较强参考价值。
1. 大数据可视化大屏页面：智慧农业指标先于图表
一间农业园区控制室里挂着一块 85 寸液晶屏，上面跑的就是智慧农业大数据展示大屏页面。左边是温湿度曲线，中间是种植区 GIS 墒情色块，右边是水肥一体机压力和今日累计灌水量。数据源分散在空气传感器、土壤探针、气象站、卷帘机控制柜里，单独每路都能入库，可一旦并排展示，不同来源的“湿度”口径对不上，刷新节奏也不一致。这个标题真正要解决的问题，不只是把图表画好看，而是先把数据链路、指标口径和刷新策略定住，再谈可视化效果。
适合往下看的人分三类：数据工程师重点读第二章的聚合口径与清洗；前端直接抄第三章的 ECharts 配置和第四章的适配方案；做农业信息化的集成商，第五章的数据量控制、CORS 和增量刷新能省下大量现场调试时间。
2. 智慧农业大屏的数据链路与指标口径
2.1 大屏页面的上游：传感器、边缘网关与数据管道
大屏页面本身是展示层，它上面跑的每一度温差都来自感知层。常见的智慧农业现场包含三类数据源：温室内的空气温湿度、CO2 浓度、光照强度；土壤层的温度、含水量与 EC 值；室外气象站的风速、降雨、太阳辐射。这些传感器通过 RS485/Modbus 总线接入边缘网关，网关按秒级或分钟级周期轮询，再以 MQTT 或 HTTP 上抛到平台侧。
上报频率和展示粒度必须区分开。5 秒一次的原始采样点直接灌进大屏，折线图上会叠满噪点，刷新也徒增带宽；更合理的方式是让边缘网关先做第一道清洗，平台侧再做时间窗口聚合。不同指标的“新鲜度”要求也不同：
| 指标 | 典型采集频率 | 展示粒度 | 聚合方式 |
|---|---|---|---|
| 空气温湿度 | 5s ~ 30s | 5min 均值 | AVG |
| CO2 浓度 | 30s | 5min 峰值 | MAX |
| 土壤墒情 | 1min | 当前值 | LAST |
| 风机/卷帘状态 | 事件触发 | 实时状态 | 最新状态 |
| 水肥灌量 | 1min | 小时累计 | SUM |
上表是一个我常用的口径基线。注意“土壤墒情展示用 LAST”，也就是最新一次采样值，因为土壤水分变化慢，均值反而会掩盖刚浇过水的瞬时状态；而“CO2 用 MAX”是为了让补光灯策略能看到峰值是否触发。这里的选型逻辑是：展示“现状”取 last，展示“趋势和风险”取 mean 或 max，展示“投入产出”取 sum。三者在同一张大屏上并存，各自语义独立，不能用一个聚合函数统吃。
2.2 指标口径定义：均值、最值与累计值怎么取
口径不统一是智慧农业大屏最常见的翻车点。同一块温室，环境监测系统用 10 分钟均值算出 23.6 摄氏度，水肥系统取的是整点快照 22.1 摄氏度，两套系统同时上大屏，运营人员会直接认为设备坏了。规矩应当在进入大屏数据接口之前就定好：每类指标由哪个系统作为唯一来源，时间窗口是多长，聚合函数是什么，补数策略是什么。
我一般会在平台侧维护一张指标字典表，记录metric_id、source_table、window、agg_func、unit。查询时直接按字典生成 SQL，避免大屏前端各自拼条件。时间对齐上统一使用时间戳的“物理小时开头”规则，比如 10:00:00 到 10:04:59 的采样归入 10:00 这个桶，group by的时间切片用date_trunc('minute', ts)这类函数，避免 10:05 那一秒漂到下一个桶。
2.3 用 Python 实现传感器时序数据的清洗与对齐
从数据库拿到原始采样后，通常在服务端做一次处理再输出给大屏。下面这段代码用 Pandas 完成 5 分钟对齐、异常值过滤和缺口插值：
import pandas as pd import numpy as np # 原始采样: ts 为 Unix 秒, air_temp 为空气温度, co2 为二氧化碳浓度 df = pd.DataFrame({ 'ts': [1711792000, 1711792005, 1711792010, 1711792015], 'air_temp': [23.1, 26.8, 23.2, 23.3], # 中间 26.8 为明显跳变 'co2': [462, 458, 1000, 461], # 1000 可能为校准毛刺 }) df['ts'] = pd.to_datetime(df['ts'], unit='s').dt.tz_localize('UTC') df.set_index('ts', inplace=True) df.sort_index(inplace=True) # 传感器可能漂移或短路，先按物理范围过滤 df.loc[~(df['air_temp'].between(-40, 60)), 'air_temp'] = np.nan df.loc[~(df['co2'].between(300, 2000)), 'co2'] = np.nan # 5 分钟重采样：温度取均值，CO2 取峰值，墒情取最后值 agg = {'air_temp': 'mean', 'co2': 'max'} resampled = df.resample('5min').agg(agg) # 网关断线导致连续缺测时，限制插值不超过 2 个桶 resampled = resampled.interpolate( method='linear', limit_direction='forward', limit=2 )逻辑说明：先按 UTC 归一化时间戳并排序，防止乱序数据进入折线图后出现倒流；过滤阶段用between把超出物理范围的采样置为 NaN，而不是直接删行，这样重采样窗口的时长能保留；resample('5min')默认按整点对齐，10:00:00 到 10:04:59 各秒会归入同一个时间戳，生成的时间点在折线图上自然对齐。interpolate(limit=2)用于补齐网关偶发断线造成的空缺，但禁止向后插补超过两档——如果断线超过 10 分钟，人工修正比算法猜测更可靠。注意此节代码仅仅是清洗示例，本项目若数据量超百万行，建议把该逻辑用 Spark Structured Streaming 或 Flink 替换掉再对接输出。
2.4 给演示地址准备的本地数据服务
拿到“源代码+演示地址”的项目包之后，最常见的错误是直接用file://协议双击index.html，然后发现图表空白、控制台报错。ECharts 加载本地的 JSON 数据文件受浏览器同源策略限制，所以演示地址必须以本地 HTTP 服务方式启动：在项目根目录执行python3 -m http.server 8000，浏览器访问http://localhost:8000才能正确拉到data/sensor.json。启动后大屏页面每次刷新都会重新请求数据文件，这也是调试阶段最直观的验证方式。
3. ECharts 大屏核心实现：从 JSON 数据到实时图表
3.1 为什么选择 ECharts 做智慧农业大屏底座
ECharts 在数据可视化大屏场景有两个难以替代的优势：一是对时间序列和拓扑图的支持完整，温室环境曲线、灌溉管网关系、地块分布地图都有一套成熟的配置项；二是开源免费，作为免费数据可视化大屏页面底座，商标和商用授权风险都比商业套件小得多。项目源码包里的index.html通常只引入一个构建好的echarts.min.js，开发时建议换成带 API 提示的完整版，定位配置项更快。
地图场景单独提醒：大屏页面要展示区县级地块分布时，需要额外加载 GeoJSON 数据并注册到 ECharts，echarts.min.js本身不携带行政边界。演示项目里的地图数据文件通常放在data/map/目录下，用fetch拉取后执行echarts.registerMap('area', geojson)即可，顺带确认 GeoJSON 的坐标系是 GCJ-02 还是 WGS-84，两者偏移会导致地块错位。
3.2 大屏页面最常用的 4 类图表与配置要点
| 图表类型 | 适合展示的农业数据 | 核心配置项 | 常见误用 |
|---|---|---|---|
| 折线图 | 温湿度、CO2 时间趋势 | xAxis.type: 'time'、yAxis.scale: true | 把所有指标塞进同一 y 轴 |
| 散点图 | 土壤墒情与灌溉量分布 | visualMap按值映射颜色 | 把散点坐标用 category 轴硬画 |
| 仪表盘 | 环境告警、设备健康度 | max、progress、threshold | 仪表盘用固定数字误导 |
| 地图 | 地块、大棚、虫情监测分布 | visualMap、roam | 忘记注册 GeoJSON |
左区域温湿度折线是大家参考最多的部分，下面这段是一份可直接运行的浓缩骨架：
const option = { backgroundColor: 'transparent', grid: { top: 40, left: 48, right: 24, bottom: 32 }, tooltip: { trigger: 'axis', confine: true, formatter: (params) => { // params 是 hover 命中的各系列数据点 const temp = params[0]?.value?.[1]; return `温度：${temp} ℃`; } }, xAxis: { type: 'time', boundaryGap: false }, yAxis: { type: 'value', name: '温度/℃', scale: true }, series: [{ name: '空气温度', type: 'line', smooth: true, showSymbol: false, data: [[1711792000000, 23.1], [1711792300000, 23.6]], lineStyle: { width: 2 } }] };参数说明：xAxis.type: 'time'要求数据点为[毫秒时间戳, 数值]，大屏接口返回的 Unix 秒值必须先乘 1000，否则曲线全部压在 1970 年；boundaryGap: false让曲线从最左端开始，不留下空边距；yAxis.scale: true是给温室温度这种变化区间小的指标用的，不然 23 到 24 摄氏度的波动会在 0 到 100 的坐标轴上压成一条直线。tooltip 的confine: true防止提示框在大屏边缘溢出屏幕。
3.3 ECharts 数据加载与动态刷新的最小实现
大屏页面不能只加载一次数据，通常要以秒级或分钟级周期拉取接口。以下代码是演示地址中常见的刷新模式：
const chart = echarts.init(document.getElementById('main')); let cacheKey = ''; async function loadSensorData() { const res = await fetch('data/sensor.json', { cache: 'no-store' }); const payload = await res.json(); // 用数据文件中的时间戳判断是否需要更新，避免无谓 setOption if (payload.last_updated === cacheKey) return; cacheKey = payload.last_updated; chart.setOption({ xAxis: { type: 'time' }, yAxis: [{ type: 'value', name: '温度/℃' }], series: [{ type: 'line', showSymbol: false, data: payload.series.temp.map(p => [p[0] * 1000, p[1]]) }] }, { notMerge: true }); } loadSensorData(); setInterval(loadSensorData, 30000);参数说明：fetch里加cache: 'no-store'是防止浏览器在县城网络环境命中陈旧缓存，导致大屏数据比现场实况慢半小时。notMerge: true表示整体替换配置，而不是把新旧配置合并，适合数据源完全变化的情况；如果你有大屏页面上多个图表需要保留交互状态，就不要开notMerge，改成只更新series.data。用last_updated做轻量判断是低成本优化，现场网络抖动时能减少无效的图表重绘。
4. 大屏页面布局与多分辨率适配
4.1 固定设计稿与栅格化布局
智慧农业大屏页面绝大多数面向 1080p 的横屏显示器，设计稿定在 1920×1080 是最省事的做法。拿到源代码后建议先看它的布局方式：用绝对定位写死坐标的版本，后续加一个区块要改一堆 left/top；用 CSS Grid 的版本，调整栅格列宽即可。下面是适合农业大屏的 12 列栅格骨架：
.dashboard { width: 100vw; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 320px 1fr 320px; grid-template-rows: 64px 1fr; gap: 8px; background: #0a1a2f; } .header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #e6f7ff; } .left-panel { grid-row: 2; overflow: hidden; } .center-panel { grid-row: 2; } .right-panel { grid-row: 2; }逻辑说明：grid-template-columns把左右面板固定为 320px，中间地图/曲线区域吃掉剩余空间，这样在大屏页面里无论温湿度曲线还是 GIS 地图都能拿到最大可视区域。overflow: hidden放在.dashboard上，避免子图表在某台电视上溢出滚动条；真正的内容裁切由内层的 ECharts 容器负责。
4.2 整体缩放方案：比 vw/vh 更稳妥的适配手段
宽屏一体机、拼接屏、普通办公显示器三者在实际项目里都会遇到，只靠vw/vh做字号会导致 2K 屏字体大得溢出、1366 分辨率下又挤成一团。演示项目里更常见的做法是整体缩放：页面按 1920×1080 设计，用 CSS 的transform: scale把整个.dashboard等比缩放到当前视口。
function scaleDashboard() { const el = document.querySelector('.dashboard'); const scaleX = window.innerWidth / 1920; const scaleY = window.innerHeight / 1080; const scale = Math.min(scaleX, scaleY); el.style.transform = `scale(${scale})`; el.style.transformOrigin = 'top left'; } window.addEventListener('resize', debounce(scaleDashboard, 100)); scaleDashboard();参数说明：Math.min(scaleX, scaleY)保证页面在高宽比较大的屏幕上不会出现上下裁切或左右滚动条，维持 16:9 的显示比例；transformOrigin设置成左上角，让缩放后的元素以原设计稿左上角为锚点，避免出现整体偏右下。该方案对应原页面里物理像素被放大或缩小，下拉选单和 ECharts tooltip 都会被等比缩放，观感一致性比 vw 方案好。注意 transform 缩放不会触发浏览器的媒体查询断点，所以单独做移动端适配时不要沿用这一套。
4.3 图表容器尺寸变化时的重绘策略
整体缩放改变的是 CSS 变换矩阵，ECharts 的 canvas 不会因为 transform 自动重绘，所以大屏页面在分辨率切变时需要手动触发chart.resize()。常规做法是在scaleDashboard()里把图表 resize 一起做掉：
function resizeAllCharts() { const charts = echarts.getInstanceByDom(document.getElementById('main')); if (charts) charts.resize(); }但无论哪种写法，都需要配合 100ms 的防抖。一个容易被忽略的坑是容器初始高度为 0 时调用echarts.init，图表会以 0 高度挂载，之后resize()也不会自动恢复。更稳妥的顺序是：先完成页面布局、确认容器高度非零，再初始化图表；或者在初始化前强制main.clientHeight > 0检查，否则延迟到下一帧执行。
5. 大屏性能优化与排错：把数据量压到能实时渲染
要把智慧农业大屏页面跑在普通办公 PC 和国产化终端上，渲染性能和网络开销都需要控制。先说一个我经常用到的技巧：按需引入 ECharts 模块，而不是把全量包拖进来。项目如果用打包器，常见做法是：
import * as echarts from 'echarts/core'; import { LineChart, MapChart, GaugeChart } from 'echarts/charts'; import { GridComponent, TooltipComponent, VisualMapComponent } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; echarts.use([ LineChart, MapChart, GaugeChart, GridComponent, TooltipComponent, VisualMapComponent, CanvasRenderer ]);这样依赖体积通常能从 1MB 量级降到 300KB 左右。逻辑说明：echarts/core是核心入口，图表、组件、渲染器分别注册；大屏页面若只用了折线、地图和仪表盘，不要一股脑引入 BarChart 和 PieChart，拖慢首屏。运行时若图表不显示，先检查控制台是否出现Component series.line not exists，那就是漏注册了对应模块。
大屏页面折线图的数据量一大，渲染会明显掉帧。除了限制时间窗口，最常见的参数组合是sampling: 'lttb'加showSymbol: false：LTTB 算法能把几千个点压缩成几百个趋势特征点，肉眼几乎看不出差异，但帧率能恢复。同时把 setInterval 的刷新周期从 5 秒放宽到 30 秒，并配合“只保留最近 30 分钟数据”的截断逻辑：
const WINDOW = 30 * 60 * 1000; const points = raw .filter(p => p.ts >= Date.now() - WINDOW) .map(p => [p.ts, p.value]);如果刷新积累的历史点无限增长，canvas 上会有大量不可见节点，内存也会慢慢吃满。上面的过滤器把窗口外数据丢给垃圾回收，大屏连续跑一周都不用重启浏览器。
演示地址验证方面，记住三个高频故障。第一，fetch加载本地 JSON 报 CORS，前面已提到用python3 -m http.server替代file://。第二，GeoJSON 地图不显示，大概率是维度字段名不匹配，或坐标系偏移，把地图和散点数据的中心经纬度打出来逐项比对。第三，仪表盘数值不动，排查方向是接口字段名大小写——air_temp写成AirTemp在大部分后端不报错，前端点却取不到。用console.table(chart.getOption().series[0].data)直接看 ECharts 当前持有的数据窗口，能快速区分是数据没到还是配置没渲染。
本文还有配套的精品资源，点击获取
