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

项目介绍

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

GoView:Start14.6k,上车啦上车啦,Vue3低代码平台GoView,零代码+全栈框架的更多相关文章

  1. vue3+node全栈项目部署到云服务器

    一.前言 最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和 ...

  2. 【electron+vue3+ts实战便笺exe】一、搭建框架配置

    不要让自己的上限成为你的底线 前言 诈尸更新系列,为了跟上脚步,尝试了vue3,在学习vue3的时候顺便学习一手electron和ts,本教程将分别发布,源码会在最后的文章发布.因为还在开发中,目前也 ...

  3. 从零搭建vue3.0项目架构(附带代码、步骤详解)

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完 ...

  4. AgileBoot - 手把手一步一步带你Run起全栈项目(SpringBoot+Vue3)

    AgileBoot是笔者在业余时间基于ruoyi改造优化的前后端全栈项目. 关于AgileBoot的详细介绍:https://www.cnblogs.com/valarchie/p/16777336. ...

  5. nodejs的精简型和全栈型开发框架介绍

    总体来说你可以将Node.js开发框架归结为两类: - 精简型框架 - 全栈型框架 下面我们就对这两种框架进行探讨. 精简型框架 精简型框架提供的是最基本的功能和APIs,这类框架本身就是被设计成用来 ...

  6. Vue3.0 响应式数据原理:ES6 Proxy

    Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...

  7. 【electron+vue3+ts实战便笺exe】二、electron+vue3开发内容

    不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近6000字.为了水文的嫌疑,只挑了重点的地方讲,比如component内的组件就挑了右键弹窗去说明,建议在看本文的时候边查看项目,有不懂 ...

  8. Vue3学习(六)之使用Vue3进行数据绑定及显示列表数据

    一.写在前面 说来还是比较惭愧的,从周二开始事就比较多,周三还电脑坏了,然后修电脑等等一些杂事,忙的团团转,因为周二.周三自己走的过多了,导致不敢直腰,周四卧床一天. 之前都听说<陈情令> ...

  9. 为什么 Vue3.js / Element+ 组件属性前面有的需要添加冒号,有的不需要?

    背景 使用 Element+ Layout 布局: <el-row> <el-col :span="12"><div class="grid ...

  10. 基 vue-element-admin升级的Vue3 +TS +Element-Plus 版本的后端管理前端解决方案 vue3-element-admin 正式对外发布,有来开源组织又一精心力作,毫无保留开放从0到1构建过程

    项目简介 vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案,是 有来技术团队 继 youla ...

随机推荐

  1. 十二. Redis 集群操作配置(超详细配图,配截图详细说明)

    十二. Redis 集群操作配置(超详细配图,配截图详细说明) @ 目录 十二. Redis 集群操作配置(超详细配图,配截图详细说明) 1. 为什么需要集群-高可用性 2. 集群概述(及其搭建) 3 ...

  2. Luogu P8112 [Cnoi2021] 符文破译 题解 [ 蓝 ] [ KMP ] [ 线性 dp ] [ 决策单调性 dp ]

    符文破译:KMP + dp 的好题. 暴力 dp 不难打出一个暴力 dp:设计 \(dp_i\) 表示当前前 \(i\) 位全部完成了匹配,所需的最小分割数. 转移也是简单的,我们在 KMP 的过程中 ...

  3. Linux驱动---设备驱动模型

    目录 一.简介 二.驱动模型 2.1.总线 2.2.设备 2.3.驱动 三.设备树 3.1.设备树简介 3.2.设备树格式 3.3.节点格式 3.4.节点属性 四.设备树API函数 4.1获取设备节点 ...

  4. 百万架构师第四十一课:RabbitMq:可靠性投递和实践经验|JavaGuide

    来源:https://javaguide.net RabbitMQ 2-可靠性投递与生产实践 可靠性投递 ​ 首先需要明确,效率与可靠性是无法兼得的,如果要保证每一个环节都成功,势必会对消息的收发效率 ...

  5. ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this

    mysql操作错误: mysql> use mysql;ERROR 1820 (HY000): You must reset your password using ALTER USER sta ...

  6. 【BUUCTF】AreUSerialz

    [BUUCTF]AreUSerialz (反序列化) 题目来源 收录于:BUUCTF 网鼎杯 2020 青龙组 题目描述 根据PHP代码进行反序列化 <?php include("fl ...

  7. Flink学习(十七) Emitting to Side Outputs(侧输出)

    我们在生产实践中经常会遇到这样的场景,需把输入源按照需要进行拆分,比如我期望把订单流按照金额大小进行拆分,或者把用户访问日志按照访问者的地理位置进行拆分等.面对这样的需求该如何操作呢? 大部分的Dat ...

  8. 关于我在使用Steamlit中碰到的问题及解决方案总结

    Steamlit 并不支持一个可以预览本地文件的路径选择器(并不上传文件) 解决方案:使用 Python 自带的 tkinter 来完成 参考:[Streamlit 选择文件夹的曲折方案]Stream ...

  9. 震撼揭秘:LLM幻觉如何颠覆你的认知!

    LLM幻觉 把幻觉理解为训练流水线中的一种涌现认知效应 Prashal Ruchiranga Robina Weermeijer 在 Unsplash 上的照片 介绍 在一个名为<深入剖析像Ch ...

  10. Postman 提示{"msg":"JSON parse error: Unexpected character (' ' (code 160))

    报错提示{"msg":"JSON parse error: Unexpected character (' ' (code 160)) 解决方案: json 格式选择be ...