Go-View 数据可视化大屏使用手册

📋 项目概述

Go-View 是一款基于 Vue3 + TypeScript 开发的低代码数据可视化大屏开发工具，采用拖拽式操作，无需编写代码即可快速创建炫酷的数据大屏。

🎯 核心特性

• 🎨 可视化编辑器：拖拽式组件配置，所见即所得
• 📊 丰富图表组件：支持 ECharts、VChart 等主流图表库
• 🌈 主题定制：支持深色/浅色主题切换
• 📱 响应式设计：自适应不同屏幕尺寸
• 🔧 低代码配置：通过 JSON 配置快速构建大屏

🚀 快速开始

环境要求

环境	版本要求
Node.js	≥ 16.14
npm	≥ 8.6.7
Vue	3.2.x
TypeScript	4.6.x

安装步骤

1. 克隆项目

go 复制代码

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

1. 安装依赖

go 复制代码

npm install

1. 启动开发服务器

go 复制代码

npm run dev

1. 构建生产版本

go 复制代码

npm run build

🛠️ 开发命令

命令	说明
`npm run dev`	启动开发服务器
`npm run build`	构建生产版本
`npm run preview`	预览构建效果
`npm run lint`	代码检查
`npm run lint:fix`	自动修复代码问题

📦 核心依赖

主要技术栈

• Vue 3.2.x：前端框架
• TypeScript 4.6.x：类型支持
• Vite 4.3.x：构建工具
• Naive UI 2.0.x：UI 组件库
• ECharts 5.3.x：图表库
• Pinia：状态管理

图表组件

• VChart：基于 ECharts 的 Vue3 图表库
• Vue-ECharts：Vue3 版本的 ECharts 组件
• ECharts-WordCloud：词云图
• ECharts-LiquidFill：水球图

🎨 功能模块

1. 组件管理

• 📊 基础图表：柱状图、折线图、饼图、散点图
• 📈 高级图表：雷达图、热力图、地图、3D图表
• 🖼️ 装饰组件：边框、标题、图片、文本
• 🎭 交互组件：按钮、选择器、日期选择器

2. 数据源配置

• 🔌 API 接口：支持 RESTful API 数据接入
• 📄 静态数据：支持 JSON 格式静态数据
• 🔄 实时刷新：支持定时自动刷新数据
• 🎛️ 数据过滤：支持数据筛选和转换

3. 样式定制

• 🌗 主题切换：深色/浅色主题一键切换
• 🎨 自定义配色：支持颜色主题自定义
• 📐 布局调整：灵活的网格布局系统
• 🔤 字体配置：支持字体大小、颜色、样式设置

🔧 配置指南

1. 基础配置

项目配置文件位于 package.json，主要包含：

go 复制代码

{
  "name":"go-view",
"version":"1.3.2",
"engines":{
    "node":">=16.14"
},
"scripts":{
    "dev":"vite --host",
    "build":"vite build",
    "preview":"vite preview"
}
}

2. 主题配置

支持的主题配置包括：

• 深色主题（默认）
• 浅色主题
• 自定义主题配色

3. 图表配置

每种图表都支持丰富的配置选项：

• 数据源配置
• 样式配置
• 交互配置
• 动画配置

🌟 使用技巧

1. 组件拖拽

• 从左侧组件面板拖拽组件到画布
• 支持组件复制、删除、层级调整

2. 属性配置

• 右侧面板配置组件属性
• 支持实时预览效果

3. 数据绑定

• 支持静态数据和动态数据
• API 接口支持参数配置

4. 预览发布

• 实时预览大屏效果
• 一键导出部署版本

🔗 相关链接

• 官方网站：https://www.mtruning.club/
• 在线体验：https://ai.goviewlink.com/saas/
• Gitee 仓库：https://gitee.com/dromara/go-view

💡 最佳实践

1. 性能优化

• 合理使用数据量，避免一次性加载过多数据
• 适当配置刷新频率，避免频繁请求
• 使用组件懒加载，提升页面加载速度

2. 设计建议

• 保持大屏布局简洁明了
• 颜色搭配要符合品牌调性
• 数据展示要突出重点信息

3. 部署建议

• 生产环境建议使用 HTTPS
• 配置合适的缓存策略
• 监控系统运行状态

❓ 常见问题

Q1: 如何自定义图表样式？

A: 在右侧属性面板中找到样式配置选项，根据需求调整颜色、大小、字体等属性。

Q2: 数据接口如何配置？

A: 在数据源配置中选择 API 接口，填入接口地址和请求参数，系统会自动获取数据。

Q3: 如何导出大屏项目？

A: 点击顶部菜单的导出按钮，选择导出格式，生成部署版本。

🎉 总结

Go-View 作为一款优秀的低代码数据可视化工具，为开发者提供了简单易用的大屏搭建方案。通过拖拽式操作和丰富的组件库，大大降低了数据大屏的开发门槛，让数据可视化变得更加简单高效。

希望这份使用手册能帮助您快速上手 Go-View，创造出更多精彩的数据可视化作品！