Technical Guide to Building a Real-Time Data Visualization Dashboard with Echarts and Java Backend

Data visualization dashboards have become popular, prompting many enterprises to seek impressive, customizable large‑screen cockpit solutions.

1. Effect Mockups

The article showcases animated real‑time data updates and a right‑click theme switch feature, illustrated with several screenshots.

2. Requirement Specification

Key requirements include determining the LED screen resolution (based on a 16:9 aspect ratio, full‑screen F11 display) and a deployment method that uses a portable executable supporting Windows, Linux, and macOS without additional dependencies. Users can view the dashboard locally or via a browser such as Chrome or 360.

3. Overall Architecture Design

Front end built with the open‑source Echarts library, developed in WebStorm.

Back end implemented in Java Web, using IntelliJ IDEA.

Data exchange format: JSON.

Data source: initially JSON files, with optional MyBatis support for PostgreSQL, MySQL, Oracle, SQL Server, SQLite, and POI for Excel; HTTP API integration is also possible.

Data update mechanism: HTTP GET polling, with optional real‑time push from the back end.

Advertisement: JetBrains full‑suite license promotion (56 CNY per year).

4. Development Configuration & Code Structure

4.1 Java Development Environment

Images illustrate the required Java environment setup.

4.2 JSON Library Configuration

The project uses Alibaba's FastJSON library; add the following dependency to pom.xml:

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.51</version>
</dependency>

4.3 Code Structure Explanation

a. Static Resources – illustrated with a screenshot.

b. Java Directory – illustrated with a screenshot.

c. Port Configuration – illustrated with a screenshot.

4.4 Startup Command

A screenshot shows the command used to launch the application.

4.5 Browser Access

Open a browser and navigate to http://localhost:<port> (the port is defined in application.properties) to view the dashboard.

5. Source Code Acquisition

The article provides a QR code for adding a WeChat contact; after adding, users can request the source code for free.