企业官网建设流程全解析

简介：基于ECharts的农业监控数据平台可视化大屏源码，面向智慧农业项目开发者、前端工程师及数据可视化学习者，利用ECharts图表库构建大屏展示土壤湿度、光照、气温等农业环境指标，帮助管理人员快速掌握农田状态，解决传统监控数据不直观的问题。压缩包内共六十七个文件，包含二十九个JavaScript脚本、十九个PNG图片、十二个CSS样式表，另有HTML、JSON、GIF、JPG等辅助文件，大小约258KB，其中脚本负责图表渲染与交互逻辑，样式表统一定制大屏视觉风格，图片素材用于背景与状态图标。目前已有301人学习，代码结构和注释清晰，便于二次开发与个性化定制。通过该项目可掌握ECharts常用图表在大屏场景下的组合使用、动态数据加载与自适应布局方法，还能快速搭建一套完整的农业监控可视化大屏demo。

1. 农业可视化大屏不是堆图表，而是拼数据编排能力

农业监控大屏和普通 BI 报表最大的区别在于：它不是为了给人慢慢看，而是为了在一面墙上、几米外、扫一眼就能看出问题。土壤墒情、气象站数据、虫情监测、视频联动，这些信息如果只是把 ECharts 示例抄一遍拼在一起，屏幕上是热闹了，但运维人员根本抓不住重点。这套基于 ECharts 的农业监控数据平台，从文件结构看就是典型的大屏工程范式：index.html做骨架，layui做后台框架支撑，jquery.js负责 DOM 交互，多个按业务拆分的图表模块如pie.js、bar.js、histroy.js、map.js各自独立维护。这种按图表类型和业务域拆文件的方式，恰恰是可视化项目后期最不容易翻车的写法——你改一个饼图的配置，不需要去滚动几千行的单文件找配置项。

这适合谁？接手的开发者如果不是第一次碰大屏，应该能看出这套代码里pinhuan.js、shipei.js这类文件名的含义，前者大概率是频繁轮询更新逻辑，后者是屏幕适配方案。新手可以通过这套源码理解一个完整大屏项目的模块边界，熟手则可以直接把它当成农业场景的模板，替换数据源、调整图表类型就能复用。但先别急着打开代码，这个项目真正的门槛在于理解数据从哪来、到哪去、在哪个环节被 ECharts 消费。

2. 大屏框架选型与 ECharts 多图表体系的构建逻辑

2.1 为什么是 ECharts 而不是其他可视化库

农业监控数据的特征决定了图表库的选型方向。传感器采集的空气温湿度、土壤 EC 值、光照强度，本质上是时序数据；虫情计数、设备状态则是离散事件；区域墒情分布又天然适合地图热力展示。ECharts 在农业场景的统治力来自三个层面：一是开箱即用的图表类型覆盖了农业监控绝大多数需求，折线图看趋势、柱状图做对比、饼图看占比、地图做区域分布，不需要像 D3 那样从底层绘制路径；二是数据更新机制足够轻量，setOption支持局部更新，对秒级刷新的传感器数据来说，不需要重建整个实例；三是它对低端终端的兼容性远比 Canvas 自绘方案可靠，农业监控中心的大屏主机未必是高性能显卡。

这套源码里histroyline.js和histroy.js并存是有道理的。前者负责历史趋势线，后者可能是历史数据表格或统计卡片，从命名上就能看出作者有意识地把「历史查询」切成独立模块，避免与实时图表耦合。pinhuan.js从词面推测是「频繁」的拼音简写，这类文件通常承载轮询逻辑——每隔几秒拉一次数据，然后调用各个图表的更新函数。这是农业大屏最常见的实现方式，WebSocket 虽然实时性更好，但在传感器数量有限、数据量不大的场景下，setInterval轮询反而更省心，不用维护长连接状态，也不用考虑断线重连。

