ECharts 大屏开发实战技巧与避坑指南
一、分辨率适配:让图表跟着屏走
大屏要适配不同分辨率,图表必须响应容器尺寸。核心是监听容器 resize 并调用 chart.resize(),同时防抖:
const ro = new ResizeObserver(() => chart.resize());
ro.observe(container); // 比监听 window.resize 更准
整屏等比缩放方案(scale 容器)适合"画布=分辨率"的固定大屏;组件流式布局适合 PC/移动自适应。两者别混用。
二、tooltip 自动轮播
监控大屏无人操作,tooltip 要自动轮播展示各数据点,用 dispatchAction:
let idx = 0;
setInterval(() => {
chart.dispatchAction({ type: 'downplay', seriesIndex: 0 });
chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
idx = (idx + 1) % data.length;
}, 3000);
记得在组件销毁时 clearInterval,否则切换页面后定时器还在偷偷跑。
三、性能优化与内存释放
- 大数据量折线开启
sampling: 'lttb'降采样,10 万点也流畅; - 散点/柱状开启
large: true开启大数据模式; - 动画只留入场一次,
animation: false能救回不少低性能播放盒; - 页面卸载时务必
chart.dispose()并解绑事件——7×24 运行的大屏,内存泄漏一天就能卡死; - 多图轮播场景,同一时间只让一个图表处于高动效状态。
四、地图与钻取
- 中国地图用 GeoJSON 注册:
echarts.registerMap('china', geojson),省市区逐级下钻就是换注册的地图实例; - 飞线图(lines + effect)点位控制在 30 条以内,再多就分页轮播,不然视觉变成"一团乱麻";
- 3D 地图与 3D 柱需要 echarts-gl,注意它是 WebGL 渲染,低端播放盒要降级为 2D。
五、高频踩坑 Top 5
- 容器 display:none 时初始化:宽高为 0,图表渲染成一条线——等容器可见后再 init,或先渲染再切换;
- 定时器泄漏:轮播/轮询定时器不清理,切页后越积越多;
- 整屏 1 秒刷新:接口与浏览器双输,数据热度分级才是正解;
- tooltip 遮挡:confine: true 让提示框不出容器边界;
- 字体没等加载完就渲染:自定义字体晚到,画布文字用回退字体且不更新,监听 document.fonts.ready 后再首渲。
这些技巧在 灵境大屏的图表组件 里已经内置:适配、轮播、释放、降级都不需要你操心,配置完选项直接用。
不想跟这些细节搏斗?用内置优化好的图表组件。
查看图表能力 →