唯杰地图 logo唯杰地图
VJMAP
EN
Examples

1453 个在线示例,打开就能跑

覆盖 2D 图纸、CAD 绘图扩展、三维、WebCAD 与 AI 可视化。每个示例都附完整源码,可在示例站在线修改运行,源码也已开源在 GitHub · vjmap-playground,更多源码请加客服微信。

AI 可视化平台

大屏与看板 SDK:组件、数据、事件、地图、组态与三维。

打开示例站 ↗ GitHub 源码 更多源码请加客服微信客服微信二维码微信扫码添加客服
创建与查询组件
创建与查询组件

通过上下文和页面句柄创建组件,再按 uid、类型与谓词查询(组件、创建、查询)

组件与句柄运行 ↗
选项与几何
选项与几何

读取和修改组件 options、位置、尺寸与旋转(组件、options、几何、位置、尺寸)

组件与句柄运行 ↗
显隐启用与命名
显隐启用与命名

用组件句柄控制可见性、启用状态和业务名称(组件、显隐、启用、命名)

组件与句柄运行 ↗
父子组件树
父子组件树

向分组面板添加子组件,并沿父、子、页面三个方向寻址(组件、父子树、容器、group-panel)

组件与句柄运行 ↗
选中值与选项监听
选中值与选项监听

程序化选择数据项,读取当前值,并监听 option 变化(组件、selection、value、watchOption、订阅)

组件与句柄运行 ↗
Extension 脚本 CRUD
Extension 脚本 CRUD

新增、读取、更新并删除组件二次开发脚本(组件、Extension、脚本、CRUD)

组件与句柄运行 ↗
addWidget 布局选项
addWidget 布局选项

用 screenId、index 与 center:false 精确指定目标页面、图层顺序和初始位置(组件、addWidget、screenId、index、center、布局)

组件与句柄运行 ↗
多图表经营仪表盘
多图表经营仪表盘

用一张多字段表驱动面积图、双轴图、饼图和柱状图,并通过 setData 同步推送新快照(组件、图表、2x2仪表盘、多字段绑定、setData、实时推数)

组件与句柄运行 ↗
单值同步仪表盘
单值同步仪表盘

用同一个 value-field 同步驱动仪表盘、水球图和环形进度条(组件、单值数据、仪表盘、水球图、进度条、同步推数)

组件与句柄运行 ↗
文本排版滚动与绑定精选
文本排版滚动与绑定

basic-text 字号对齐渐变、content-overflow 滚动日志、value-field 动态标题(组件、文本、basic-text、滚动、value-field、离线)

组件与句柄运行 ↗
Markdown 主题与溢出精选
Markdown 主题与溢出

basic-markdown md-theme 深浅色、overflow、value-field 动态内容(组件、Markdown、basic-markdown、主题、离线)

组件与句柄运行 ↗
段落缩进与滚动精选
段落缩进与滚动

basic-paragraph 首行缩进、行高、滚动动画、value-field(组件、段落、basic-paragraph、离线)

组件与句柄运行 ↗
柱状图形态与多系列精选
柱状图形态与多系列

chart-bar 纵向/横向/圆角粗柱/无分割线,多 metric-fields 系列,点击联动明细表(组件、图表、柱状图、chart-bar、多系列、联动、离线)

组件与句柄运行 ↗
折线图平滑与流光精选
折线图平滑与流光

chart-line 平滑/折角/面积填充/流光,多系列对比,点击联动(组件、图表、折线图、chart-line、smooth、flow-light、离线)

组件与句柄运行 ↗
面积图透明度与双层精选
面积图透明度与双层

chart-area 默认面积填充,调节 area-opacity / flow-light / 多系列叠层(组件、图表、面积图、chart-area、离线)

组件与句柄运行 ↗
双轴图量与率精选
双轴图量与率

chart-biaxial 左轴柱+右轴线,left-axis-name / right-axis-name,点击联动(组件、图表、双轴图、chart-biaxial、离线)

组件与句柄运行 ↗
双轴堆叠图精选
双轴堆叠图

