简介基于ECharts的数据可视化大屏案例源码专门面向前端开发、数据分析及企业信息化团队重点解决大屏展示场景中的图表搭建、数据联动与响应式适配难题。压缩包为ZIP格式约8.17MB文件总数暂未明确标注包体包含可运行的完整工程便于对照学习与二次改造。目前已有11381人学习浏览属于高人气实战参考样例。案例内容覆盖ECharts基础配置、数据绑定、图表类型选择、交互事件、动画效果、自定义样式以及大屏适配与实时数据更新等关键环节通过源码可掌握大屏布局组织、图表动态切换、监控数据实时刷新等实用技巧并能将设计思路复用至企业报告、运营分析或监控中心等场景。整体结构组织清晰非常适合希望快速上手ECharts大屏开发的初中级开发者。1. 从静态报表到数据大屏ECharts 可视化大屏源码到底省了多少事接到过临时加急任务的人都有这种体验周二下午被拉进一个“驾驶舱”项目群周五早上就要给领导汇报数据还在别人手里没导完。我第一次做 ECharts 数据可视化大屏时也差点翻车一周里花了三天折腾图表联调最后发现真正花时间的不是图表本身而是页面布局、自适应和地图数据这些“看上去不起眼”的环节。这套基于 ECharts 的案例源码解决的就是这个问题把散落的指标、图表配置、布局代码整理成可以直接改数据复用的工程。适合前端开发、运维监控人员和做内部管理系统的人拿来即改即用比从空 HTML 文件开始写要快得多。2. 选型与工程结构为什么是 ECharts、源码里装了什么东西2.1 选型理由ECharts 对比手写 SVG 和商用 BI 工具的取舍先说选型。数据大屏这件事技术选型绕不开三个方向纯手写 SVG/CSS 图表、引入 ECharts 这类开源库、或者用帆软/Quick BI 这类商用平台。商用 BI 工具在拖拽生成报表上很强但到了大屏这种高度定制化的场景往往会被主题样式、动效和数据接口的灵活性卡住手写 SVG 自由度最高但一个带缩放动画的柱状图就要写上百行代码工期直接失控。ECharts 的定位恰好卡在中间它是声明式配置一个 option 对象描述图表全部状态不必关心内部绘图细节但它对图表形状、颜色、坐标系、交互事件的控制粒度又远超普通模板。ECharts 对屏幕适配的取舍也偏实用主义。它的坐标系和渲染逻辑都是基于容器像素计算的配合 CSS 的百分比宽高可以做到基础自适应。更关键的是它的 setOption 机制允许增量更新你只需要在数据变化时把新的 series 数据传进去图表会自己 diff 合并这点在做实时刷新的大屏时非常讨巧。对比其他开源方案社区生态也是个加分项常见的柱状图渐变、饼图引导线、地图下钻等效果社区里几乎都有现成的案例。2.2 源码包的基础工程结构如何引入 ECharts、目录划分拿到这个 ECharts 数据可视化大屏案例源码后先别急着打开 HTML 文件我一般会先看一眼目录结构。这份案例用的是经典的静态页面工程组织方式一个入口 HTML、一个放页面样式表的 css 目录、一个集中管理所有图表配置的 js 目录外加一个用来放地图 JSON 或静态数据的目录。visual-dashboard/ ├── index.html ├── css/ │ └── screen.css └── js/ ├── common.js ├── charts/ │ ├── bar.js │ ├── line.js │ ├── pie.js │ └── map.js └── data/ └── mock.json这种结构的好处是把图表配置和数据做了分离。common.js 负责 ECharts 实例的统一初始化charts 目录下的每个文件独立管理一类图表的 option 构建逻辑。这样在后续替换业务数据时只需要动 data 目录下的 mock 数据不需要在图表配置里翻找。ECharts 的引入方式分两种传统页面直接用 CDN工程化项目用 npm。案例源码如果给你的是单个 HTML 文件内嵌所有代码一般走的是 CDN 引入如果是按目录拆分的工程则可能同时提供了模块化加载的路径。在未使用打包工具的纯前端环境里我习惯用指定版本的 CDNscript srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script这里显式锁定了 5.5.0 版本避免 CDN 默认指向 latest 导致未来某个小版本更新时 API 行为不一致。大屏这种要长期挂在会议室屏幕上的页面最怕的就是依赖漂移——今天开发时用的是 5.4明年打开页面变成 5.6折线图的 sampling 默认值改了图就变了样。如果你在源码里看到的是模块化写法那说明它用的是 npm 安装import * as echarts from echarts;这种写法和 CDN 引入在配置图表的 API 上完全一致只在文件加载时机和打包产物上不同。调试大屏时我倾向 CDN因为浏览器开发者工具里可以直接看到 echarts 全局对象排查初始化问题更方便。生产环境再换回 npm 打包做静态资源优化。3. 核心图表配置拆解柱状图、折线图、饼图与地图的落地写法3.1 柱状图与折线图坐标轴、网格、渐变色与数据刷新的基础模板进入正题直接看代码。大屏里出现频率最高的图表是柱状图和折线图它们都挂在直角坐标系下共用 xAxis、yAxis 和 grid 这套配置体系。下面是案例中最常见的柱状图配置模板带渐变色效果那种function initBarChart(domId, sourceData) { const chart echarts.init(document.getElementById(domId)); const option { grid: { left: 4%, right: 4%, top: 40, bottom: 32, containLabel: true }, xAxis: { type: category, data: sourceData.categories, axisLine: { lineStyle: { color: rgba(255,255,255,0.3) } }, axisLabel: { color: #9ea7bb, fontSize: 12 } }, yAxis: { type: value, splitLine: { lineStyle: { color: rgba(255,255,255,0.08), type: dashed } }, axisLabel: { color: #9ea7bb } }, series: [{ name: 指标值, type: bar, barWidth: 40%, data: sourceData.values, itemStyle: { borderRadius: [4, 4, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #36cfc9 }, { offset: 1, color: rgba(54, 207, 201, 0.15) } ]) } }] }; chart.setOption(option); return chart; }这个模板里有几个参数值得细说。grid 的 containLabel 一旦设为 true坐标轴的刻度标签会自动被包含在网格区域内避免标签文字过长时被裁掉或溢出到页面外这是大屏适配里最常见的隐性杀手。barWidth 用百分比而不是固定像素值是为了让柱子宽度在容器缩放时能跟着变宽变窄否则屏幕分辨率一换柱子要么挤成一团要么互相重叠。yAxis 的 splitLine 用的是半透明白色加 dashed这是深色大屏页面里的常见做法既保留了网格参考线又不会让线条喧宾夺主。axisLabel 的颜色和字号也要和整体大屏暗色风格匹配——B 端大屏普遍用深蓝或近黑色背景标签颜色用亮灰白才有足够对比度。渐变色那段则通过 echarts.graphic.LinearGradient 构建了一个从 #36cfc9 到透明的垂直渐变视觉上让柱子更有立体感和“科技感”。折线图与柱状图共用大半的配置差异主要在 series 类型和两个专属参数const option { // grid: xAxis: yAxis 同上 series: [{ name: 访问趋势, type: line, smooth: true, symbol: circle, symbolSize: 4, lineStyle: { width: 2, color: #40a9ff }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: rgba(64, 169, 255, 0.35) }, { offset: 1, color: rgba(64, 169, 255, 0) } ]) }, data: sourceData.trendValues }] };smooth 控制曲线是否贝塞尔平滑在大屏播放场景里视觉上更柔和areaStyle 则是用半透明渐变填充折线下方区域让趋势变化更直观可读。如果你的数据源是实时推送的注意这里要用 chart.setOption({ series: [{ data: newValues }] }) 来更新而不是重新 init。setOption 的第二个参数传 true 可以强制合并覆盖模式但在这种单 series 的更新场景下不必理会默认增量合并就够了。踩过坑的人会知道频繁 init 会带来内存泄漏和闪烁刷新率越高越明显。3.2 饼图与地图环形饼图、玫瑰图和中国地图 JSON 的加载方式饼图在大屏里通常用于占比展示最常见的是两种形态环形图中间放总计数字和南丁格尔玫瑰图半径随数值变化。这个案例源码里饼图配置的核心参数是这样的const option { series: [{ type: pie, radius: [45%, 70%], center: [50%, 50%], roseType: radius, label: { show: true, color: #c9d1e8, formatter: {b}: {d}% }, data: sourceData.pieData }] };radius 数组里的两个值分别是内半径和外半径这样写就构成了环形图中间留白区域刚好放一个数字比如总分或者总用户数。roseType 设为 radius 时扇区的半径不再相等而是和数值大小挂钩视觉上能有强烈的对比感。label 的 formatter 用 {b} 和 {d} 分别取名称和百分比注意百分比是 ECharts 内部自动算的不需要自己在数据里拼字符串。大屏里还有一类高频图是中国地图。做地图时最绕不开的一步是获取 GeoJSON 地图数据。新版本的 ECharts 5 已经不内置中国地图的 GeoJSON需要单独引入。常见做法是通过全国各省市区县的 GeoJSON 资源文件加载fetch(./js/data/china.json) .then(res res.json()) .then(geoJson { echarts.registerMap(china, geoJson); initMapChart(); }); function initMapChart() { const chart echarts.init(document.getElementById(mapDom)); const option { tooltip: { trigger: item, formatter: (params) ${params.name}: ${params.value || 0} }, visualMap: { min: 0, max: 100, left: 20, bottom: 20, calculable: true, inRange: { color: [#14365d, #1890ff, #36cfc9] } }, series: [{ type: map, map: china, roam: true, label: { show: false }, itemStyle: { areaColor: #1e3a5f, borderColor: rgba(255,255,255,0.2) }, data: sourceData.mapData }] }; chart.setOption(option); }series 的 map 字段必须和 registerMap 注册的名称一致这是初学者最容易犯的错。roam 控制地图是否可以拖拽缩放在展示大屏里我一般设为 true让汇报人可以在局部区域放大查看。visualMap 把数值映射成颜色深浅inRange 里三个色值是低、中、高的渐变颜色下限用深蓝类色上限用亮青色和暗色背景保持一致。地图的数据格式需要注意data 数组里每一项的 name 必须和 GeoJSON 中的地区名称严格一致比如“北京市”不能写成“北京”多一个字少一个字都会导致该区域读不到数值。4. 大屏避坑与排查容器尺寸、resize 和地图数据三个重灾区4.1 图表不渲染或渲染一半原因出在容器尺寸和初始化时机现象页面打开后某些图表是空白或者只在拉伸浏览器窗口时才能完整显示。第一次遇到这个问题时我以为是代码写错了翻了半天配置没找出毛病。原因ECharts 在 init 的时候会强制获取容器 DOM 的 clientWidth 和 clientHeight 作为绘图尺寸。如果容器这时是隐藏状态display: none或者布局还没完成导致宽高为 0图表就只会画出一个零尺寸的画布。大屏页面里非常容易触发这个问题——因为 Div 的宽度依赖 flex 布局或百分比计算DOM 结构加载完成后还要等 CSS 生效而脚本如果放在 head 里同步执行容器尺寸根本还没算出来。解决把初始化动作放进 window.onload 或 DOMContentLoaded 事件里执行或者确保图表初始化代码位于容器元素之后。如果你用 Vue 或 React则应在组件的 mounted 生命周期里初始化。另外容器的宽高不能只靠子元素撑开要给容器显式设置 height: 100% 或固定像素值否则即便 onload 后执行高度仍是 0。4.2 resize 后图表错乱或重叠监听事件没有被正确清理现象大屏在浏览器窗口从全屏切换到窄屏或者从一块屏幕拖到另一块不同分辨率的屏幕时图表要么被拉伸变形要么图例和标题叠在一起。原因ECharts 的尺寸是初始化时确定的不会随着容器 CSS 变化自动重绘。标准做法是为 window 绑定 resize 事件在事件回调里调用 chart.resize()。但问题往往出在两个地方一是绑定的回调函数没有保存引用导致无法解绑二是多图表页面里每个图表都绑了一个 resize 监听页面销毁时监听没有移除内存越来越多刷新几次页面后大屏变得卡顿。解决统一维护一个图表实例注册表在 resize 事件里遍历所有实例调用 resize并在页面销毁时统一 disposeconst chartRegistry new Map(); function registerChart(domId, chart) { chartRegistry.set(domId, chart); } window.addEventListener(resize, () { chartRegistry.forEach(chart chart.resize()); });组件卸载时别忘了移除对应实例function destroyChart(domId) { const chart chartRegistry.get(domId); if (chart) { chart.dispose(); chartRegistry.delete(domId); } }注意这里的 resize 事件监听是加在 window 上的如果页面只有局部区域变化可以考虑用 ResizeObserver 监听具体容器。不过在大屏场景里整个窗口变化时所有图表通常都需要重绘所以 window resize 是最简单的兜底方案。4.3 地图区域不显示或数值读不到GeoJSON 注册名与数据名对不上现象地图渲染出来了但某些省份一片空白或者地图正常显示悬浮时区域名称能显示但数值为 0 或 undefined。原因这种问题九成出在名称匹配上。ECharts 的 map series 在做数据匹配时会拿 data 里的 name 字段和 GeoJSON 中的 properties.name 做精确匹配。GeoJSON 文件里的名称是“北京市”你的数据里写的却是“北京”或者把“广西壮族自治区”简写成“广西”都会导致匹配失败。还有一种情况是 GeoJSON 文件本身没加载成功fetch 返回了 404registerMap 注册的是一个空对象。解决先确认 GeoJSON 的加载路径浏览器 F12 的 Network 面板里看请求是否返回 200。名称匹配问题就用数据预处理统一映射const nameMap { 北京: 北京市, 广西: 广西壮族自治区, 内蒙古: 内蒙古自治区 }; const normalizedData rawData.map(item ({ name: nameMap[item.name] || item.name, value: item.value }));在把业务数据交给图表之前先做一层名称清洗确保数据字段与 GeoJSON 中的正式名称对齐。检查时可以用 registerMap 之后手动看一眼地图实例的 getModel() 输出里面有注册区域名称的完整列表。5. 把大屏做到可交付自适应强化、数据接入与效果验证清单5.1 自适应方案的进一步强化用 rem 缩放把“大小屏”问题一次解决如果大屏只在固定分辨率的屏幕上播放CSS 百分比布局加 chart.resize 基本够用。但现实情况往往是设计稿是 1920×1080部署环境的屏幕却是 1366×768 或 3840×2160。纯百分比布局在极宽屏下会让内容拉得太开左右太空。我常用的补强方案是给大屏根节点加一个 transform: scale 缩放通过计算实际视口与设计稿的宽高比例取较小者做整体缩放function fitScreen() { const designWidth 1920; const designHeight 1080; const scaleX window.innerWidth / designWidth; const scaleY window.innerHeight / designHeight; const scale Math.min(scaleX, scaleY); const root document.getElementById(dashboard); root.style.transform scale(${scale}); root.style.transformOrigin top left; } window.addEventListener(resize, fitScreen); fitScreen();这个方案的思路是设计稿始终按 1920×1080 的坐标系来写布局再通过 transform 等比缩放适配任何实际屏幕保证比例不变形。等比缩放后可能左右或上下会有留白可以给根节点的父容器加一个深色背景铺满视觉上不会突兀。缺点是缩放后图表里的文字会一起缩小如果目标屏幕比设计稿大文字反而变大变模糊。所以适合分屏播放这类受控环境。5.2 上线前的验证清单一眼扫完图表的“错位项”交付大屏前的最后一个环节我有一套固定验证动作。先把浏览器窗口切到设计稿分辨率刷新一次检查各图表容器边缘有没有溢出或裁切再切到小分辨率检查文字是否折行、图例是否重叠最后拔掉鼠标等 30 秒看有没有图表因持续数据刷新导致的内存异常上涨。每次改完数据后我强制走一遍这个流程特别是检查图表工具提示、图例和标题的位置——这些组件默认是 ECharts 内部布局的很容易和自定义页头重叠。用代码做快速验证时可以在控制台键入下面这段const charts document.querySelectorAll([data-chart]); charts.forEach(el { const instance echarts.getInstanceByDom(el); console.log(el.id, instance.getWidth(), instance.getHeight()); });getWidth 和 getHeight 如果返回 0说明这个图表初始化时容器尺寸就有问题回到上面第 4.1 节排查。如果返回值和容器视觉尺寸不一致说明图表实例被人为缩放过了或容器被 CSS 变换影响。这套检查逻辑我踩了半年坑才沉淀下来从那以后每次换数据、换屏幕我都强制把所有图表实例的宽高打一圈日志才敢往生产环境推。希望帮到你。本文还有配套的精品资源点击获取
简介基于ECharts的数据可视化大屏案例源码专门面向前端开发、数据分析及企业信息化团队重点解决大屏展示场景中的图表搭建、数据联动与响应式适配难题。压缩包为ZIP格式约8.17MB文件总数暂未明确标注包体包含可运行的完整工程便于对照学习与二次改造。目前已有11381人学习浏览属于高人气实战参考样例。案例内容覆盖ECharts基础配置、数据绑定、图表类型选择、交互事件、动画效果、自定义样式以及大屏适配与实时数据更新等关键环节通过源码可掌握大屏布局组织、图表动态切换、监控数据实时刷新等实用技巧并能将设计思路复用至企业报告、运营分析或监控中心等场景。整体结构组织清晰非常适合希望快速上手ECharts大屏开发的初中级开发者。1. 从静态报表到数据大屏ECharts 可视化大屏源码到底省了多少事接到过临时加急任务的人都有这种体验周二下午被拉进一个“驾驶舱”项目群周五早上就要给领导汇报数据还在别人手里没导完。我第一次做 ECharts 数据可视化大屏时也差点翻车一周里花了三天折腾图表联调最后发现真正花时间的不是图表本身而是页面布局、自适应和地图数据这些“看上去不起眼”的环节。这套基于 ECharts 的案例源码解决的就是这个问题把散落的指标、图表配置、布局代码整理成可以直接改数据复用的工程。适合前端开发、运维监控人员和做内部管理系统的人拿来即改即用比从空 HTML 文件开始写要快得多。2. 选型与工程结构为什么是 ECharts、源码里装了什么东西2.1 选型理由ECharts 对比手写 SVG 和商用 BI 工具的取舍先说选型。数据大屏这件事技术选型绕不开三个方向纯手写 SVG/CSS 图表、引入 ECharts 这类开源库、或者用帆软/Quick BI 这类商用平台。商用 BI 工具在拖拽生成报表上很强但到了大屏这种高度定制化的场景往往会被主题样式、动效和数据接口的灵活性卡住手写 SVG 自由度最高但一个带缩放动画的柱状图就要写上百行代码工期直接失控。ECharts 的定位恰好卡在中间它是声明式配置一个 option 对象描述图表全部状态不必关心内部绘图细节但它对图表形状、颜色、坐标系、交互事件的控制粒度又远超普通模板。ECharts 对屏幕适配的取舍也偏实用主义。它的坐标系和渲染逻辑都是基于容器像素计算的配合 CSS 的百分比宽高可以做到基础自适应。更关键的是它的 setOption 机制允许增量更新你只需要在数据变化时把新的 series 数据传进去图表会自己 diff 合并这点在做实时刷新的大屏时非常讨巧。对比其他开源方案社区生态也是个加分项常见的柱状图渐变、饼图引导线、地图下钻等效果社区里几乎都有现成的案例。2.2 源码包的基础工程结构如何引入 ECharts、目录划分拿到这个 ECharts 数据可视化大屏案例源码后先别急着打开 HTML 文件我一般会先看一眼目录结构。这份案例用的是经典的静态页面工程组织方式一个入口 HTML、一个放页面样式表的 css 目录、一个集中管理所有图表配置的 js 目录外加一个用来放地图 JSON 或静态数据的目录。visual-dashboard/ ├── index.html ├── css/ │ └── screen.css └── js/ ├── common.js ├── charts/ │ ├── bar.js │ ├── line.js │ ├── pie.js │ └── map.js └── data/ └── mock.json这种结构的好处是把图表配置和数据做了分离。common.js 负责 ECharts 实例的统一初始化charts 目录下的每个文件独立管理一类图表的 option 构建逻辑。这样在后续替换业务数据时只需要动 data 目录下的 mock 数据不需要在图表配置里翻找。ECharts 的引入方式分两种传统页面直接用 CDN工程化项目用 npm。案例源码如果给你的是单个 HTML 文件内嵌所有代码一般走的是 CDN 引入如果是按目录拆分的工程则可能同时提供了模块化加载的路径。在未使用打包工具的纯前端环境里我习惯用指定版本的 CDNscript srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script这里显式锁定了 5.5.0 版本避免 CDN 默认指向 latest 导致未来某个小版本更新时 API 行为不一致。大屏这种要长期挂在会议室屏幕上的页面最怕的就是依赖漂移——今天开发时用的是 5.4明年打开页面变成 5.6折线图的 sampling 默认值改了图就变了样。如果你在源码里看到的是模块化写法那说明它用的是 npm 安装import * as echarts from echarts;这种写法和 CDN 引入在配置图表的 API 上完全一致只在文件加载时机和打包产物上不同。调试大屏时我倾向 CDN因为浏览器开发者工具里可以直接看到 echarts 全局对象排查初始化问题更方便。生产环境再换回 npm 打包做静态资源优化。3. 核心图表配置拆解柱状图、折线图、饼图与地图的落地写法3.1 柱状图与折线图坐标轴、网格、渐变色与数据刷新的基础模板进入正题直接看代码。大屏里出现频率最高的图表是柱状图和折线图它们都挂在直角坐标系下共用 xAxis、yAxis 和 grid 这套配置体系。下面是案例中最常见的柱状图配置模板带渐变色效果那种function initBarChart(domId, sourceData) { const chart echarts.init(document.getElementById(domId)); const option { grid: { left: 4%, right: 4%, top: 40, bottom: 32, containLabel: true }, xAxis: { type: category, data: sourceData.categories, axisLine: { lineStyle: { color: rgba(255,255,255,0.3) } }, axisLabel: { color: #9ea7bb, fontSize: 12 } }, yAxis: { type: value, splitLine: { lineStyle: { color: rgba(255,255,255,0.08), type: dashed } }, axisLabel: { color: #9ea7bb } }, series: [{ name: 指标值, type: bar, barWidth: 40%, data: sourceData.values, itemStyle: { borderRadius: [4, 4, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #36cfc9 }, { offset: 1, color: rgba(54, 207, 201, 0.15) } ]) } }] }; chart.setOption(option); return chart; }这个模板里有几个参数值得细说。grid 的 containLabel 一旦设为 true坐标轴的刻度标签会自动被包含在网格区域内避免标签文字过长时被裁掉或溢出到页面外这是大屏适配里最常见的隐性杀手。barWidth 用百分比而不是固定像素值是为了让柱子宽度在容器缩放时能跟着变宽变窄否则屏幕分辨率一换柱子要么挤成一团要么互相重叠。yAxis 的 splitLine 用的是半透明白色加 dashed这是深色大屏页面里的常见做法既保留了网格参考线又不会让线条喧宾夺主。axisLabel 的颜色和字号也要和整体大屏暗色风格匹配——B 端大屏普遍用深蓝或近黑色背景标签颜色用亮灰白才有足够对比度。渐变色那段则通过 echarts.graphic.LinearGradient 构建了一个从 #36cfc9 到透明的垂直渐变视觉上让柱子更有立体感和“科技感”。折线图与柱状图共用大半的配置差异主要在 series 类型和两个专属参数const option { // grid: xAxis: yAxis 同上 series: [{ name: 访问趋势, type: line, smooth: true, symbol: circle, symbolSize: 4, lineStyle: { width: 2, color: #40a9ff }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: rgba(64, 169, 255, 0.35) }, { offset: 1, color: rgba(64, 169, 255, 0) } ]) }, data: sourceData.trendValues }] };smooth 控制曲线是否贝塞尔平滑在大屏播放场景里视觉上更柔和areaStyle 则是用半透明渐变填充折线下方区域让趋势变化更直观可读。如果你的数据源是实时推送的注意这里要用 chart.setOption({ series: [{ data: newValues }] }) 来更新而不是重新 init。setOption 的第二个参数传 true 可以强制合并覆盖模式但在这种单 series 的更新场景下不必理会默认增量合并就够了。踩过坑的人会知道频繁 init 会带来内存泄漏和闪烁刷新率越高越明显。3.2 饼图与地图环形饼图、玫瑰图和中国地图 JSON 的加载方式饼图在大屏里通常用于占比展示最常见的是两种形态环形图中间放总计数字和南丁格尔玫瑰图半径随数值变化。这个案例源码里饼图配置的核心参数是这样的const option { series: [{ type: pie, radius: [45%, 70%], center: [50%, 50%], roseType: radius, label: { show: true, color: #c9d1e8, formatter: {b}: {d}% }, data: sourceData.pieData }] };radius 数组里的两个值分别是内半径和外半径这样写就构成了环形图中间留白区域刚好放一个数字比如总分或者总用户数。roseType 设为 radius 时扇区的半径不再相等而是和数值大小挂钩视觉上能有强烈的对比感。label 的 formatter 用 {b} 和 {d} 分别取名称和百分比注意百分比是 ECharts 内部自动算的不需要自己在数据里拼字符串。大屏里还有一类高频图是中国地图。做地图时最绕不开的一步是获取 GeoJSON 地图数据。新版本的 ECharts 5 已经不内置中国地图的 GeoJSON需要单独引入。常见做法是通过全国各省市区县的 GeoJSON 资源文件加载fetch(./js/data/china.json) .then(res res.json()) .then(geoJson { echarts.registerMap(china, geoJson); initMapChart(); }); function initMapChart() { const chart echarts.init(document.getElementById(mapDom)); const option { tooltip: { trigger: item, formatter: (params) ${params.name}: ${params.value || 0} }, visualMap: { min: 0, max: 100, left: 20, bottom: 20, calculable: true, inRange: { color: [#14365d, #1890ff, #36cfc9] } }, series: [{ type: map, map: china, roam: true, label: { show: false }, itemStyle: { areaColor: #1e3a5f, borderColor: rgba(255,255,255,0.2) }, data: sourceData.mapData }] }; chart.setOption(option); }series 的 map 字段必须和 registerMap 注册的名称一致这是初学者最容易犯的错。roam 控制地图是否可以拖拽缩放在展示大屏里我一般设为 true让汇报人可以在局部区域放大查看。visualMap 把数值映射成颜色深浅inRange 里三个色值是低、中、高的渐变颜色下限用深蓝类色上限用亮青色和暗色背景保持一致。地图的数据格式需要注意data 数组里每一项的 name 必须和 GeoJSON 中的地区名称严格一致比如“北京市”不能写成“北京”多一个字少一个字都会导致该区域读不到数值。4. 大屏避坑与排查容器尺寸、resize 和地图数据三个重灾区4.1 图表不渲染或渲染一半原因出在容器尺寸和初始化时机现象页面打开后某些图表是空白或者只在拉伸浏览器窗口时才能完整显示。第一次遇到这个问题时我以为是代码写错了翻了半天配置没找出毛病。原因ECharts 在 init 的时候会强制获取容器 DOM 的 clientWidth 和 clientHeight 作为绘图尺寸。如果容器这时是隐藏状态display: none或者布局还没完成导致宽高为 0图表就只会画出一个零尺寸的画布。大屏页面里非常容易触发这个问题——因为 Div 的宽度依赖 flex 布局或百分比计算DOM 结构加载完成后还要等 CSS 生效而脚本如果放在 head 里同步执行容器尺寸根本还没算出来。解决把初始化动作放进 window.onload 或 DOMContentLoaded 事件里执行或者确保图表初始化代码位于容器元素之后。如果你用 Vue 或 React则应在组件的 mounted 生命周期里初始化。另外容器的宽高不能只靠子元素撑开要给容器显式设置 height: 100% 或固定像素值否则即便 onload 后执行高度仍是 0。4.2 resize 后图表错乱或重叠监听事件没有被正确清理现象大屏在浏览器窗口从全屏切换到窄屏或者从一块屏幕拖到另一块不同分辨率的屏幕时图表要么被拉伸变形要么图例和标题叠在一起。原因ECharts 的尺寸是初始化时确定的不会随着容器 CSS 变化自动重绘。标准做法是为 window 绑定 resize 事件在事件回调里调用 chart.resize()。但问题往往出在两个地方一是绑定的回调函数没有保存引用导致无法解绑二是多图表页面里每个图表都绑了一个 resize 监听页面销毁时监听没有移除内存越来越多刷新几次页面后大屏变得卡顿。解决统一维护一个图表实例注册表在 resize 事件里遍历所有实例调用 resize并在页面销毁时统一 disposeconst chartRegistry new Map(); function registerChart(domId, chart) { chartRegistry.set(domId, chart); } window.addEventListener(resize, () { chartRegistry.forEach(chart chart.resize()); });组件卸载时别忘了移除对应实例function destroyChart(domId) { const chart chartRegistry.get(domId); if (chart) { chart.dispose(); chartRegistry.delete(domId); } }注意这里的 resize 事件监听是加在 window 上的如果页面只有局部区域变化可以考虑用 ResizeObserver 监听具体容器。不过在大屏场景里整个窗口变化时所有图表通常都需要重绘所以 window resize 是最简单的兜底方案。4.3 地图区域不显示或数值读不到GeoJSON 注册名与数据名对不上现象地图渲染出来了但某些省份一片空白或者地图正常显示悬浮时区域名称能显示但数值为 0 或 undefined。原因这种问题九成出在名称匹配上。ECharts 的 map series 在做数据匹配时会拿 data 里的 name 字段和 GeoJSON 中的 properties.name 做精确匹配。GeoJSON 文件里的名称是“北京市”你的数据里写的却是“北京”或者把“广西壮族自治区”简写成“广西”都会导致匹配失败。还有一种情况是 GeoJSON 文件本身没加载成功fetch 返回了 404registerMap 注册的是一个空对象。解决先确认 GeoJSON 的加载路径浏览器 F12 的 Network 面板里看请求是否返回 200。名称匹配问题就用数据预处理统一映射const nameMap { 北京: 北京市, 广西: 广西壮族自治区, 内蒙古: 内蒙古自治区 }; const normalizedData rawData.map(item ({ name: nameMap[item.name] || item.name, value: item.value }));在把业务数据交给图表之前先做一层名称清洗确保数据字段与 GeoJSON 中的正式名称对齐。检查时可以用 registerMap 之后手动看一眼地图实例的 getModel() 输出里面有注册区域名称的完整列表。5. 把大屏做到可交付自适应强化、数据接入与效果验证清单5.1 自适应方案的进一步强化用 rem 缩放把“大小屏”问题一次解决如果大屏只在固定分辨率的屏幕上播放CSS 百分比布局加 chart.resize 基本够用。但现实情况往往是设计稿是 1920×1080部署环境的屏幕却是 1366×768 或 3840×2160。纯百分比布局在极宽屏下会让内容拉得太开左右太空。我常用的补强方案是给大屏根节点加一个 transform: scale 缩放通过计算实际视口与设计稿的宽高比例取较小者做整体缩放function fitScreen() { const designWidth 1920; const designHeight 1080; const scaleX window.innerWidth / designWidth; const scaleY window.innerHeight / designHeight; const scale Math.min(scaleX, scaleY); const root document.getElementById(dashboard); root.style.transform scale(${scale}); root.style.transformOrigin top left; } window.addEventListener(resize, fitScreen); fitScreen();这个方案的思路是设计稿始终按 1920×1080 的坐标系来写布局再通过 transform 等比缩放适配任何实际屏幕保证比例不变形。等比缩放后可能左右或上下会有留白可以给根节点的父容器加一个深色背景铺满视觉上不会突兀。缺点是缩放后图表里的文字会一起缩小如果目标屏幕比设计稿大文字反而变大变模糊。所以适合分屏播放这类受控环境。5.2 上线前的验证清单一眼扫完图表的“错位项”交付大屏前的最后一个环节我有一套固定验证动作。先把浏览器窗口切到设计稿分辨率刷新一次检查各图表容器边缘有没有溢出或裁切再切到小分辨率检查文字是否折行、图例是否重叠最后拔掉鼠标等 30 秒看有没有图表因持续数据刷新导致的内存异常上涨。每次改完数据后我强制走一遍这个流程特别是检查图表工具提示、图例和标题的位置——这些组件默认是 ECharts 内部布局的很容易和自定义页头重叠。用代码做快速验证时可以在控制台键入下面这段const charts document.querySelectorAll([data-chart]); charts.forEach(el { const instance echarts.getInstanceByDom(el); console.log(el.id, instance.getWidth(), instance.getHeight()); });getWidth 和 getHeight 如果返回 0说明这个图表初始化时容器尺寸就有问题回到上面第 4.1 节排查。如果返回值和容器视觉尺寸不一致说明图表实例被人为缩放过了或容器被 CSS 变换影响。这套检查逻辑我踩了半年坑才沉淀下来从那以后每次换数据、换屏幕我都强制把所有图表实例的宽高打一圈日志才敢往生产环境推。希望帮到你。本文还有配套的精品资源点击获取
开发实战：TXT朗读器实现)
