go-view

数据与可视化TypeScript

开源、精美、便捷的「数据可视化」低代码开发平台纯前端分支： master 携带后端请求分支: master-fetch GoView 文档地址：项目纯前端-Demo 地址：项目带后端-Demo 地址： Cloud IDE 代码在线预览地址：后端项目看这里! 后端地址（社区实现，仅供参考）： JAVA (当前使用) GO-goframe 接口文档 (不是最新, 以前端代码为准) 框架：基于 Vue3 框架编写，使用 hooks 写法抽离部分逻辑，使代码结构更加清晰；类型：使用 TypeScript 进行类型约束，减少未知错误发生概率，可以大胆修改逻辑内容

AI/机器学习Web后端前端工具部署/运维

作者：用户6868语言：TypeScript更新：2026-10-27

仓库地址

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

前往原仓库

README

</p>
<p align="center">
  <a
      href="https://ai.goviewlink.com/saas/"
      target="_blank"
      style="
        padding: 10px 20px;
        display: inline-block;
        border-radius: 10px;
      ">
    <img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/2e47373911990902d421aecb.png" alt="go-view" />
  </a>
</p>

<p align="center">
    <img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/3b595965a441070879004749.png" alt="go-view" />
</p>

<h4 align="center">
开源、精美、便捷的「数据可视化」低代码开发平台
</h4>

<h4 align="center">
<img src="https://gitee.com/dromara/go-view/badge/star.svg?theme=gvp" style="position: relative; display: inline-block; top: 6px; border-radius: 0px;" />
<img src="https://gitcode.com/GoView/go-view/star/badge.svg" style="display: inline-block; position: relative; top: 4px;">
</h4>

#### 长期赞助商

<div>
  <div align="center" style="column-gap: 20px;">
    <a
      href="https://fastbee.cn/"
      target="_blank"
      style="
        padding: 10px 20px;
        display: inline-block;
        border-radius: 10px;
        background: #f9f9f9;
      ">
      <img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/974a0eed1390d417070a96ca.gif" alt="go-view" style="width: 250px;" width="250px"/>
    </a>
    <span> &nbsp;</span>
<a
      href="https://doc.hummingbird.winc-link.com?from=Goview"
      target="_blank"
      style="
        padding: 10px 20px;
        display: inline-block;
        border-radius: 10px;
        background: #f9f9f9;
      ">
      <img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/930246f39c6bb6f59aae1bb3.png" alt="go-view" style="width: 270px;" width="270px"/>
    </a>
    <br/>
    <br/>
    <a
      href="https://www.mtruning.club/chengDan/index.html"
      target="_blank"
      style="
        padding: 10px 20px;
        display: inline-block;
        border-radius: 10px;
        background: #f9f9f9;
      ">
      <img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/790b7b28d8b7fbf864bf66bb.png" alt="go-view" style="width: 270px;" width="270px"/>
    </a>
  </div>
</div>

#### 😶 **纯前端** 分支： **`master`**

#### 👻 携带 **后端** 请求分支: **`master-fetch`**

#### 📚 GoView **文档** 地址：[https://www.mtruning.club/](https://www.mtruning.club/)

项目纯前端-Demo 地址：[https://vue.mtruning.club/](https://vue.mtruning.club/)

项目带后端-Demo 地址：[https://demo.mtruning.club/](https://demo.mtruning.club/)

Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](https://idegitee.com/dromara/go-view)

#### 🤯 后端项目看这里!

后端地址（社区实现，仅供参考）：

- `JAVA` [https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve) (当前使用)
- `.NET` [https://gitee.com/sun_xiang_yu/go-view-dotnet](https://gitee.com/sun_xiang_yu/go-view-dotnet)
- `NODE` [https://gitee.com/qwdingyu/led](https://gitee.com/qwdingyu/led)
- `Docker 镜像` [https://gitee.com/AHEAD4/go-view-docker](https://gitee.com/AHEAD4/go-view-docker)
- `GO-goframe` [https://gitee.com/bufanyun/go-view-server](https://gitee.com/bufanyun/go-view-server)
- `GO-gin` [https://gitee.com/ls1990/go-view-serve](https://gitee.com/ls1990/go-view-serve)
- `接口文档` [https://docs.apipost.cn](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3) (不是最新, 以前端代码为准)

#### 整体介绍

- 框架：基于 `Vue3` 框架编写，使用 `hooks` 写法抽离部分逻辑，使代码结构更加清晰；

- 类型：使用 `TypeScript` 进行类型约束，减少未知错误发生概率，可以大胆修改逻辑内容；

- 性能：多处性能优化，使用页面懒加载、组件动态注册、数据滚动加载等方式，提升页面渲染速度；

- 存储：拥有本地记忆，部分配置项采用 `storage` 存储本地，提升使用体验；

- 封装：项目进行了详细的工具类封装如：路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等

- 可视化：基于开源图表库[ECharts](https://echarts.apache.org/zh/index.html) 和 [VChart](https://www.visactor.io/vchart) 编写，具有丰富的图表类型和适配大屏的主题效果；

- 入选 NaiveUI 社区精选资源推荐：[查看 NaiveUI 推荐列表](https://www.naiveui.com/zh-CN/light/docs/community)

说明文档：
![说明文档](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/f4122d1e9cc77e743e603bf5.png)

工作台：
![工作台](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/3693c1e6a9b520aceba3ae23.png)

请求配置：
![请求配置](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/c06d1b2fb94f29b7a0d8fcf2.png)

数据过滤：
![数据过滤](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/64fe7e09fb958e18e52a8d41.png)

高级事件编辑:
![高级事件编辑](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/831f5dfbae176fda2d2715b3.png)

自定义组件颜色:
![高级事件编辑](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/c5fc083608a27e5064bde925.png)

快捷主页：
![快捷主页](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/5087e38d190b2619028c6ea0.jpg)

主题色：
![主题色](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/e2b7d53eb1f4b5caf51d7f29.png)

亮白主题：
![亮白主题](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/9a362545a72ba0894794641e.png)

最新动态: 整合字节图表框架 VChart[https://visactor.io/vchart](https://visactor.io/vchart)
![图表框架 VChart](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/9957c24d9dfbc8c127d2e84e.png)

主要技术栈为：

| 名称                | 版本  | 名称        | 版本   |
| ------------------- | ----- | ----------- | ------ |
| Vue                 | 3.2.x | TypeScript4 | 4.6.x  |
| Vite                | 4.2.x | NaiveUI     | 2.34.x |
| ECharts             | 5.3.x | Pinia       | 2.0.x  |
| 详见 `package.json` | 😁    | 🥰          | 🤗     |

开发环境:

| 名称 | 版本    | 名称    | 版本   |
| ---- | ------- | ------- | ------ |
| node | 18.20.x | npm     | 10.7.x |
| pnpm | 8.6.7   | windows | 11     |

已完成图表：

| 分类   | 名称             | 名称       | 名称           | 名称                     |
| ------ | ---------------- | ---------- | -------------- | ------------------------ |
| 图表   | 柱状图           | 横向柱状图 | 折线图         | 单/多 折线面积图(渐变色) |
| \*     | 饼图             | 环形图     | 水球图         | 雷达图                   |
| \*     | NaiveUI 多种进度 | 散点图     | 对数回归散点图 | 热力图                   |
| \*     | 漏斗图           | 中国地图   | 高德地图       | 🦊                       |
| 信息   | 文字             | 渐变文字   | 词云           | 嵌套网页                 |
| \*     | 图片             | 视频       | 😺             | 🐯                       |
| 列表   | 滚动排名列表     | 滚动表格   | 🐮