// 典型的大屏轮询调度器模式，对应 pinhuan.js 的核心逻辑 const REFRESH_INTERVAL = 5 * 1000; // 5秒轮询一次，农业大屏无需毫秒级刷新 function pollSensorData() { $.ajax({ url: '/api/agriculture/latest', type: 'GET', dataType: 'json', timeout: 4000, success: function(res) { if (res.code !== 0) return; // 分别调用各业务模块的更新入口 updateTemperatureLine(res.data.temperature); // 气温趋势 updateHumidityBar(res.data.humidity); // 湿度分布 updateSoilMap(res.data.soilMoisture); // 土壤墒情地图 updateDevicePie(res.data.deviceStatus); // 设备在线率 }, error: function(xhr, status) { // 轮询场景下静默失败，避免频繁弹错打断大屏展示 console.warn('[Polling] request failed:', status); } }); } // 页面初始化完成后启动轮询，注意清除定时器避免重复启动 $(document).ready(function() { pollSensorData(); this._timer = setInterval(pollSensorData, REFRESH_INTERVAL); });

代码里.ajax的timeout设置为 4 秒，低于轮询间隔的 5 秒，这是防止接口异常时请求堆积形成雪崩。实际生产环境我更倾向于把间隔调大一些，比如 10 秒，因为农业环境变量本身是慢变化量，除非在做大棚薄膜卷帘控制，否则 5 秒和 10 秒的视觉差异几乎为零，但服务端压力能降低一半。

2.2 按业务域拆分图表模块的工程意义

看一下源码根目录的 JavaScript 文件：pie.js、bar.js、map.js是按图表类型命名，histroy.js、histroyline.js、date.js是按业务功能命名，gundong.js看起来是滚动列表，shipei.js大概率是「适配」拼音——把这段代码拆开看，能理解作者的分层思路。

图表类型文件和业务功能文件交叉，说明这个项目的模块划分经历了两个阶段：第一阶段按 ECharts 图表类型建文件，快速搭建起视觉框架；第二阶段按业务需求把历史查询、日期选择、滚动播报这些功能独立出来。这种演进路径很真实，也是大屏项目从 Demo 走向产品的必经过程。如果你接手类似项目，我建议直接用webpack或vite做模块化改造，虽然这套源码用的是传统多文件加全局函数的方式，但理解每个文件的职责边界后，迁移成本并不高。

// bar.js 的典型导出结构——大屏图表模块的标准写法 window.AgriDashboard = window.AgriDashboard || {}; // 柱状图模块：展示不同片区的土壤 EC 值对比 (function(NS) { 'use strict'; let barInstance = null; // ECharts 实例句柄，全局唯一 function initBar(domId, options) { const dom = document.getElementById(domId); if (!dom) return; barInstance = echarts.init(dom); const defaultOption = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category' }, yAxis: { type: 'value', name: 'EC值 (mS/cm)' }, series: [{ type: 'bar', barWidth: '40%', // 大屏上柱体不宜过宽，避免视觉拥挤 itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#00D4FF' }, { offset: 1, color: '#007BFF' } ]) } }] }; barInstance.setOption($.extend(true, {}, defaultOption, options)); return barInstance; } NS.initBar = initBar; })(window.AgriDashboard); // 调用方式：AgriDashboard.initBar('chart-ec', {...})

这里的$.extend(true, {}, defaultOption, options)是做深拷贝合并，避免默认配置对象被后续的 setOption 操作污染。这个细节看起来小，但如果你直接在 defaultOption 上做修改，第二次调用时图表就会带着第一次的数据残留。大屏项目中我见过大量这种问题，排查起来非常隐蔽。barWidth设置成40%而不是固定像素，是因为大屏可能有多种分辨率，百分比宽度让 ECharts 在 resize 时自动适配。

2.3 layui 在大屏项目里的角色定位

