🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 仪盘表组件就是设置仪盘效果的组件,效果图如图5.21。点击“![](https://img.kancloud.cn/55/0e/550e1fa654b4a55c19c65cfcc1813028_26x30.png)”图标,再点击“仪盘表”,即可创建仪盘表,如图5.22; ![](https://img.kancloud.cn/25/fc/25fc392803fc596a154a65c1b9b7f839_368x295.png) ![](https://img.kancloud.cn/0d/b4/0db47c0b857cf422b5ea9538b1e44c6c_800x41.png) ![](https://img.kancloud.cn/58/c9/58c9ca2a5341bf09254baa07dd91f9c9_861x434.png) ![](https://img.kancloud.cn/6f/57/6f574008ad6fdf98f3b3c21f23276c1e_803x38.png) ## **一、组件名称设置** ### 选中该仪盘表组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图5.23。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/32/4b/324b6f459a29988b4471623789113a40_799x536.png) ![](https://img.kancloud.cn/01/22/01220a6c15aced54dd6051d5aa51d529_803x43.png) ## **二、基本样式设置** ### 1\. 刻度线粗度(像素) ### 选中该仪盘表组件,在操作界面右侧的“刻度线粗度(像素)”处可设置组件的轮播时间,如图5.24; ![](https://img.kancloud.cn/3b/93/3b933a4e3aa741895e9a1eb1b04f4cb8_743x543.png) ![](https://img.kancloud.cn/43/c8/43c89e156b9a2bf6d7aeb0c447d6dc71_800x44.png) ### 2\. 设置刻度值 ### 选中该仪盘表组件,在操作界面右侧,打开“显示刻度”按钮,可在仪盘表显示刻度,设置字号处可修改刻度子的大小,如图5.25。 ![](https://img.kancloud.cn/8d/a0/8da0d75905a1e98044a4edad70b7dfb9_738x355.png) ![](https://img.kancloud.cn/a0/f9/a0f9d482cd44b9954f34c62717967a49_792x50.png) ### 3\. 显示刻度线 ### 选中该仪盘表组件,在操作界面右侧的“显示刻度线”处可设置是否显示刻度线,如图5.26。(图5.27为显示刻度线样式;图5.28为不显示刻度线样式;) ![](https://img.kancloud.cn/a5/02/a5029b63787c50e744074fd2b0ebd88c_961x497.png) ![](https://img.kancloud.cn/a4/94/a494172007cbd1d2e2060ce9b1935e9e_803x44.png) ![](https://img.kancloud.cn/e0/1c/e01cb229787d5ff9b6fbca75a4720e0f_968x492.png) ### 3\. 指标字号 ### 选中该仪盘表组件,在操作界面右侧的“指标字号”处可设置指标名称字的大小,如图5.26。 ![](https://img.kancloud.cn/97/cc/97cc97b1a59c3a589dc8f34d7d53db89_728x333.png) ![](https://img.kancloud.cn/a4/94/a494172007cbd1d2e2060ce9b1935e9e_803x44.png) ## **三、接口设置** ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化;(一般这种比较常用) ### 2\. 接口地址 ### (1)静态数据,接口地址穿过来的内容要符合以下格式: ~~~ { "min": 1, "max": 10, "label": "名称", "value": 2, "unit": "%" } ~~~ ### (2)动态数据,接口地址穿过来的内容要符合以下格式: ~~~ {"data":{"min":1,"max":10,"label":"名称","value":4,"unit":"%"}} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/87/96/87969ef74a833cf2b571e40787982f63_1054x974.png)