🎀🎀🎀 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 动态表格组件。