layui在农业大屏中承担的不是可视化职责，而是后台支撑。源码里包含layui.js和对应的css，它提供的layer弹层组件、table表格组件、laydate日期选择器，在农业监控场景里对应的是历史数据查询页、报警记录列表、时间范围筛选这类功能。大屏主页面通常是纯展示，但点击某个图表下钻到明细数据时，layui 的组件能快速搭建出查询界面。

layui的一个特点是按模块加载，它不像 Bootstrap 那样整套引入。看源码里layui目录下的结构，应该是按需引用了table、laydate、layer这几个模块。这种做法值得学——大屏页面的首屏加载速度直接影响展示效果，如果你把所有 JS 都塞进首页，网络差的时候图表会一块块蹦出来，非常难看。合理拆包、延迟加载非关键模块，是保障大屏首屏完整性的重要手段。

3. 数据组织和刷新策略——从静态 JSON 到实时流

3.1 大屏项目的数据流架构

农业监控数据平台的数据源通常有三类：实时采集数据、历史统计数据、设备状态数据。源码里的json目录存放静态 JSON 文件，这在开发阶段是合理的，前后端并行时前端先用 Mock 数据跑通界面。但发布到生产环境时，必须把这些 JSON 替换成真实的 API 接口，否则大屏就是个空壳。

从package.json的存在可以推断这是一个可以用 npm 管理依赖的项目。看一下依赖配置能了解技术栈深度，如果里面只有echarts和jquery，说明项目是纯前端方案，后端接口由其他系统提供；如果依赖里还能看到express或koa，说明这个工程可能是一个前后端一体的 Node.js 应用，内置了数据接口层。无论哪种情况，作为可视化项目的核心是：数据层和展示层必须解耦。

{ "name": "agriculture-monitor-dashboard", "version": "1.0.0", "description": "基于ECharts的农业监控数据可视化大屏", "main": "index.html", "dependencies": { "echarts": "^5.4.0", "jquery": "^3.6.0", "layui": "^2.8.0" }, "devDependencies": { "http-server": "^14.1.0" }, "scripts": { "start": "http-server -p 8080 -c-1", "build": "node tools/build.js" } }

如果你在本地打开index.html发现图表不显示，十有八九是跨域问题——file://协议下 ajax 请求本地 JSON 文件会被浏览器拦截。常见的做法是在项目根目录下起一个静态文件服务器，像依赖里配置的http-server -c-1那样，-c-1参数是禁用缓存，确保修改 JSON 后刷新页面立即生效。

3.2 图表数据更新的两种姿势：全量 vs 增量

大屏图表的数据更新不是只有一种方案，从pinhuan.js和gundong.js的命名差异能看出作者想覆盖多种场景。

实时图表适合增量更新。ECharts 的setOption在传新数据时，如果不指定notMerge参数，会做新旧数据合并。比如折线图，我只想追加最新一个点的数据，可以用setOption({ series: [{ data: [newValue] }] })，但要小心这会把原来的 data 整体替换掉。正确的增量追加方式是先getOption()拿到当前数据，push 新值后再 setOption。或者更干脆一点，用appendData方法（仅限 dataZoom 模式下）。这里有个性能陷阱：轮询 5 秒一次，如果每次都全量重绘几万个点的折线图，帧率会明显下降，大屏会显得卡顿。

历史数据表和滚动列表则适合全量刷新。gundong.js应该是控制表格或通知列表的滚动播报，这种组件使用 CSS 动画或者 jQuery 定时器滚动即可，数据更新频率不需要太高。农业监控里的设备告警信息，一分钟刷一次就算快的。两种更新模式并存，是农业大屏这类低实时性要求的可视化系统里最务实的搭配。

// 增量更新折线图数据的推荐写法 function appendLatestReading(chartInstance, newDataPoint) { if (!chartInstance) return; const option = chartInstance.getOption(); const seriesData = option.series[0].data; // 拿到现有数据数组 // 维护固定窗口长度，只保留最近 N 个点，防止内存膨胀 const MAX_POINTS = 120; seriesData.push(newDataPoint); if (seriesData.length > MAX_POINTS) { seriesData.shift(); } chartInstance.setOption({ series: [{ data: seriesData }] }, false); // 第二个参数 false 表示 notMerge，直接替换 series 配置 } 代码块

