数据大屏.

剥离冰冷图表,注入人文关怀,为决策层呈现实时准确且极具温度的数据脉络。

Vue.js 3 WebGL TypeScript WebSocket

01 / Challenge

传统的 ToB 数据大屏多采用深蓝科幻风,长期盯着看容易视觉疲劳。此外,大批量动态数据引发的跳帧问题使得体验极度僵硬。

我们需要消除多余的 DOM 节点,并用一层温柔平滑的视觉外衣去包裹庞杂的数据库逻辑。

02 / Solutions

引入 WebGL 替代老旧的 SVG,并且选用了一套带有微量大地色的主题。数据高亮区域用温暖的日落色进行强调,使分析师在看图表时感觉到一种安静与沉淀。

使用 Worker 线程静默解析 WebSocket 数据流,把主线程留给那 60fps 宛如水流般顺滑的 ECharts 交互渲染动画。