1. Project Overview

DataV Vue

A data visualization application builder.

2. Open Source License

Licensed under MIT

3. Screenshots

Example

4. Feature Overview

CheckList

- Page Features
- [x] Login Page
  * [x] Mascot
- [x] Home Page
  * [x] Visual Management
    - [x] Templates
  * [ ] Data Management
  * [ ] Component Management
  * [ ] Examples & Tutorials
- [x] Editor
  * [x] Layer Panel
  * [x] Component Panel
  * [x] Configuration Panel
    - [x] Canvas Properties Panel
    - [x] Component Properties Panel
    - [x] Component Data Panel
    - [x] Component Interaction Panel
  * [x] Canvas / Context Menu / Keyboard Shortcuts
    - [x] Screenshot / Ruler / Guides / Component Dragging / Layout Scaling
    - [x] Bring to Front / Send to Back / Move Up One Layer / Move Down One Layer / Unlock / Lock / Show / Hide / Rename / Copy / Delete
    - [x] Undo / Redo
    - [x] Select Multiple Components / Group / Ungroup
  * [x] Other
    - [x] Filter Configuration
    - [x] Save / Preview / Publish

- Basic Component Library
- [ ] Bar Charts
  * [x] Basic Bar Chart
  * [ ] Curved Bar Chart
  * [ ] Line Bar Chart
  * [ ] Basic Horizontal Bar Chart
- [ ] Line Charts
  * [x] Basic Line Chart
  * [ ] Area Chart
- [ ] Pie Charts
  * [ ] Basic Pie Chart
  * [ ] Metric Proportion Chart
- [ ] Relationships
  * [ ] Tree Chart
- [ ] Maps
  * [x] Basic Flat Map of China
    - [x] Regional Heatmap Layer
    - [x] Dynamic Bubble Layer
    - [x] Flight Path Layer
  * [ ] Basic Flat Map
  * [ ] 3D Flat Map
  * [ ] 3D Globe
- [x] Text & Titles
  * [x] General Title
  * [x] Number Flip Counter
  * [x] Marquee
  * [x] Multiline Text
  * [x] Clock
  * [x] Word Cloud
- [x] Lists
  * [x] Carousel List
  * [x] Carousel Bar Chart
- [x] Media
  * [x] Single Image
  * [x] Decorations
  * [x] Borders
  * [x] Custom Background
- [ ] Controls
  * [x] Fullscreen Toggle
  * [ ] Tab List
  * [ ] Progress Bar
- [x] Other
  * [x] Date Picker

5. Tech Stack

• Vue 3.0+
• Vite 3.0+
• Pinia 2.0+
• TypeScript 4.0+
• ECharts 5.0+

Installation and Usage

# Initialize the project
pnpm run bootstrap

# Start the development server!
pnpm run dev

# Build for production
pnpm run build

# Preview locally (run build first)
pnpm run serve

Create a New Visualization Component

pnpm run new datav

Configure a Visualization Component

Directory structure (e.g., main-title):

main-title
├── index.ts             # Component entry point
└── src
    ├── index.vue        # Component entry point
    ├── main-title.ts    # Component declaration class
    ├── config.vue       # Component property configuration
    └── config.json      # Configuration file used to generate config.vue

Using the Component

Open file src/data/system-components.ts, find or add the corresponding component node:

{
  name: '',
  alias: '',
  used: true, // Set to true to enable
  // ...
}

Use the DataV-CLI-UI tool

Among them, the config.vue and config.json file can be configured using the datav-cli-ui tool. For more details ».

• Tool Preview

More Creation Options

• Via Options Mode
• 
  

# Create a Component
pnpm run new component

# Create a Store
pnpm run new store

# Create Icons
pnpm run new icons

Internationalization

Currently, only the Login Page has internationalization configured. You can add more languages as needed.

Add Multiple Languages

Multilingual file location:@/locales/lang/*.js

Usage

• Options API：
• 
  

<template>
  ...
    {{ $t('xxx') }}
  ...
</template>

• Componsition API：
• 
  

import { useI18n } from 'vue-i18n'

...
setup() {
  const { t } = useI18n({ useScope: 'global' })

  t('xxx')

  return { t }
}
...