An open API service indexing awesome lists of open source software.

https://github.com/shalom-lab/vslide-old

Making data visualization slides with vue.js
https://github.com/shalom-lab/vslide-old

datavisualisation interactive powerpoint slide-maker tools vue3

Last synced: 5 months ago
JSON representation

Making data visualization slides with vue.js

Awesome Lists containing this project

README

          

Welcome to VSlide πŸ‘‹

Background ε‰εΎ€δΈ­ζ–‡η‰ˆ

With the rapid development of information technology, the era of big data has arrived, and data is increasingly becoming an important production factor in human society. Data visualization, that is, the presentation of data in an intuitive and easy-to-understand form for humans, is an important part of data mining as well as information presentation, and is of great significance for discovering the value behind the data.

VSlide, a web-based data visualization tool, was created to make it easy for the average user to create presentations that support interactive data visualization charts.

# Demo

[vslide.cn](https://vslide.cn)

# Get Started

```sh
npm install
npm run serve
npm run build
```
# Features
## Easy to use
Interactive charts with zero code, click-and-drag operation, push-and-drop layout, no need for any foundation, detailed documentation.
No need to have any basic knowledge. [Easy to use](. /image/vslide-feature-easy.gif)

## Interactive charts
All kinds of charts are available, all charts are interactive

![Interactive charts](./image/vslide-feature-interactive.gif)

## Rich components
In addition to interactive charts, images, tables, text, markdown are also supported.

![interactive-chart](./image/atoms.png)

![component-rich](./image/vslide-feature-atom.gif)

## Flexible layout
18 Γ— 18 grid, free drag and drop, layout at will.
![animation](./image/vslide-feature-drag.gif)

## Powerful features
- Create slideshows in editing mode
- Show slideshows in projection, browse, and document modes, with animation support in projection mode.

![animation](./image/vslide-feature-animate.gif)

## One-click sharing
One-click copy share link to let more people see your work
![Share Manuscript](./image/vslide-file-share.gif)

# Structure
![](./image/vslide-tec.png)
| **name** | **protocol** | **function** |
| --------------- | ---------------- | ------------------- |
| [Vue.js](https://vuejs.org/) | MIT | data-driven |
| [Vuex](https://vuex.vuejs.org/) | MIT | Vue Data Centering Manager |
| [Echarts](https://echarts.apache.org/) | Apache-2.0 | Interactive Visual Charting |
| [Vue-echarts](https://github.com/ecomfe/vue-echarts) | MIT | Vue version of echarts |
| [Vue-grid-layout](https://jbaysolutions.github.io/vue-grid-layout/) | MIT | Layout and typography |
| [Naive UI](https://www.naiveui.com/) | MIT | UI components, form components |
| [md-ediotr-v3](https://imzbf.github.io/) | MIT | Markdown Editor |
| [Animate.css](https://animate.style/) | Hippocratic License | Animation Control |
| [Handsontable](https://handsontable.com/) | | Data Entry |
# Show your support

Give a ⭐️ if this project helped you!