MAX_POINTS设置为 120，对应 5 秒一个采样点，就是 10 分钟的数据窗口。当你要做 24 小时的趋势展示时，这种前端内存窗口策略就不够用了，正确的做法是后端做聚合，比如把 5 秒的数据聚合成 5 分钟一条，前端只拿 288 个点。这个逻辑在上面的代码片段中已经体现：getOption()拿现有数据、push新值、shift()截断窗口。

3.3 地图模块的特殊处理（map.js）

农业监控如果涉及多个区县或农场，地图是不可或缺的模块。从热词「echarts中国地图」「3d地区地图可视化大屏样式」能看出地图可视化是高频需求。ECharts 的map类型需要先注册地图 GeoJSON 数据，这跟折线图、柱状图不一样，后者是内置坐标系就能渲染。

// 地图模块初始化——农业区域墒情分布 $.getJSON('json/farmlands.geo.json', function(geoJson) { echarts.registerMap('farmlands', geoJson); // 注册自定义地图 const mapChart = echarts.init(document.getElementById('map-container')); mapChart.setOption({ tooltip: { trigger: 'item', formatter: function(params) { // params.name 是区域名，params.value 是墒情值 return params.name + '<br/>土壤含水量: ' + params.value + '%'; } }, visualMap: { min: 0, max: 60, pieces: [ // 分段式配色，比连续渐变更适合业务解读 { min: 40, label: '墒情良好' }, { min: 20, max: 40, label: '中度缺水' }, { min: 0, max: 20, label: '严重缺水' } ], textStyle: { color: '#fff' } }, series: [{ name: '土壤墒情', type: 'map', map: 'farmlands', roam: false, // 大屏场景下禁止缩放拖拽，避免误操作 label: { show: true, color: '#fff', fontSize: 10 }, data: [ { name: '东区试验田', value: 45 }, { name: '西区种植基地', value: 28 } ] }] }); });

地图模块的坑主要在 GeoJSON 数据的准确性和 data 字段的匹配。GeoJSON 里properties.name必须和 data 数组里每个对象的name完全一致，多一个空格都对不上。调试地图不显示时，打开浏览器控制台看有没有「Map 'xxx' not exists」的报错，有就说明地图没注册成功。

4. 历史数据查询与图表联动——date.js 和 histroy 模块的综合应用

4.1 历史数据查询的前端交互设计

农业监控大屏不可能只展示实时数据，回看历史数据是刚需。比如分析某一周的气温变化对作物生长的影响，或者比对去年同期的土壤湿度——这时候就需要date.js这个日期选择模块和histroy.js、histroyline.js联动起来。

date.js从命名来看应该是封装了日期选择器的大屏适配版本，底层的日期选择逻辑也可以直接用 layui 的 laydate 组件，值得注意的是大屏场景和后台系统不同，日期选择的交互逻辑也有差异。后台管理系统的日期选择器通常在点击后才弹出面板，大屏项目则更倾向于默认展示最近 24 小时或最近 7 天的数据，通过快捷按钮切换时间范围。date.js里大概率写了类似「今日」「近 7 天」「近 30 天」这样的快捷选项，这比让用户在日历里手选日期友好得多。

// 历史数据查询模块——按时间范围请求并渲染 function queryHistory(startTime, endTime) { // 时间戳转格式化：YYYY-MM-DD HH:mm:ss const startStr = formatDate(startTime); const endStr = formatDate(endTime); $.ajax({ url: '/api/agriculture/history', method: 'GET', data: { start: startStr, end: endStr, pointIds: $('#device-select').val() // 支持多选设备 }, success: function(res) { if (res.code !== 0) return; // 同步更新历史柱状图和历史折线图 histroy.renderTable(res.data.statistics); histroyline.renderTrend(res.data.timeline); } }); } // 日期格式化，注意补齐前导零 function formatDate(ts) { const d = new Date(ts); const pad = (n) => (n < 10 ? '0' + n : '' + n); return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()); }

