🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 环形图组件就是环状显示某一事件进度的组件。点击“![](https://img.kancloud.cn/55/0e/550e1fa654b4a55c19c65cfcc1813028_26x30.png)”图标,再点击“环形图”,即可创建环形图,如图2.41; ![](https://img.kancloud.cn/d0/31/d03171b8067e06483f1f9a42aac07d84_804x372.png) ![](https://img.kancloud.cn/67/b8/67b83d5ad34fc4e087e884bad894ebad_801x38.png) ## **一、组件名称设置** ### 选中该环形图组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图2.42。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/e2/8b/e28b389aa8b4302d1eb1dc0455ef614c_948x718.png) ![](https://img.kancloud.cn/8a/25/8a258345d40f76b6d598d9bb1c733276_798x36.png) ## **二、类型** ### 选中该环形图组件,在操作界面右侧的“类型”处可选择显示样式,如图2.43;类型包含:线条和圆环。 * ### 条线图:进度条样式;效果图如图2.431。 * ### 环形图:环状样式;效果图如图2.432。 ![](https://img.kancloud.cn/b7/6d/b76de7ac22d424303fc26daf636f60dd_740x517.png) ![](https://img.kancloud.cn/eb/e1/ebe1b12bb8083d7e3153b2f6ee0a0a1f_796x40.png) ![](https://img.kancloud.cn/d2/57/d2570d8b7f179e9a8cc2302d41a8ce3e_785x357.png) ## **三、 间距** ### 选中该环形图组件,在操作界面右侧的“间距”处可修改文字和进度条的间距,如图2.44。 **备注:数值越大,文字离进度条越远** ![](https://img.kancloud.cn/b6/40/b6406c2cecf48fbfa91da0240ba8c989_949x723.png) ![](https://img.kancloud.cn/3a/36/3a362cadc4817357c382bed3467ff93f_801x37.png) ## **四、边框颜色** ### 选中该环形图组件,在操作界面右侧的“边框颜色”处可修改进度条的颜色,如图2.45。 ![](https://img.kancloud.cn/ac/6b/ac6b9952b947e9b8e9464dc3a6743482_957x724.png) ![](https://img.kancloud.cn/24/f3/24f340ea18a2c1e70d2d52be542c4d99_791x42.png) ## **五、字体设置** ### 字体大小:修改图2.46标注文字大小; ### 字体颜色:修改图2.46标注文字颜色; ### 文字粗细:修改图2.46标注文字粗细; ![](https://img.kancloud.cn/ae/2c/ae2cea25d63bc9d57412678bd696a72d_604x302.png) ![](https://img.kancloud.cn/72/45/72453d21a996926e01f2c2a57b581cdd_797x39.png) ## **六、前缀设置** ### 前缀字体大小:修改图2.47标注文字大小; ### 前缀字体颜色:修改图2.47标注文字颜色; ### 前缀文字粗细:修改图2.47标注文字粗细; ![](https://img.kancloud.cn/46/d4/46d44ceb96f8acfb7b9e637ee5d65133_730x724.png) ![](https://img.kancloud.cn/73/fc/73fce92fa49698320ba5be3e79c5ad09_790x46.png) ## **七、接口设置** ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化;(一般这种比较常用) ### 2\. 接口地址 * ### label:为前缀内容; * ### value:为文字内容; * ### data:为百分比; ### (1)静态数据,接口地址穿过来的内容要符合以下格式: ~~~ {"label":"人数增涨","value":40,"data":90} ~~~ ### (2)动态数据,接口地址穿过来的内容要符合以下格式: ~~~ {"data":{"label":"人数增涨","value":40,"data":90}} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/d1/2b/d12b571d260d1281c882fac51df35bdb_1090x994.png) ![](https://img.kancloud.cn/5d/dc/5ddcbaa884553b1ca1ff2d31758d5c9b_797x43.png) #### 5.其他样式,怎样设置\*\* ### 如图2.49中样式,接口设置格式如下: ![](https://img.kancloud.cn/66/dc/66dc8e43d327615da69b7f3628b2fe62_382x332.png) ![](https://img.kancloud.cn/3b/2e/3b2e8560f99bea367769743ae0a174c3_795x40.png) 备注:如果接口中配置“content”和“data”值,环形图就显示百分值; ### (1)静态数据,接口地址穿过来的内容要符合以下格式: ~~~ { "label": "人数增涨", "value": 40, "content": "%", "data": 80} ~~~ ### (2)动态数据,接口地址穿过来的内容要符合以下格式: ~~~ {"data":{ "label": "人数增涨", "value": 40, "content": "%", "data": 80}} ~~~