Frontend · Data Visualization · Three.js

Four Production-Ready Data Dashboards from Two npm Packages and a JSON Config

By 柳杉 · Jul 6, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Building a convincing data dashboard demo for a client or stakeholder usually means weeks of custom layout and chart wiring. This approach collapses that to hours by treating the dashboard shell and the 3D map as separate, configurable npm packages, so teams can reuse the same infrastructure across logistics, energy, tourism, and industrial projects without rebuilding the frame each time.

Summary

The `screen-demo` project combines two published npm packages to produce four complete, themed dashboards without writing CSS or layout code from scratch. A 3D map designer based on Three.js handles provincial-level rendering, drill-down, and nine configurable visual layers, while a dashboard scaffold provides drag-and-drop block editing, multi-page routing, and a bottom Dock navigation system. Each dashboard targets a different vertical: smart tourism, logistics parks, industrial equipment monitoring, and low-carbon energy operations.

All visual styling—card backgrounds, title decorations, entry animations—is driven through configuration panels rather than hard-coded styles. The scaffold separates global settings from per-page configs and supports ECharts, 3D maps, and custom business components through a block registration mechanism. A `postinstall` script automatically syncs static assets like GeoJSON and theme images into the public directory, so `npm install && npm run dev` is enough to see all four dashboards running.

The project is a deliberate demonstration of an architecture where generic dashboard and map capabilities live in versioned npm packages, and the business layer contributes only JSON configuration and data bindings. The same two packages can be reused across projects, and the 3D map component can iterate independently of the dashboard shell.

Takeaways

— Two npm packages—a 3D China-map designer and a dashboard scaffold—are wired together to produce four complete industry dashboards from JSON configs alone.

— The 3D map SDK supports nine configurable visual layers: bar charts, flight lines, scatter points, particles, labels, and more, all data-driven through a MapDataInput interface.

— Dashboard layouts, card backgrounds, title decorations, and entry animations are set through a configuration panel; no CSS is written by hand.

— A postinstall script copies GeoJSON and theme assets into the public directory automatically, so the project runs immediately after npm install.

— Multi-page dashboards use a bottom Dock navigation component with configurable footer behavior, demonstrated in the tourism and energy examples.

— The scaffold separates global configuration from per-page configuration and supports block registration for ECharts, 3D maps, and custom business tables.

— An initialRegion property in the map SDK locks the view to a single province, shown in a dedicated Guangdong energy perspective page.

Conclusions

Separating the 3D map engine from the dashboard layout shell into two independently versioned npm packages is the architectural decision that makes the whole demo possible; either piece can be upgraded or swapped without touching the other.

The claim of an 80% delivery efficiency gain is plausible not because the individual components are novel, but because the integration cost—asset syncing, layout wiring, multi-page routing—has been eliminated through convention and automation.

Hard-coding zero CSS and driving all visual styling through a config panel means the same four JSON files could be re-themed for a different client by changing a handful of values, which is a genuine multiplier for agencies and consultancies doing repeated dashboard deliveries.

Concepts & terms

postinstall script

An npm lifecycle hook that runs automatically after `npm install` completes, used here to copy static assets like GeoJSON map data and theme images into the project's public directory so the dashboards render without manual setup.

Block registration mechanism

A plugin-style architecture in the dashboard scaffold that lets developers register custom component types—ECharts charts, 3D maps, business tables—so they become available as draggable blocks in the visual editor.

MapDataInput

The data interface on the 3D map SDK that drives visual layers like bar charts and scatter points; values bound to geographic regions determine the height and color of map overlays.

initialRegion

A configuration property on the 3D map SDK that locks the initial viewport to a specific province or region, used in the energy dashboard to show a dedicated Guangdong-only perspective.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