从这段代码的逻辑可以看出历史查询模块的几个关键参数：时间范围、设备 ID 列表。查询结果不是直接往图表里塞，而是拆成两个用途——统计表格展示汇总数据，折线图展示时间序列趋势。这种拆分是合理的，用户既要「平均湿度是多少」这种概要信息，也要「湿度在哪个时间点出现谷值」这种细节信息。在实现层面，这两个渲染函数应该放在histroy.js和histroyline.js里分别维护，避免互相影响。

4.2 饼图和柱状图在历史数据中的角色

在农业监控的历史分析场景里，饼图通常不是用来展示时间序列的，而是用来展示占比类聚合数据。比如在过去 7 天里，农田各区域设备报警次数的占比、不同作物种植区的用水量分配。pie.js文件在实时大屏上的典型用法是展示「设备在线/离线/故障」的比例，而在历史分析里则转化为特定时间段的统计占比。

柱状图则更适合对比。bar.js在历史模块中可以做「过去 7 天每日平均气温对比」或「各月降水量对比」。ECharts 柱状图配合label显示数值，在大屏上让用户不用看坐标轴就能读出数据。这里有个细节：柱状图的 x 轴标签如果数量多，默认会旋转或省略显示，你需要手动设置axisLabel: { interval: 0, rotate: 30 }来强制全量展示。

// 历史数据对比柱状图——近7天用水量对比 function renderWaterCompare(dailyData) { const chart = echarts.init(document.getElementById('chart-water-compare')); chart.setOption({ xAxis: { type: 'category', data: dailyData.map(item => item.date), axisLabel: { color: '#B0C4DE', fontSize: 12 } }, yAxis: { type: 'value', name: '用水量 (m³)', axisLabel: { color: '#B0C4DE' } }, series: [{ name: '水用量', type: 'bar', data: dailyData.map(item => item.value), itemStyle: { color: function(params) { // 超过阈值的水量标记为警示色 const threshold = 500; return params.value > threshold ? '#FF4D4F' : '#1E90FF'; } }, label: { show: true, position: 'top', color: '#fff', formatter: '{c} m³' } }], tooltip: { trigger: 'axis', formatter: function(params) { return params[0].name + '<br/>用水量: ' + params[0].value + ' m³'; } } }); }

这段代码里用了一个技巧：itemStyle.color回调函数里做阈值判断，超过用水指标的柱子自动变红。这是 ECharts 里非常实用的能力——大屏运维人员不需要手动对比数值和标准线，看颜色就知道异常。类似的逻辑还可以用在气温柱状图里标出超过 35°C 的高温天，或者用在土壤 EC 值柱状图里标出盐碱化风险的区域。

4.3 时间轴与图表的双向联动

在histroyline.js中，一个常见需求是：用户拖动时间轴选中一个时间区间，图表同步缩放到这个区间。ECharts 提供了dataZoom组件，它的inside和slider两种类型可以配合使用。大屏上的交互方式和普通 Web 应用不同——大屏通常不支持鼠标滚轮，但可能用到遥控器或触控屏。如果你同时配置了两种dataZoom，触控屏用户可以直接在图表上滑动缩放，PC 用户可以通过下方的滑块选择区间，两种交互方式互不干扰。

