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