GoView:Start14.6k,上车啦上车啦,Vue3低代码平台GoView,零代码+全栈框架

简介: GoView 是一个Vue3搭建的低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。 它的技术栈为:Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 +VChart + Axios + Pinia2 + PlopJS

GoView:Start14.6k,上车啦上车啦,零代码+全栈框架,Vue3低代码平台GoView,TS4+Pinia2+Echarts5技术链融合实战

项目介绍

GoView 是一个Vue3搭建的低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。 它的技术栈为:Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 +VChart + Axios + Pinia2 + PlopJS

技术栈

  • 前端框架:Vue3,这是目前流行的前端框架之一,提供了良好的开发体验和高效的渲染机制。
  • 类型检查:TypeScript4,为项目提供了静态类型检查,有助于减少运行时错误。
  • 构建工具:Vite2,具有快速的冷启动和热更新特性,能显著提升开发效率。
  • UI库:NaiveUI,一个现代化的UI组件库,提供了丰富的组件以满足各种界面需求。
  • 图表库:ECharts5结合VChart,ECharts是一个强大的图表库,VChart则是其在Vue中的封装,使得图表的使用更加便捷。
  • HTTP请求:Axios,用于发起HTTP请求,获取后端数据。
  • 状态管理:Pinia2,作为Vue的状态管理库,帮助管理应用中的全局状态。
  • 脚手架工具:PlopJS,用于生成项目模板,提高开发初期的效率。

核心功能

GoView是一个功能强大的数据可视化库,主要包含以下核心功能:

1. 多种图表支持

GoView支持多种常见图表类型,如折线图、柱状图、饼图、雷达图等,满足各种数据展示需求。

2. 自定义配置

用户可以根据需求自定义图表的样式、颜色、字体等,让图表更具个性化。

3. 数据实时更新

GoView支持实时数据更新,让图表展示更加动态、实时。

4. 易于集成和使用

GoView提供了简洁的API,使得开发者可以轻松集成到自己的项目中。

应用场景

GoView广泛应用于以下场景:

  • 数据分析报告
  • 仪表盘展示
  • 大屏监控
  • 业务数据可视化

以下是我们对项目内容的详细撰写:

使用方法

1. 安装GoView

git clone https://gitee.com/dromara/go-view

# 安装项目依赖
# 推荐使用 pnpm
pnpm install

# 或 yarn
yarn install

## 启动
# 推荐使用 pnpm
pnpm dev

# 或 yarn
yarn dev

# 或 Makefile(需要自行配置系统环境,谷歌 make 命令环境搭建)
make dev

# 编译
# 推荐使用 pnpm
pnpm run build

# 或 yarn
yarn run build

# 或 Makefile
make dist

2. 创建柱状图

以新增一个柱状图组件为例:

// 公共类型声明
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
// 当前[信息模块]分类声明
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

export const BarCommonConfig: ConfigType = {
 // 唯一key,注意!!!文件夹名称需要修改成与当前组件一致!!!
 key: 'BarCommon',
 // 图表组件渲染 Components 格式: V + key
 chartKey: 'VBarCommon',
 // 配置组件渲染 Components 格式: VC + key
 conKey: 'VCBarCommon',
 // 名称
 title: '柱状图',
 // 子分类目录
 category: ChatCategoryEnum.BAR,
 // 子分类目录
 categoryName: ChatCategoryEnumName.BAR,
 // 包分类
 package: PackagesCategoryEnum.CHARTS,
 // 组件框架类型 (注意!若此 Echarts 图表不支持 dataset 格式,则使用 ChartFrameEnum.COMMON)
 chartFrame: ChartFrameEnum.ECHARTS,
 // 图片 (注意!图片存放的路径必须在 src/assets/images/chart/包分类名称/*)
 // 文件夹名称需要和包分类名称一致: PackagesCategoryEnum.CHARTS
 image: 'bar_x.png'
}

项目展示

以下是GoView创建的一些图表示例:

同类项目比较

1. ECharts

ECharts是一款广泛应用于前端的数据可视化库,支持多种图表类型和丰富的自定义配置。与GoView相比,ECharts主要用于前端,而GoView则专注于后端生成图表。

2. Highcharts

Highcharts是一款基于JavaScript的数据可视化库,提供了丰富的图表类型和交互功能。与GoView相比,Highcharts需要前端有一定的JavaScript基础,而GoView则更易于Go语言开发者使用。

结语

GoView利用这些技术,为用户提供了一个强大且易用的数据可视化开发平台,降低了开发门槛,提高了开发效率。无论是数据分析师、业务人员还是开发人员,都能在GoView中快速搭建出满足需求的数据可视化应用。GoView凭借其丰富的图表类型、简洁的API和易于集成的特点,在数据可视化领域具有广泛的应用前景。希望通过本文的介绍,能让大家对GoView有更深入的了解,并在实际项目中发挥其强大的功能。

项目地址

https://gitee.com/dromara/go-view

相关文章
|
6月前
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持,重构前端开发范式。性能优化与生态协同并进,兼顾易用性与工程化,引领Web开发迈向高效、可维护的新纪元。(238字)
908 139
|
11月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
1268 5
|
6月前
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能,但仍需遵循最佳实践。合理使用 v-if、key、computed,避免深度监听,利用懒加载与虚拟列表,结合打包优化,方可充分发挥其性能优势。(239字)
497 1
|
7月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
802 11
|
6月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
563 0
|
8月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
854 1
|
8月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
455 0
|
9月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
207 0
|
10月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
750 8
|
10月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
635 1

热门文章

最新文章

下一篇
开通oss服务