All Projects → miyuesc → vue-data-visualization

miyuesc / vue-data-visualization

Licence: Apache-2.0 License
基于Vue3.0的“数据可视化大屏”设计与编辑器

Programming Languages

typescript
32286 projects
Vue
7211 projects
SCSS
7915 projects

Projects that are alternatives of or similar to vue-data-visualization

Vueuse
Collection of essential Vue Composition Utilities for Vue 2 and 3
Stars: ✭ 7,290 (+8578.57%)
Mutual labels:  vue3, vue-next
codemirror-editor-vue3
CodeMirror component for Vue3
Stars: ✭ 22 (-73.81%)
Mutual labels:  vue3, vue-next
vue3.0-template-admin
本项目基于vue3+ElementPlus+Typescript+Vite搭建一套通用的后台管理模板;并基于常见业务场景,抽象出常见功能组件;包括动态菜单,菜单权限、登录、主题切换、国际化、个人中心、表单页、列表页、复制文本、二维码分享等等
Stars: ✭ 500 (+495.24%)
Mutual labels:  vue3, vue-next
vue-next-rx
RxJS integration for Vue next
Stars: ✭ 31 (-63.1%)
Mutual labels:  vue3, vue-next
vue3-jd-h5
🔥 Based on vue3.0.0, vant3.0.0, vue-router v4.0.0-0, vuex^4.0.0-0, vue-cli3, mockjs, imitating Jingdong Taobao, mobile H5 e-commerce platform! 基于vue3.0.0 ,vant3.0.0,vue-router v4.0.0-0, vuex^4.0.0-0,vue-cli3,mockjs,仿京东淘宝的,移动端H5电商平台!
Stars: ✭ 660 (+685.71%)
Mutual labels:  vue3, vue-next
Iconpark
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Stars: ✭ 4,924 (+5761.9%)
Mutual labels:  vue3, vue-next
vue-cookie-next
A vue 3 plugin for handling browser cookies with typescript support. Load and save cookies within your Vue 3 application
Stars: ✭ 37 (-55.95%)
Mutual labels:  vue3, vue-next
vuse-rx
Vue 3 + rxjs = ❤
Stars: ✭ 52 (-38.1%)
Mutual labels:  vue3, vue-next
bpmn-vue-activiti
基于Vue3.x + Vite + bpmn-js + element-plus + tsx 实现的Activiti流程设计器(Activiti process designer based on Vue3.x + Vite + BPMN-JS + Element-Plus + TSX implementation)
Stars: ✭ 345 (+310.71%)
Mutual labels:  vue3, vue-next
vue3-analysis
vue3源码解释😃
Stars: ✭ 120 (+42.86%)
Mutual labels:  vue3, vue-next
vite-analysis
出最新版本的全部源码分析中...(换了m1芯片arm64架构的电脑,旧版本无法运行,如esbuild Chromium)
Stars: ✭ 138 (+64.29%)
Mutual labels:  vue-next
xForm
基于[email protected]的动态表单生成器。
Stars: ✭ 25 (-70.24%)
Mutual labels:  vue3
vuejs3-datepicker
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
Stars: ✭ 23 (-72.62%)
Mutual labels:  vue3
giantgo-render
基于vue3 element plus的快速表单生成器
Stars: ✭ 28 (-66.67%)
Mutual labels:  vue3
tutorial-photo-gallery-vue
Photo Gallery Tutorial: Ionic Vue and Capacitor
Stars: ✭ 33 (-60.71%)
Mutual labels:  vue3
ak-vue3
组件库包含了 AutoForm 自动表单、BackTop 返回顶部、Breadcrumb 面包屑、 Button 按钮、Cascader 级联选择器、Checkbox 多选框、Collapse 折叠面板、ColorPicker 颜色选择器、DataPicker 时间选择器、Dialog 弹层对话框、Alert 弹框、Echarts 图形图表、Form 表单、Input 输入框、Lazy 图片延时加载、Loading 加载等待、Menu 菜单、Pagination 分页、Progress 进度条、Radio 单选框、Select 选择器、Steps 步骤条、Swiper 图片轮播、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 提示、Tr…
Stars: ✭ 24 (-71.43%)
Mutual labels:  vue3
vite-example
Todo app with vite/vue3/vue-router4
Stars: ✭ 22 (-73.81%)
Mutual labels:  vue3
variantwind
Most elegant way to work with TailwindCSS variants in Vue
Stars: ✭ 45 (-46.43%)
Mutual labels:  vue3
vue-snippets
Visual Studio Code Syntax Highlighting For Vue3 And Vue2
Stars: ✭ 25 (-70.24%)
Mutual labels:  vue3
mdue
5,400+ Material Design Icons for Vue 3 from the Community
Stars: ✭ 27 (-67.86%)
Mutual labels:  vue3

Vue 3 Data Visualization

项目简介

GitHub stars GitHub stars

star fork

本项目为个人项目, 主要使用 Vue 3, Echarts 5, Element Plus 进行开发. 使用原生 JavaScript 实现元素的拖拽与缩放.

该项目主要为实现通用的可视化大屏的简单配置, 对于特殊图表仍然需要二次开发.

项目预览: https://miyuesc.github.io/data-visualization/

国内同步镜像: https://miyuesc.gitee.io/data-visualization/

预览地址可能会存在版本不符的问题, 建议下载运行

主要功能

  • ECharts常用图表
  • 标题单位
  • 组件拖拽/缩放
  • 边框背景
  • 图表坐标轴配置
  • 图例设置
  • 画布整体缩放
  • 组件层级调整
  • 组件图层列表
  • 常用形状组件
  • 标题/文字组件
  • 图表的不同设置
  • 高德地图组件
  • 常用列表/轮播/数字动画等组件
  • 预览/导出json
  • 数据源配置
  • ...

使用

1. 下载或克隆该项目到本地

git clone https://github.com/miyuesc/vue-data-visualization.git -b main

2. 安装依赖

// yarn run install
npm run install

3. 运行预览

// yarn run build
npm run build

运行预览

1. 初始界面

image-20210705145317801

2. 拖拽效果

image-20210705145333404

3. 标题与单位配置

image-20210705145411569

4. 背景边框配置

image-20210705145621180

5. X轴/Y轴配置

image-20210705145838804

6. 图层管理与锁定

image-20210705145932618

友情赞助

偷偷丢个赞赏码吧~~~~

微信:如果对您有帮助,您可以请我喝杯咖啡~~

支付宝:如果对您有帮助,您可以请我喝杯咖啡~~

学习交流

如果您觉得这些文章对您有帮助,想和我一起学习,欢迎您关注我的微信订阅号。

订阅号名称:前端小白MiyueFE

订阅号:前端小白MiyueFE

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].