chart-biaxial-stack 默认 bar-stack,多柱堆叠+右轴线(组件、图表、双轴堆叠、chart-biaxial-stack、离线)

组件与句柄运行 ↗
饼图半径与玫瑰精选
饼图半径与玫瑰

chart-pie 半径/玫瑰/图例/标签,点击扇区联动明细(组件、图表、饼图、chart-pie、rose、离线)

组件与句柄运行 ↗
散点图与气泡精选
散点图与气泡

chart-scatter x/y 绑定,bubble-mode 用 size-field 控制点径(组件、图表、散点图、chart-scatter、气泡、离线)

组件与句柄运行 ↗
雷达图多边形与圆形精选
雷达图多边形与圆形

chart-radar radar-shape polygon/circle,多 metric-fields 系列(组件、图表、雷达图、chart-radar、离线)

组件与句柄运行 ↗
漏斗图排序与标签精选
漏斗图排序与标签

chart-funnel descending/ascending、label-position、层间距(组件、图表、漏斗图、chart-funnel、离线)

组件与句柄运行 ↗
仪表盘刻度与指针精选
仪表盘刻度与指针

chart-gauge min/max/split-number/指针弧环刻度色,value-field 取首行(组件、图表、仪表盘、chart-gauge、离线)

组件与句柄运行 ↗
热力图色阶精选
热力图色阶

chart-heatmap x/y/value 矩阵,low-color/high-color 与 visualmap(组件、图表、热力图、chart-heatmap、离线)

组件与句柄运行 ↗
矩形树图层级精选
矩形树图层级

chart-treemap name/value/group-field,面包屑与间距(组件、图表、矩形树图、chart-treemap、离线)

组件与句柄运行 ↗
桑基图节点与曲率精选
桑基图节点与曲率

chart-sankey 长表 source/target/value,node-width/gap/link-curveness(组件、图表、桑基图、chart-sankey、离线)

组件与句柄运行 ↗
关系图力导向精选
关系图力导向

chart-graph source/target 网络,repulsion / node-size / 边权重(组件、图表、关系图、chart-graph、离线)

组件与句柄运行 ↗
水球图形状墙精选
水球图形状墙

chart-liquid liquid-shape 画廊、波浪渐变与外圈,value-field 取首行(组件、图表、水球图、chart-liquid、形状、离线)

组件与句柄运行 ↗
词云轮廓画廊精选
词云轮廓画廊

chart-wordcloud cloud-shape / font-min-max / allow-rotate(组件、图表、词云、chart-wordcloud、离线)

组件与句柄运行 ↗
胶囊柱图配色精选
胶囊柱图配色

chart-capsule 横向胶囊条,capsule-colors / item-height / unit(组件、图表、胶囊图、chart-capsule、离线)

组件与句柄运行 ↗
行政区填色图精选
行政区填色图

chart-map 内置中国 GeoJSON,region-field 简称映射,visualmap 与 roam(组件、图表、区域地图、chart-map、choropleth、离线)

组件与句柄运行 ↗
表格列样式与操作分页精选
表格列样式与操作分页

basic-table 序号/操作/选框列、pagination-height、轮播动画、选中联动(组件、表格、basic-table、操作列、分页、离线)

组件与句柄运行 ↗
轮播表行与页精选
轮播表行与页

basic-scroll-board board-fields、carousel single/page、wait-time(组件、轮播表、basic-scroll-board、离线)

组件与句柄运行 ↗
排名榜排序与进度精选
排名榜排序与进度

basic-ranking-list category/value、sort desc/asc、进度条高度(组件、排名榜、basic-ranking-list、离线)

组件与句柄运行 ↗
分组面板嵌套与悬浮精选
分组面板嵌套与悬浮

group-panel 背景边框、嵌套、hover-popup 文字提示(组件、分组面板、group-panel、hover-popup、离线)

组件与句柄运行 ↗
数据循环卡片墙精选
数据循环卡片墙

data-repeater unitTemplate 按行派生,item-fields 行作用域,点击行出详情(组件、循环容器、data-repeater、unitTemplate、离线)

