Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·中】

🎀🎀🎀 microi-pageengine 界面引擎系列 🎀🎀🎀

一、Microi吾码：一款高效、灵活的低代码开发开源框架【低代码框架】
二、Vue3项目快速集成界面引擎
三、Vue3 界面设计插件 microi-pageengine 入门教程一
四、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·上】
五、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·中】
六、Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·下】

---

前言

【Microi吾码-界面设计器】 是一款基于 Vue3 + ElementPlus 的Web页面设计插件。是一款无状态、零耦合、可插拔的界面渲染工具，可以无缝集成到 web端、移动端。可以帮助开发人员、项目经理、产品经理快速搭建页面原型，可以设计动态看板、数据报表、精美图表等。

🔗体验地址：https://www.nbweixin.cn/autopage/

前面已经学习了如何快速集成界面引擎插件，也介绍的界面引擎的布局及基本用法，今天来学习系统内置组件的用法。

---

一、容器用法

在介绍组件用法之前，首先要先了解容器的原理。容器的概念其实也算是一种特殊的组件，属于组件包装器。目前只有一个卡片的容器，其实就是 Element Plus 的 Card 卡片。

• 定义：给组件提供一个包装器，通过包装器来控制整体的布局样式和排版。
• 用法：一个容器可以包含多个子组件，容器和容器之间拖拽调换位置。
• 栅格：容器宽度采用的是栅格系统，共24格，通过属性控制栏的宽度 Slider 滑块来调节宽度。
• 排版：容器没有使用瀑布流模式，而是使用的响应式栅格布局。

二、内置组件介绍

系统内置了一些常用的基本组件，当然并不能满足所有需求，我们还提供了自定义组件，自定义组件具体用法后续会有介绍。

内置组件基本囊括了 ElementPlus 80% 的组件，而且参数设置基本上是一致的，除了一些样式上的参数控制。

上一篇文章 Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·上】 介绍了部分组件，这一篇继续介绍余下的组件。

2.10 静态图片组件

没什么好讲的，给个图片路径即可。

注意：数据源格式是一个路径字符串,直接在属性面板配置，无需配置webapi接口。

2.11 视频组件

可以播放在线视频，可以通过属性面板配置视频的自动播放、循环播放、静音等参数。

注意：数据源格式是一个路径字符串,直接在属性面板配置，无需配置 webapi 接口。

2.12 浏览器组件

以 webview 的方式实现内置网页的功能。

注意：数据源格式是一个路径字符串,直接在属性面板配置，无需配置 webapi 接口。

2.13 折线图组件

折线图基于 echarts 组件 实现的，配置参数请参考 echarts 官方。更多配置请查看组件特殊配置。

参数配置：

webapi 数据源格式：

{"xAxis": ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"series": [{"name": "邮箱","data": [420,132,101,134,90,230,210]},{"name": "联盟广告","data": [220,182,191,234,290,330,310]},{"name": "视频广告","data": [150,232,201,154,190,330,410]}]
}

注意：数据源格式是一个 Object 对象。

2.14 柱状图组件

柱状图基于 echarts 组件 实现的，配置参数请参考 echarts 官方。更多配置请查看组件特殊配置。

参数配置:

webapi 数据源格式：

{"xAxis": ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"series": [{"name": "邮箱","data": [420,132,101,134,90,230,210]},{"name": "联盟广告","data": [220,182,191,234,290,330,310]},{"name": "视频广告","data": [150,232,201,154,190,330,410]}]
}

注意：数据源格式是一个 Object 对象。

2.15 饼图组件

饼图基于 echarts 组件 实现的，配置参数请参考 echarts 官方。更多配置请查看组件特殊配置。

参数配置：

webapi 数据源格式：

[{"value": 1048,"name": "搜索引擎"},{"value": 735,"name": "直接"},{"value": 580,"name": "邮箱"},{"value": 484,"name": "联盟广告"},{"value": 300,"name": "视频广告"}
]

注意：数据源格式是一个数组对象。

2.16 漏斗图组件

漏斗图基于 echarts 组件 实现的，配置参数请参考 echarts 官方。更多配置请查看组件特殊配置。

参数配置：

webapi 数据源格式：

[{"value": 60,"name": "访问"},{"value": 40,"name": "查询"},{"value": 20,"name": "订单"},{"value": 80,"name": "点击"},{"value": 100,"name": "展示"}
]

注意：数据源格式是一个数组对象。

2.17 折柱混合组件

折柱混合基于 echarts 组件 实现的，配置参数请参考 echarts 官方。更多配置请查看组件特殊配置。

参数配置：

webapi 数据源格式：

{"xAxis": ["周一","周二","周三","周四","周五","周六","周天"],"series": [{"name": "蒸发量","type": "bar","unit": "ml","data": [2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3]},{"name": "降水量","type": "bar","unit": "ml","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"name": "温度","type": "line","unit": "°C","data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]
}

注意：数据源格式是一个数组对象。

2.18 鱼骨图组件

鱼骨分析法，又名因果分析法，是一种发现问题“根本原因”的分析方法，现代工商管理教育如MBA、EMBA等将其划分为问题型、原因型及对策型鱼骨分析等几类先进技术分析。

参数配置：

webapi 数据源格式：

[{"label": "人","router": "/","children": [{"label": "管理缺陷","router": "/"},{"label": "技能缺陷","router": "/"}]},{"label": "机","router": "/","children": [{"label": "机器维修","router": "/"},{"label": "机器管理","router": "/"}]},{"label": "料","router": "/","children": [{"label": "物料采购","router": "/"},{"label": "无聊加工","router": "/"}]},{"label": "法","router": "/","children": [{"label": "施工规则","router": "/"},{"label": "行为准则","router": "/"}]},{"label": "环","router": "/","children": [{"label": "操作法则","router": "/"},{"label": "标准准则","router": "/"}]},{"label": "测","router": "/","children": [{"label": "单元测试","router": "/"},{"label": "集成测试","router": "/"}]}
]

注意：数据源格式是一个数组对象。

三、未完待续

下一篇将介绍 地图组件、甘特图组件、超文本组件、描述列表组件、WebGL 3D引擎组件、Office文档 在线预览组件、table 动态表格组件。