shield_lock
JinDaGe
← Back to skills
extension
Category: Data & AnalyticsNo API key required

Slidev Datav Dashboard

Build large-screen data-visualization dashboards (大屏 / 数据大屏 / 可视化大屏) as Slidev presentations using the datav-vue3 (DataV) component library. Use when the user wants a data dashboard

personAuthor: junwugithubclawhub
open_in_newRepositorydownloadDownload package

Slidev × DataV 大屏 (Large-Screen Dashboard) Skill

Build a sci-fi / command-center data dashboard ("大屏") as a Slidev deck, using @kjgl77/datav-vue3 — the maintained Vue 3 port of the classic DataV component library (border boxes, decorations, scroll boards, digital flops, gauges, water-level pools, flyline maps, …).

What this produces

A Slidev project whose slides are full-screen dark dashboards: glowing DataV border-box panels arranged on a 1920×1080 grid, filled with live-updating DataV charts and indicators, that you can present, export to PDF/PNG, or build to a static SPA.

When to use

Trigger on requests like: "用 slidev 做一个 datav 大屏", "make a data dashboard / 数据大屏 / 监控大屏", "command-center visualization screen", "DataV border box + charts deck", "可视化大屏 with Slidev".

⚠️ The one rule that makes Slidev + DataV work

DataV's FullScreenContainer scales itself to window and fights Slidev's own canvas transform — never use it inside a slide. Instead, let Slidev do the scaling:

# deck headmatter (first slide)
canvasWidth: 1920      # design at 1920 px wide …
aspectRatio: '16/9'    # … → 1080 px tall; Slidev auto-fits it to any screen

Then design every panel against 1920×1080 absolute coordinates (a grid or absolute positioning) on a dark, full-bleed layout. Slidev rescales the whole canvas to fit the viewport on present/export. See references/slidev-integration.md.

The second rule: every DataV component needs an explicit width & height from its container (style="width:100%;height:100%" inside a sized panel, or explicit px). A box with no height renders blank.

Workflow

  1. Scaffold a pre-wired Slidev project: bash scripts/init-dashboard.sh my-dashboard → cd my-dashboard && npm run dev. (This copies the assets/ wiring + the example deck and runs npm install.)
  2. Pick a palette + layout archetype from references/design-rules.md (dark base, 60/30/10 color split, center-focus / three-column). Set CSS vars in styles/dashboard.css.
  3. Place panels on the DashGrid using the DashPanel wrapper (a titled DataV border box). Choose border boxes & decorations from references/components.md.
  4. Bind data: give each DataV chart its :config / :option reactive object (verified shapes in references/components.md). Update data by replacing the object/array, not mutating.
  5. Preview & export: npm run dev to iterate; npm run export (PDF/PNG) or npm run build (static SPA). See troubleshooting for crisp exports & SSR notes.

Quick start (manual, without the script)

npm init slidev@latest        # or: npm i -D @slidev/cli @slidev/theme-default vue
npm i @kjgl77/datav-vue3
# then copy these from this skill's assets/ into the project:
#   assets/setup/main.ts        -> setup/main.ts        (registers DataV globally + loads CSS)
#   assets/vite.config.ts       -> vite.config.ts       (optimizeDeps / SSR for DataV)
#   assets/layouts/dashboard.vue.md-> layouts/dashboard.vue.md (dark full-bleed layout)
#   assets/styles/dashboard.css -> styles/dashboard.css  (palette vars + panel styling)
#   assets/components/*.vue.md     -> components/           (DashPanel, DashGrid)
# set headmatter: canvasWidth: 1920, aspectRatio: '16/9', then build slides.md

Global registration (already in assets/setup/main.ts):

import { defineAppSetup } from '@slidev/types'
import DataVVue3 from '@kjgl77/datav-vue3'
import '../styles/dashboard.css'

export default defineAppSetup(({ app }) => {
  app.use(DataVVue3)   // registers DvBorderBox1…13, DvDecoration1…12, DvScrollBoard, DvCharts, …
})

Files in this skill

| Path | Read it when you need… | | --- | --- | | references/components.md | The full catalog of all 39 DataV components — tag names, props, config/option shapes, copy-paste examples, and which one to pick. | | references/design-rules.md | 大屏 design spec: dark theme, 60/30/10 color rule, 3 ready palettes, layout archetypes + wireframes, typography (numeric fonts), grid & spacing. | | references/slidev-integration.md | Wiring & scaling recipe: headmatter, setup/main.ts, custom layout, grid vs absolute placement, exporting, SSR/onMounted notes, the FullScreenContainer gotcha. | | references/troubleshooting.md | Symptom → fix table: blank/0-height components, charts not updating, fonts, build/SSR errors, blurry exports, overflow. | | assets/ | Copy-paste-ready project files: setup/main.ts, vite.config.ts, layouts/dashboard.vue.md, styles/dashboard.css, components/DashPanel.vue.md, components/DashGrid.vue.md. | | templates/slides.example.md | A complete, runnable "城市运营监控大屏" deck — the reference example to copy and adapt. | | templates/package.json | Dependency + scripts template (dev / build / export). | | scripts/init-dashboard.sh | One command that assembles all of the above into a fresh, runnable Slidev project. |

Component cheat-sheet (full details in references/components.md)

All components are registered globally with a Dv prefix; kebab-case (<dv-border-box-13>) and PascalCase (<DvBorderBox13>) both resolve.

  • Border (13): DvBorderBox1 … DvBorderBox13 — props :color="[main, sub]", backgroundColor.
  • Decoration (12): DvDecoration1 … DvDecoration12 — props :color, some reverse / dur.
  • Data / charts (Other): DvDigitalFlop (翻牌器), DvScrollBoard (轮播表), DvScrollRankingBoard (排名), DvCapsuleChart (胶囊柱), DvActiveRingChart (动态环), DvWaterLevelPond (水位), DvPercentPond (进度池), DvConicalColumnChart (锥形柱), DvCharts (通用图表，传 :option), DvFlylineChart / DvFlylineChartEnhanced (飞线地图), DvLoading, DvButton, DvFullScreenContainer (⚠️ standalone apps only — not inside Slidev slides).