Implementing a Pseudo‑3D Map Dashboard with ECharts: Layered Maps, Interaction, and Visual Effects

Background: With rapid development of data visualization, simple charts are no longer enough; we need interactive, visually striking representations that convey unordered data.

Requirement: Build a data cockpit main screen composed of a 3D map, radar chart, and line chart, showing regional metrics and trends, with interactive map and radar.

Analysis: The main view is a 3D map displaying scores per region; interaction includes selecting a region to view its indicators or selecting an indicator to view across regions. Since rotation/zoom are not needed, a pseudo‑3D effect using layered flat maps can be used for fast delivery.

Decomposition: The pseudo‑3D map is built by stacking 3‑4 map layers. The layers include: (1) primary map with five score bands and data, (2) black background with colored borders, (3) transparent overlay with plain borders, and optionally (4) an offset layer to create depth.

Layer 1 code example:

{
name: "浙江",
type: "map",
map: "zhejiang",
zlevel: 99,
aspectScale,
zoom,
layoutCenter,
layoutSize,
roam,
showLegendSymbol: false,
silent: true,
itemStyle: { normal: { /* sth... */ }, emphasis: { areaColor: "transparent" } },
markPoint: { symbol: "none" }
}

Layer 2 code example:

{
map: "zhejiang",
aspectScale,
zoom,
layoutCenter,
layoutSize,
roam,
show: true,
zlevel: 3,
label: { emphasis: { show: false } },
itemStyle: { normal: { /* sth... */ } }
}

Layer 3 code example:

{
map: "zhejiangOverview",
aspectScale,
zoom,
layoutCenter,
layoutSize,
roam,
show: true,
zlevel: 2,
label: { emphasis: { show: false } },
itemStyle: { normal: { /* sth... */ }, emphasis: { areaColor: "transparent" } }
}

To create depth, either add a fourth offset layer (Solution 1) or place a background image beneath the map (Solution 2). The fourth layer adjusts layoutCenter to offset the map and simulate thickness.

Click‑highlight effect is achieved by adding an itemStyle to the clicked region’s data entry. Additional visual flair can be added with an effectScatter series or a regular scatter series using custom images and ripple effects.

Tips: zlevel controls layer order; map refers to the GeoJSON file; visualMap defines color segmentation using piecewise rules (lt, gte, etc.).

Reference: https://echarts.apache.org/zh/index.html