---
title: 新手入门
source: https://vjmap.com/guide/visual/quickstart.html
---

---
group: 入门
video: tut-visual
description: 从新建大屏、添加标题和图表、接入 JSON 数据、绑定字段，到预览和发布，做出第一块销售看板。
---

# 新手入门

本篇做一块「华东区 2026 年销售看板」：一个大标题、一张各城市销售额柱状图、一张订单数占比饼图和一张明细表，数据来自一段 JSON。照着做一遍，就走完了新建、加组件、接数据、绑字段、预览、保存和发布的完整流程，大约十分钟。

做完的效果如下（发布后打开运行态链接看到的样子）：

![做完的销售看板](./images/quickstart-result.webp)

## 新建大屏

1. 在浏览器打开 https://vjmap.com/server/vp/ ，点「访客进入（guest）」或用自己的账号登录。
2. 在首页右上角点「+ 新建」，打开「新建大屏」。
3. 选「固定大屏」：1920×1080 的画布，投屏时整体等比铺满，不变形。
4. 在底部填工程名「新手入门·销售看板」，点「创建」，进入编辑器。

![「新建大屏」对话框](./images/quickstart-new.webp)

1. **模板筛选**：按「全部」「示例模板」「画布定位」「流式布局」「空白」筛选，后面的数字是模板个数。
2. **固定大屏**：本篇用的模板。卡片下方的「编辑：自由拖放」「预览：整体适配」说明它在编辑器里怎么摆、运行时怎么适配屏幕。
3. **工程名**：默认是「未命名大屏」，右边提示当前选中了哪个模板。
4. **创建**：创建工程并进入编辑器。

