Vela LowCode UI Component Library - Data visualization components for Vue 3
npm install @vela-studio/uiVela LowCode UI Component Library - 数据可视化组件库 for Vue 3
基于 Vue 3 + TypeScript + ECharts 的数据可视化大屏组件库,提供开箱即用的图表、KPI、布局等50+组件。
- 🎨 50+ 组件 - 图表、KPI、布局、表单控件等开箱即用
- 📊 ECharts 集成 - 深度封装 ECharts,支持所有图表类型
- 🎯 TypeScript - 完整的类型定义
- 🌳 Tree-shaking - 按需引入,减小打包体积
- 🔧 灵活配置 - 扁平化属性接口,易于低代码平台集成
``bash`
npm install @vela/ui或
pnpm add @vela/ui或
yarn add @vela/ui
`typescript
import { createApp } from 'vue'
import VelaUI from '@vela/ui'
import '@vela/ui/dist/style.css'
const app = createApp(App)
app.use(VelaUI)
`
`vue
`
- lineChart - 折线图barChart
- - 柱状图pieChart
- - 饼图doughnutChart
- - 环形图radarChart
- - 雷达图gaugeChart
- - 仪表盘funnelChart
- - 漏斗图scatterChart
- - 散点图sankeyChart
- - 桑基图stackedBarChart
- - 堆叠柱状图
- vText - 文本vStat
- - 统计卡片vCountUp
- - 数字滚动vProgress
- - 进度条vBox
- - 信息盒子
- vRow / vCol - 栅格布局vFlex
- - Flex 布局vGrid
- - Grid 布局vPanel
- - 面板vTabs
- - 标签页vModal
- - 弹窗vGroup
- - 组件组合
- vTable - 表格vList
- - 列表vTimeline
- - 时间线vCardGrid
- - 卡片网格vPivot
- - 透视表
- vSelect - 下拉选择vDateRange
- - 日期范围vSlider
- - 滑块vSwitch
- - 开关vSearchBox
- - 搜索框vButtonGroup
- - 按钮组vCheckboxGroup
- - 复选框组vPagination
- - 分页vBreadcrumb
- - 面包屑vNavButton
- - 导航按钮
- vImage - 图片vVideo
- - 视频vHtml
- - HTML 内容vMarkdown
- - MarkdownvIframe
- - 内嵌页面
- vScripting - 脚本执行vState
- - 状态管理vTrigger
- - 事件触发器
本组件库专为低代码平台设计,所有组件支持 JSON Schema 配置:
`typescript``
// 组件可以通过 JSON 配置驱动
const componentConfig = {
componentName: 'lineChart',
props: {
data: [120, 200, 150],
color: '#409EFF',
},
style: {
width: 400,
height: 300,
},
}
完整文档请访问:https://visual-lib-docs.vercel.app/
- Vela LowCode Editor - 基于本组件库的低代码平台
MIT