// 折线图内嵌 dataZoom——支持滑动手势和滑块双交互 option = { dataZoom: [ { type: 'inside', // 内置于坐标系，支持滚轮和拖拽缩放 start: 0, end: 100 }, { type: 'slider', // 底部滑块，提供可视化的时间轴 height: 20, bottom: 10, start: 0, end: 100, textStyle: { color: '#B0C4DE' } } ], xAxis: { type: 'time', // 时间轴类型，数据格式为时间戳或日期字符串 axisLabel: { formatter: function(value) { // 根据缩放级别动态调整标签格式 const date = new Date(value); const h = date.getHours(); const m = date.getMinutes(); return h + ':' + (m < 10 ? '0' + m : m); } } } };

代码里的type: 'time'是 ECharts 处理时间序列的正确姿势，你给它传带时间的字符串或时间戳，它自己会按比例算刻度。不要用type: 'category'然后把时间字符串塞进 data 数组，那样做图表能显示，但 dataZoom 的时间轴语义就丢了。这也是频繁会被误用的地方。

5. 大屏适配与自验收到封装优化——shipei.js 和 base.css 的工程细节

5.1 不同分辨率下的大屏缩放策略

大屏适配是可视化项目里最容易被忽略也最容易翻车的环节。很多大屏项目在中控室的 1920×1080 显示器上调试好，部署到展厅的 4K 大屏上就出现布局错乱、字体偏小的现象。看shipei.js（适配脚本的拼音）和base.css的存在，说明作者对这个问题有意识。

大屏适配有两种主流方案：基于 rem 的等比缩放和基于 transform 的整体缩放。rem 方案需要动态计算根字体大小，适配多分辨率，但图表内的像素尺寸不受 rem 控制，ECharts 里的fontSize、barWidth如果是固定数字，不会随屏幕变大而变大，这个问题很常见。transform 方案则把整个大屏画在一个固定设计稿尺寸（比如 1920×1080）的画布里，然后等比缩放——优点是所有元素跟着等比缩放，缺点是页面实际分辨率不是整数时会出现边缘模糊。

// shipei.js 的核心——基于窗口尺寸的等比缩放 (function(window, document) { const designWidth = 1920; // 设计稿宽度 const designHeight = 1080; // 设计稿高度 const app = document.getElementById('app'); // 包裹整个大屏的容器 function scalePage() { const winW = window.innerWidth; const winH = window.innerHeight; // 取宽度和高度缩放比例的较小值，保证内容不被裁切 const scale = Math.min(winW / designWidth, winH / designHeight); app.style.transform = 'scale(' + scale + ')'; app.style.transformOrigin = 'left top'; // 从左上角开始缩放 } // 窗口大小变化时重新计算缩放比例 window.addEventListener('resize', debounce(scalePage, 200)); scalePage(); // 简单防抖，避免 resize 事件频繁触发 function debounce(fn, delay) { let timer = null; return function() { clearTimeout(timer); timer = setTimeout(fn, delay); }; } })(window, document);

这个方案的关键在Math.min缩放比例取较小值——防止长宽比不一致时，宽屏大屏出现上下裁切或者两侧留白。transform-origin: left top也很关键，默认值是 50% 50%，如果不改，缩放时内容会从中心往外缩，整个布局就偏移了。实际部署时，你还需要配合 CSS 把app容器设为固定 1920×1080 并overflow: hidden，把超出范围的滚动条和溢出元素都藏掉。

5.2 大屏视觉风格：CSS 文件的组织方式

base.css是全局基础样式，style.css是主样式，histor.css、info.css、date.css、scroll.css、history.css分别针对不同模块。导致 CSS 文件多是因为大屏项目各部分独立演进修改频繁，每个模块各自的样式互不干扰，甚至不同团队维护时也不会冲突。

从文件名能推测：info.css控制信息弹窗 / 详情面板，date.css是日期控件的覆盖样式，scroll.css是滚动播报栏的动画定义。如果你要在这个源码基础上改样式，最忌讳的是直接往style.css末尾追加样式——覆盖选择器，写多了就成意大利面条。正确做法是参照源码的套路，新建一个device.css放你的设备状态模块样式，然后在index.html里按顺序引入。CSS 文件之间同名类的优先级问题无法避免，但至少逻辑上能清晰定位。