::: tip 小技巧
模板里带「含示例内容」角标的会预置好组件，比如「示例 · 二维数据看板」已经有标题栏、KPI 卡片和三种图表，改改数据就能用。各模板的区别见[项目管理](./projects.html#新建大屏)。
:::

## 认识空白画布

![刚创建的空白大屏](./images/quickstart-editor.webp)

1. **组件分类**：左下角竖排的分类，有「常用」「全部」「布局」「地图控件组件」「图表」「地图」「文本」「控件」「媒体」「组态」「时间」「三维场景」「指标」「小组件」等。
2. **组件卡片**：当前分类下的组件，悬停卡片会出现「+」。
3. **画布**：1920×1080 的设计稿，组件都按这个尺寸摆放；顶部和左侧是标尺。
4. **页面属性**：什么都没选时，右侧显示页面本身的设置。「布局画像」是「固定大屏」，「适配方式」是「等比铺满 · 不变形（背景填满）」，下面的橙色文字解释了这种适配方式的效果。
5. **大屏尺寸**：画布的宽和高，可以改成 3840×1080 之类的拼接屏尺寸。

## 第一步：加标题

1. 点左侧分类里的「文本」，把鼠标移到「深色大标题」卡片上，点中间的「+」，标题就加到画布上，同时被选中。
2. 在右侧「样式」页签的「文本」里输入「华东区 2026 年销售看板」。
3. 在「大小&位置」里把组件大小设为 1920 × 90，位置设为 X 0、Y 20，让标题横跨整个画布。
4. 往下找到「字体设置」，把字号改成 44。

![加标题并在属性面板里修改](./images/quickstart-title.webp)

1. **文本**：组件分类，里面有「深色大标题」「深色副标题」「段落」。
2. **深色大标题**：悬停后点「+」添加；也可以双击卡片，或者直接拖到画布上想放的位置。
3. **标题组件**：选中后四周出现蓝色控制点，拖动可以移动、拉伸。
4. **文本**：标题显示的文字。
5. **大小&位置**：宽高和 X、Y 坐标，单位是设计稿像素；也可以切换成百分比。
6. **字体**：字体、字号、颜色和加粗等，旁边的「发光」「投影」页签给文字加效果。

## 第二步：加三个图表

点分类「图表」，用同样的方法加入「深色柱状图」「深色饼图」「深色排行榜」，再分别设好大小和位置：

| 组件 | 大小（宽 × 高） | 位置（X, Y） |
|---|---|---|
| 深色柱状图 | 900 × 440 | 50, 140 |
| 深色饼图 | 860 × 440 | 1010, 140 |
| 深色排行榜 | 1820 × 380 | 50, 640 |

![三个图表摆好后的画布（还是演示数据）](./images/quickstart-charts.webp)

1. **页面图层**：每加一个组件，这里就多一行，越靠上的层级越高。点一行就能选中对应的组件，组件被挡住时很方便。
2. **深色柱状图**：刚加进来时显示的是内置的演示数据（一月到六月）。
3. **深色饼图**：同样是演示数据。
4. **深色排行榜**：一张明细表，演示数据是姓名、年龄、性别。

接下来把这三个图表换成自己的数据。

## 第三步：接入数据

1. 点顶栏「数据」→「编辑数据...」（快捷键 `Ctrl+D`），打开「连接数据」。
2. 右边列出了所有数据源类型，在「文件」一栏点「JSON」。
3. 连接名称填「城市销售」，在「或粘贴」里粘贴下面这段 JSON，点「确定」。

```json
[
  {"城市": "上海", "销售额": 486, "订单数": 3120, "同比": "+12%"},
  {"城市": "杭州", "销售额": 352, "订单数": 2410, "同比": "+18%"},
  {"城市": "南京", "销售额": 298, "订单数": 1980, "同比": "+9%"},
  {"城市": "苏州", "销售额": 276, "订单数": 1870, "同比": "+15%"},
  {"城市": "合肥", "销售额": 188, "订单数": 1260, "同比": "+21%"},
  {"城市": "宁波", "销售额": 165, "订单数": 1105, "同比": "+7%"}
]
```

![连接 JSON 数据源](./images/quickstart-json.webp)

1. **连接名称**：数据源的名字，绑定字段时按这个名字找。
2. **选择文件**：点「点击」或把 `.json` 文件拖进虚线框。
3. **或粘贴**：直接粘贴 JSON，下方会提示解析结果，如「解析成功：1 张表 · 城市销售（4 字段 / 6 行）」。
4. **确定**：创建数据源。

创建好后，「连接数据」左侧多了「城市销售」，右侧可以检查数据：

![数据源的「数据明细」](./images/quickstart-json-table.webp)

1. **数据源和表**：一个数据源可以有多张表（比如 Excel 的多个工作表），这里只有一张。
2. **数据明细 / 数据结构**：「数据明细」看每一行，「数据结构」可以改字段的显示名和类型（字符串、数字）。
3. **数据预览**：字段名后面标着类型，「销售额」「订单数」被识别成数值。

关掉「连接数据」对话框，回到画布。各种数据源（接口、WebSocket、模拟数据、平台数据表）的用法见[数据接入与绑定](./data.html)。

## 第四步：给图表绑定字段

先绑柱状图：

1. 在画布上点柱状图选中它，右侧切到「数据」页签。
2. 「字段映射」里有「类目轴」和「数值」两项。点「类目轴」的下拉框，先选数据源「城市销售」，再在下面出现的字段框里选「城市」。
3. 「数值」同样选「城市销售」→「销售额」。

两项都选好后，柱状图立刻变成六个城市的销售额。

![在「字段映射」里选择字段](./images/quickstart-bind.webp)

1. **数据**：属性面板的第二个页签。
2. **类目轴**：先选数据源，再选字段；图中第一个框已经选了「城市销售」，正在选第二个框。
3. **字段列表**：列出这张表的全部字段，右边标着类型。柱状图的类目选文本字段，数值选数值字段。

饼图用更快的办法：

1. 选中饼图，在「数据」页签下方的「数据来源」里保持「项目数据源」。
2. 在下面的字段清单里勾选「城市」和「订单数」，它们会自动填进「类目」和「数值」。

![勾选字段自动填入字段映射](./images/quickstart-checkbox.webp)

1. **饼图**：勾选后立刻按城市显示订单数占比。
2. **字段映射**：勾选的字段被自动填到这里。
3. **数据来源**：「项目数据源」用「编辑数据」里建的连接；「组件自有数据」是组件自己带的一张小表；「演示数据」就是刚加进来时看到的样例。
4. **字段清单**：勾选即绑定，再点一次取消。

最后是明细表：选中「深色排行榜」，在「数据」页签的「数据字段」里先选「城市销售」，再在字段框里依次选「城市」「销售额」「订单数」「同比」，表格就显示四列真实数据。

::: warning 注意
表格类组件的字段清单勾选后，填进的是「关键字段」（用于选中、联动时识别行），不是要显示的列。要显示哪些列，请在「数据字段」的下拉框里选。另外，表格默认用的是「组件自有数据」，记得在「数据来源」里切到「项目数据源」。
:::

## 第五步：改标题，显示数值

1. 选中柱状图，切回「样式」页签，展开「图表设置」，把「标题」改成「各城市销售额（万元）」，打开「显示数值」，柱子上方就会标出数值。
2. 饼图的标题改成「订单数占比」。

图表还有坐标轴、图例、提示框、动画等很多设置，见[组件库与样式](./components.html)。

## 预览

点顶栏右侧的「预览」，编辑器切到运行态，看到的就是发布后的样子：

![预览运行态](./images/quickstart-preview.webp)

1. **自动轮播**：工程有多个页面时，按顺序自动轮播。
2. **退出预览 (Esc)**：回到编辑器，也可以直接按 `Esc`。

## 保存与发布

1. 按 `Ctrl+S` 或点顶栏「保存」，工程保存到服务器，顶部提示「已保存到服务端」。保存的是草稿，首页卡片上显示「草稿」。
2. 点顶栏右侧的「发布」，生成线上版本，弹出「发布成功」：

![发布成功](./images/quickstart-publish.webp)

1. **运行态地址**：形如 `https://vjmap.com/server/vp/view?project=<工程 ID>`，不需要登录就能打开，适合投屏或发给别人看。
2. **复制链接**：复制运行态地址。
3. **打开运行态**：在新标签页打开。

发布之后再改工程，运行态还是上次发布的样子，改完要再点一次「发布」。历史版本、导出部署文件和嵌入到自己系统的方法见[保存、发布与嵌入](./publish.html)。

## 下一步

- 想让看板实时刷新：在[数据接入与绑定](./data.html)里看模拟数据和接口数据。
- 想点一下柱子筛选表格、点按钮弹出详情：看[事件交互与多状态](./events.html)。
- 想加地图、三维或组态：看[二维地图](./map.html)、[三维场景](./scene3d.html)、[组态](./scada.html)。
- 想让 AI 帮你搭：看[AI 助手](./ai.html)。