组件与句柄运行 ↗
组合组件母版与实例精选
组合组件母版与实例

component-instance 共享 master 快照,props 绑不同字段,overrides 改样式(组件、组合组件、component-instance、母版、离线)

组件与句柄运行 ↗
视图容器过渡与轮播精选
视图容器过渡与轮播

layout-section 多子视图、transition、auto-play、箭头指示点(组件、视图容器、layout-section、离线)

组件与句柄运行 ↗
视图导航三种样式精选
视图导航三种样式

nav-views tabs/symbol/slider 链接 layout-section(组件、视图导航、nav-views、slider、离线)

组件与句柄运行 ↗
按钮四态与数据选中精选
按钮四态与数据选中

basic-button 默认/悬停/点击/选中四态,relationship-field 按行判定选中(组件、按钮、basic-button、四态、relationship-field、离线)

组件与句柄运行 ↗
开关绑定与回填精选
开关绑定与回填

basic-switch on/off 文案配色,value-field 静默回填不触发 switchChanged(组件、开关、basic-switch、value-field、离线)

组件与句柄运行 ↗
搜索框实时与按钮精选
搜索框实时与按钮

basic-search placeholder/clearable/realtime/show-button,linkage-field 联动列表(组件、搜索、basic-search、离线)

组件与句柄运行 ↗
下拉可清空可搜索精选
下拉可清空可搜索

basic-select option-field、clearable、filterable、多选(组件、下拉、basic-select、离线)

组件与句柄运行 ↗
分页器总数与条数精选
分页器总数与条数

basic-pagination page-size / show-total / show-size-changer / count-field(组件、分页器、basic-pagination、离线)

组件与句柄运行 ↗
列表序号与进度条精选
列表序号与进度条

basic-list title/value-field、show-index、value-bar、轮播(组件、列表、basic-list、离线)

组件与句柄运行 ↗
进度条三形态精选
进度条三形态

basic-progress shape ring/rect/column,burst 条、value-field(组件、进度条、basic-progress、ring、rect、column、离线)

组件与句柄运行 ↗
内嵌网页缩放与切页精选
内嵌网页缩放与切页

basic-iframe 同源 offline HTML,zoom/sandbox,按钮 changeOption 切换 iframe-link(组件、iframe、basic-iframe、离线)

组件与句柄运行 ↗
弹窗遮罩与开关精选
弹窗遮罩与开关

group-popup is-popup / show-mask / auto-close,按钮 switchPopup toggle(组件、弹窗、group-popup、switchPopup、离线)

组件与句柄运行 ↗
选项卡方向与自动切精选
选项卡方向与自动切

group-tabs tab-items、orientation、auto-switch,子面板对齐标签(组件、选项卡、group-tabs、离线)

组件与句柄运行 ↗
按钮组方向与字段精选
按钮组方向与字段

group-buttons menu-items / menu-field、orientation、行列布局(组件、按钮组、group-buttons、离线)

组件与句柄运行 ↗
图片填充与滤镜精选
图片填充与滤镜

basic-image fill-style / 亮度对比度,image-field 绑定离线 canvas PNG(组件、图片、basic-image、fill-style、离线)

组件与句柄运行 ↗
图形形状墙精选
图形形状墙

basic-graphical 15 种 shape、描边渐变、悬停点击态(组件、图形、basic-graphical、shape、离线)

组件与句柄运行 ↗
轮播图效果与指示器精选
轮播图效果与指示器

basic-carousel image-field、effect/fit/dots/arrow/autoplay(组件、轮播图、basic-carousel、离线)

组件与句柄运行 ↗
视频播放与切源精选
视频播放与切源

basic-video 同源离线 mp4:autoplay+muted、loop、controls、fit,按钮 changeOption 切源(组件、视频、basic-video、离线)

组件与句柄运行 ↗
图标颜色与旋转精选
图标颜色与旋转

basic-icon 离线 iconify 集合,颜色/旋转/悬停态(组件、图标、basic-icon、离线)

组件与句柄运行 ↗
时钟格式与时区精选
时钟格式与时区