大屏视觉设计里有几个通用的审美原则值得遵循：背景色用深色渐变，因为深色背景下图表的高亮色彩更容易凸显，而且长时间观看不刺眼；标题和图表标签的配色要统一，主色控制在 2 到 3 个色系内，参考文件里的header.png、kuang.png这些切图就是用来拼出统一的边框和头部风格的；文本类信息要有足够的对比度，浅灰配深蓝或白色配深蓝都是安全的组合。

5.3 打包发布与性能优化细节

源码工程以 index.html 为核心，在根目录下直接运行静态服务器可访问，但它不直接支持模块化管理，所有 JS 都是传统方式在 HTML 中顺序引入的。如果要发布到生产环境，有几个关键优化点值得处理。

压缩合并是必须的。ECharts 本身就有 1MB 以上，如果你在index.html里通过<script src="echarts.js">引入的是全量包，首屏加载会非常慢。建议用echarts/core按需引入，只加载用到的折线图、柱状图、饼图、地图组件和渲染器。这是官方推荐的做法，改动成本也不高：

// 按需引入 ECharts 模块,配合打包工具体积可减少 60% 以上 import * as echarts from 'echarts/core'; import { BarChart, LineChart, PieChart } from 'echarts/charts'; import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; echarts.use([ BarChart, LineChart, PieChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer ]);

如果把 jquery 和 layui 也按需打包，整个大屏首屏体积可以控制在 800KB 以内。对部署在局域网机房的大屏来说，这个级别的体积已经非常理想（局域网带宽通常也有 100Mbps，加载时间在 1 秒内）。图片资源方面，背景图尽量用压缩过的 JPG 或 WebP，不要用高分辨率 PNG。

一个容易忽略的验证细节：如果大屏长时间运行不刷新，ECharts 实例占用的内存会缓慢增长。建议在轮询逻辑里追踪 chart 实例数量，正常情况大屏页面只会存在 10 到 20 个 ECharts 实例。如果你发现页面越来越卡，用chrome://memory-internals查看渲染进程内存占用。如果内存持续攀升，检查是否在每次 setOption 时都新建了 ECharts 实例，而不是复用原有实例。最佳实践是初始化一次实例，后续都用setOption更新数据，页面销毁时调用dispose()释放资源。

5.4 从源码包到可运行项目的三个注意事项

这套源码下载解压之后，第一件事不是打开index.html看效果，而是先做三件事：检查文件完整性、确认依赖、起本地服务器。layout目录存在表明可能与某套独立 UI 框架组合使用，而源码根部的package.json表明你可以通过 npm 安装依赖后直接重建前端环境。

第一个坑是 ECharts 版本兼容性。map.js里的中国地图 GeoJSON 在不同版本中注册方式不同，如果打开页面后地图区域空白，优先检查控制台有没有registerMap is not a function的报错，有就说明 ECharts 版本太旧，需要用echarts.registerMap的新版 API。

第二个坑是 JSON 文件的跨域问题。如果你用现代浏览器直接双击打开index.html，ajax 加载本地 JSON 会被 CORS 拦截。解决方案是：安装http-server或live-server起本地预览环境，注意这个服务也要部署到正式发布环境，不能做成file://直接访问。

第三个坑是 CSS 文件里的字体引用了绝对路径。某些大屏工程中，font-family 引用的字体文件在局域网部署时路径失效，会导致大量文字变成宋体。排查方法是打开开发者工具，看 Network 面板里.woff或.ttf请求是否 404。

最后一个工程化建议：如果你准备在这套源码上做二次开发，把大屏上的每个 ECharts 实例封装成一个独立的 JS 类，用统一的接口管理 init、update、dispose 生命周期。直接修改现在的函数级代码，一个实例的异常会影响整块大屏——这恰恰违背了源码作者按文件拆分的初衷。

本文还有配套的精品资源，点击获取