How to Build a Stunning Vue3 + ECharts Dashboard with Interactive Maps

Project Background

Recently I had some free time and decided to start a side project. After browsing PDD for a while, I bought a UI design and built a large screen dashboard based on it.

Project Repository

GitHub:

github.com/leixq1024/sd-tourism-dashboard-open

Online Preview

The preview address is a Vercel URL; if you cannot access it without a proxy, run the project locally.

Online preview: sd-tourism-dashboard-open.vercel.app/

Technology Stack

Vue 3.5.13 – Frontend framework

TypeScript 5.7.2 – Type safety

Vite 6.1.0 – Build tool

ECharts 5.6.0 – Data visualization

Sass 1.89.2 – CSS preprocessor

Vue3-scroll-seamless 1.0.6 – Seamless scrolling

autofit.js 3.2.8 – Screen‑resolution adaptation

vue3-odometer 0.1.3 – Numeric flip effect

The project mainly combines vue3 and echarts to create various charts. Below are some module implementation ideas.

Some Module Implementations

Middle Map

DataV address: datav.aliyun.com/portal/school/atlas/area_selector?spm

First obtain the geo data for the region; in this example we need Shandong province.

Open DataV, locate the required administrative area, and download its geojson file.

After downloading, register the geojson data with ECharts and configure the geo options.

import * as echarts from 'echarts'
import sdData from '@/assets/data/山东省'
echarts.registerMap('sd', sdData as any)

{
    geo: [
        {
            map: 'sd',
            aspectScale: 0.85,
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            z: 12,
            emphasis: { disabled: true },
            itemStyle: {
                normal: {
                    borderColor: 'rgb(180, 137, 81)',
                    borderWidth: 8,
                    shadowColor: 'rgba(218, 163, 88, 0.4)',
                    shadowBlur: 20
                }
            }
        }
    ]
}

The rendered map is initially flat. To achieve a pseudo‑3D effect, stack multiple map layers with different layoutCenter values.

By overlaying several layers, each with a distinct layoutCenter, a visually three‑dimensional map is created.

Full implementation code is available in the GitHub repository; here only the overall approach is described.

Bottom Numeric Font and Carousel

The bottom numbers use a digital‑display style font, added via @font-face in CSS.

The numeric carousel is implemented with vue3-odometer, which is easy to configure and requires minimal setup.

Other charts are more conventional; refer to the source code for details.

Conclusion

Although the dashboard consists of a single page, many chart configurations are required. Future plans include developing a mini backend management system using Node to handle dashboard data, serving as a Node backend practice.