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