basic-timer time-format / time-zone / show-weekday(组件、时钟、basic-timer、离线)

组件与句柄运行 ↗
计时器正计与倒计精选
计时器正计与倒计

basic-timing clockwise / anticlockwise,项目启动或自定义起点(组件、计时器、basic-timing、离线)

组件与句柄运行 ↗
日历周起始与联动精选
日历周起始与联动

basic-calendar week-start、选中色、linkage-field 交叉筛选班次表(组件、日历、basic-calendar、linkage-field、离线)

组件与句柄运行 ↗
时间选择类型与联动精选
时间选择类型与联动

basic-timeselect time-type date/datetime/month/range,linkage-field 筛班次(组件、时间选择、basic-timeselect、离线)

组件与句柄运行 ↗
时间轴游标与刻度精选
时间轴游标与刻度

basic-timescale cursor-size/color、scale-color、游标变化事件(组件、时间轴、basic-timescale、离线)

组件与句柄运行 ↗
数字卡片格式与绑定精选
数字卡片格式与绑定

basic-card 千分位/小数/百分比/滚动动画,value-field 取首行(组件、数字卡片、basic-card、KPI、离线)

组件与句柄运行 ↗
翻牌器位数与方向精选
翻牌器位数与方向

basic-flipper digit-length / flip-type / 绑定 value(组件、翻牌器、basic-flipper、离线)

组件与句柄运行 ↗
装饰边框色与流向精选
装饰边框色与流向

deco-border 主辅色、标题、flow-reverse、动画时长(组件、装饰边框、deco-border、离线)

组件与句柄运行 ↗
装饰七种样式精选
装饰七种样式

deco-decoration decoration-style d01–d07、镜像与衬字(组件、装饰、deco-decoration、离线)

组件与句柄运行 ↗
流程管道直管与分支精选
流程管道直管与分支

deco-pipeline pipe/branch、流向 forward/stop/backward(组件、流程管道、deco-pipeline、离线)

组件与句柄运行 ↗
行布局十二列精选
行布局十二列

layout-row 预置 grid-columns:12,子卡 grid-col-span(组件、布局、layout-row、离线)

组件与句柄运行 ↗
列布局十二行精选
列布局十二行

layout-column 预置 grid-rows:12(组件、布局、layout-column、离线)

组件与句柄运行 ↗
网格布局四分树精选
网格布局四分树

layout-grid 用 grid-tree split 切四宫格(组件、布局、layout-grid、grid-tree、离线)

组件与句柄运行 ↗
流式行自动换行精选
流式行自动换行

layout-flow-row fluid wrap + gap,卡片墙放不下换行(组件、布局、layout-flow-row、离线)

组件与句柄运行 ↗
固定面板绝对定位精选
固定面板绝对定位

layout-fixed-panel 预置 static,内部仍用 position/size 钉死(组件、布局、layout-fixed-panel、离线)

组件与句柄运行 ↗
停靠布局驾驶舱精选
停靠布局驾驶舱

layout-dock 前 5 个子容器依序为左/右/底/顶/中(组件、布局、layout-dock、停靠、驾驶舱、离线)

组件与句柄运行 ↗
侧栏停靠与折叠精选
侧栏停靠与折叠

layout-sidebar 前 2 子容器=侧栏/主区,dock-side 与 side-size(组件、布局、layout-sidebar、离线)

组件与句柄运行 ↗
手风琴单开多分区精选
手风琴单开多分区

layout-accordion sections / single-expand / default-expanded(组件、布局、layout-accordion、离线)

组件与句柄运行 ↗
占位块预留图位精选
占位块预留图位

placeholder 空白对齐块,编辑器里再换成真实图表(组件、布局、placeholder、离线)

组件与句柄运行 ↗
设备显隐与尺寸覆盖精选
设备显隐与尺寸覆盖

device-visible + 节点顶层 sizeModeOverrides,大屏/平板展示不同尺寸(组件、设备、sizeModeOverrides、device-visible、离线)

组件与句柄运行 ↗

找不到想要的?,它会从示例代码里找出最接近的写法。