Design and Implementation of a General‑Purpose Data Visualization Big‑Screen Platform

This article introduces the design ideas and implementation details of a generic big‑screen data‑visualization platform built by the Vivo Internet Big‑Data team.

1. Introduction – Visual big‑screens are a popular way to present large‑scale data in exhibitions, company halls, and product launches. Compared with hand‑crafted charts and dashboards, a universal big‑screen construction platform reduces development cost, centralises data maintenance, and provides real‑time, multi‑dimensional visual monitoring.

2. Quick Overview of Visual Big‑Screens

2.1 What is data visualization? From a technical perspective, front‑end visualization frameworks such as ECharts , AntV , Chart.js , D3.js , and Vega can quickly turn data into charts.

2.2 Main components of a visual big‑screen: visual components + event interaction + coordinate relationships.

2.3 Differences between big‑screen and traditional BI dashboards – big‑screens focus on large‑format projection, dynamic visual effects and animation, while dashboards emphasise interactive data exploration.

3. Design Thinking

3.1 Technology selection

Front‑end framework: React (full family).

Visualization frameworks: ECharts , DataV‑React (highly configurable JSON schema), and D3.js (fine‑grained customisation).

Drag‑and‑drop library: dnd‑kit .

Layout library: React‑Grid‑Layout (grid‑based free layout).

3.2 Architecture – The platform consists of four subsystems:

Visual Material Center – a DSL‑based repository of >40 reusable visual components.

Canvas Editor – the core low‑code editor for layout, interaction and data binding, also supports code‑snippet configuration.

Data Center – connectors for MySQL, ClickHouse, Elasticsearch, Presto, etc.

Management Center – template management, publishing, access control.

3.3 Build Process – The main workflow is illustrated by a flow diagram (big‑screen composition → data acquisition → rendering).

4. Core Feature Implementations

4.1 Adaptive Layout

Background: need to support multiple resolutions without layout breakage.

Two approaches were evaluated:

Using vh , vw , rem with media queries.

Using a custom font.js script to calculate root font‑size and apply rem .

Sample code for the vw/vh method:

// vw vh units – W3C definition
// Example: design width 1920px → 1vw = 19.2px
body,html { font-size: 5.208vw; }

Sample code for the font.js + rem method:

(function(doc, win) {
  const docEl = doc.documentElement;
  const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  const recalc = function() {
    let clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
  };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

When third‑party plugins use px units, CSS‑based scaling may cause overlap; the solution adopted is to apply transform: scale(X, Y) based on container size changes.

4.2 Generic Component Development Workflow

Background: increasing number of visual components makes manual integration cumbersome.

Design: component = component core + schema (configuration protocol) + definition layer (type, hierarchy, default size).

Example of a reusable ECharts wrapper:

const renderNewEcharts = () => {
  const echartObj = updateEChartsOption();
  bindEvents(echartObj, onEvents || {});
  if (typeof onChartReady === 'function') onChartReady(echartObj);
  echartObj.resize();
};

const bindEvents = (instance, events) => {
  const _bindEvent = (eventName, func) => {
    instance.on(eventName, param => func(param, instance));
  };
  for (const eventName in events) {
    if (Object.prototype.hasOwnProperty.call(events, eventName)) {
      _bindEvent(eventName, events[eventName]);
    }
  }
};

const dispose = () => {
  if ($chartEl.current) {
    clear($chartEl.current);
    (echartsLib || echarts).dispose($chartEl.current);
  }
};

4.3 Schema DSL for Component Configuration

A JSON‑based schema defines groups, property types, UI widgets, dependencies, and data bindings. Example snippet:

{
  headerGroupName: '公共配置',
  headerGroupKey: 'widget',
  name: '标题名称',
  valueType: ['string'],
  ui: ['input'],
  css: { width: '50%' },
  dependencies: ['widget,title.show,true'],
  dataV: { key: 'title.text', value: '' }
}

4.4 Drag‑and‑Drop Enhancements

Background: React‑Grid‑Layout does not support free‑form dragging across dimensions.

Solution: rewrite drag events, add lock‑aspect‑ratio, rotation, opacity, and dynamic z‑index handling.

Key code fragment for CSS‑transform based resizing:

if (useCSSTransforms) {
  if (activeResize) {
    const { width, height, handle } = activeResize;
    const clonePos = { ...pos };
    if (["w","nw","sw"].includes(handle)) clonePos.left -= clonePos.width - width;
    if (["n","nw","ne"].includes(handle)) clonePos.top -= clonePos.height - height;
    style = setTransform(clonePos, this.props.angle);
  } else {
    style = setTransform(pos, this.props.angle);
  }
}

4.5 State Push via WebSocket

Background: big‑screens need versioned publishing, hot‑updates and graceful offline.

Solution: a long‑lived WebSocket channel with heartbeat and reconnection to push commands that control screen status.

5. Preview and Summary

The platform demonstrates a low‑code, schema‑driven approach to building data‑intensive visual big‑screens, covering adaptive layout, component reuse, drag‑and‑drop, and real‑time state management. Future work includes expanding component libraries, building a visual material marketplace, and adding 3D/effect rendering engines.