DataV Vue 一个基于 Vue3.x 的数据可视化(DataV)项目

Overview

DataV Vue


一个基于 Vue3.x 的数据可视化项目

  • 💪 Vue 3.0+
  • 🔥 TypeScript 4.2+
  • 🔥 ECharts 5.0+

简介

预览

因为项目中的 Mock 服务来自于 http://rap2api.taobao.org, 而该服务不支持 HTTPS, 还有的浏览器会强制使用 HTTPS, 所以如果出现了无法登录的情况, 请检查当前访问的URL是什么协议!

登录页

登录页

可视化列表&编辑器

可视化列表 编辑器

CheckList

  • 页面功能

  • 登录页

    • 看板娘
  • 首页

    • 可视化管理
      • 模板
    • 数据管理
    • 组件管理
    • 示例&教程
  • 编辑器

    • 图层面板
    • 组件面板
    • 配置面板
      • 画布属性面板
      • 组件属性面板
      • 组件数据面板
      • 组件交互面板
    • 画布/右键菜单/快捷键
      • 截屏/标尺/参考线/组件拖拽/缩放布局
      • 置顶/置底/上移一层/下移一层/解锁/锁定/显示/隐藏/重命名/复制/删除
      • 框选组件/组合/拆分/撤销/恢复
    • 其他
      • 保存/预览/发布
  • 基础组件库

  • 柱图

    • 基本柱状图
    • 弧形柱图
    • 折线柱图(多)
    • 折线柱图
    • 水平基本柱状图
  • 折线

    • 基本折线图
    • 区域图
  • 饼图

    • 基本饼图
    • 指标占比图
  • 地图

    • 基础平面地图
      • 动态气泡层
      • 飞线层
    • 世界地图
  • 文本标题

    • 通用标题
    • 数字翻牌器
    • 跑马灯
    • 词云
    • 多行文本
    • 进度条
    • 时间器
  • 列表

    • 轮播列表
    • 轮播列表柱状图
  • 关系

    • 树图
  • 媒体

    • 单张图片
  • 素材

    • 装饰
    • 边框
    • 自定义背景
  • 交互

    • Tab列表
    • 全屏切换
    • Tab选择器
    • 日期选择器

安装与使用

# 初始化项目
yarn bootstrap

# 跑起来!
yarn serve

# 构建发布
yarn build

新建可视化组件

yarn new datav

配置可视化组件

目录结构 (如: main-title):

main-title
├── index.ts             # 组件入口
└── src
    ├── index.vue        # 组件入口
    ├── main-title.ts    # 组件声明类
    ├── config.vue       # 组件属性配置
    └── config.json      # 用于生成 config.vue 的配置文件

使用工具

其中 config.vueconfig.json 文件,可以在 development 模式下,通过访问 http://localhost:9090/#/dev/props-config 配置生成。

目前还是个简易版生成工具,需要手动将生成的模板代码,复制粘贴到一个新建文件中。

工具预览

prop-config

更多新建选项

  • 快速创建一个组件
yarn gc [component name]
  • 通过选项模式
# 创建组件
yarn new component

# 创建 Store
yarn new store

Git提交模板

yarn cz

例子:

[TYPE](SCOPE):DESCRIPTION#[ISSUE]
# example feat(button): add type 'button' for form usage #1234

Git提交模板配置:./commitlint.config.js

国际化

目前只有 登录页 进行了国际化设置,有需要可自行添加。

添加多语言

多语言文件位置:@/locales/lang/*.js

使用

  • 在模板中使用:
<template>
  ...
    {{ $t('xxx') }}
  ...
template>
  • Componsition:
import { useI18n } from 'vue-i18n'

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

  t('xxx')

  return { t }
}
...

注意

本项目主要用来研究与学习,如果商用请注意:项目里含有一些第三方付费素材,如:orbitron-bold 字体。

Issues
vue3-chart-v2 is a wrapper for Chart.js in vue 3. You can easily create reuseable chart components. Inspired by vue-chartjs

vue3-chart-v2 vue3-chart-v2 is a wrapper for Chart.js in Vue 3. You can easily create reuseable chart components. Inspired by vue-chartjs Looking for

Vu Tran 19 Jun 14, 2021
Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable

Alexandru Ghiura 21 Jun 7, 2021
Vue 3 component wrapper for Highcharts.js

Vue 3 - Highcharts JS A simple, fast, Vue 3 component for rendering Highcharts.js Charts written using the composition API. Demos https://smithalan92.

Alan Smith 29 Jun 8, 2021
Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables

jQWidgets Vue Components Demos You can view them online here: https://www.jqwidgets.com/vue/. Build modern Web Apps with jQWidgets and Vue. jQWidgets

jQWidgets 50 May 31, 2021
📊📈 ECharts wrapper component for Vue 3 and 2

简体中文 | English ECharts For Vue ?? ?? ECharts wrapper component for Vue 3 and 2 Features Support for Vue 3 and 2; Conform to the habits of Vue and ECha

null 49 Jun 12, 2021
Simple and lightweight vue chart component without using chart library dependencies

Pure Vue Chart A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies

Danny Jackson 53 May 10, 2021
📊 Vue.js wrapper for Chart.js

vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Demo & Docs ?? Demo ?? Docs Compatibility

Jakub 4.3k Jun 12, 2021
Create beautiful JavaScript charts with one line of Vue

Vue Chartkick Create beautiful JavaScript charts with one line of Vue See it in action Supports Chart.js, Google Charts, and Highcharts Quick Start Ru

Andrew Kane 684 Jun 3, 2021
Apache ECharts component for Vue.js.

Uses Apache ECharts 5 and works for both Vue.js 2/3.

Baidu EFE team 6.1k Jun 14, 2021
Apache ECharts component for Vue.js.

Vue-ECharts Vue.js component for Apache ECharts. ???? 中文版 Uses Apache ECharts 5 and works for both Vue.js 2/3. ?? Heads up ?? If your project is using

Baidu EFE team 6.1k Jun 14, 2021
Lightweight Vue component for drawing pure CSS donut charts

vue-css-donut-chart Lightweight Vue component for drawing pure CSS donut charts Live demo Live demo can be found on the project page – https://dumptyd

Saad 110 Jun 10, 2021
Base on Vue2.0 wrapper for ChartJs. (Deprecated)

Deprecated Package ?? This package is no longer maintain. ?? vue-charts Base on Vue2, wrapper for ChartJs. Vue js Chart js Work well with Laravel Rend

Gimmy 367 May 21, 2021
:bar_chart: Highcharts component for Vue

vue-highcharts Highcharts component for Vue. Requirements Vue >= 3.0.0 Highcharts >= 4.2.0 Installation npm i -S vue-highcharts For Vue 2, please run

Zhenye Wei 406 Jun 4, 2021
TradingVue.js is a hackable charting lib for traders

TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

TVJS 1.2k Jun 13, 2021