新手入门

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

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

新建大屏

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

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

认识空白画布

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

第一步：加标题

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

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

第二步：加三个图表

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

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

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

第三步：接入数据

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

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

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

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

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

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

第四步：给图表绑定字段

先绑柱状图：

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

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

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

饼图用更快的办法：

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

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

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

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

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

图表还有坐标轴、图例、提示框、动画等很多设置，见组件库与样式。

预览

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

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

保存与发布

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

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

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

下一步

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