u-charts环形图

r囧r小猫 2022-12-29 01:47 195阅读 0赞

<view class="qiun-charts">
    	<canvas canvas-id="canvasRing" id="canvasRing" class="charts"></canvas>
    </view>

<script>
    import uCharts from '@/components/u-charts/u-charts.js';
    var _self;
    var canvaRing = null;
    export default { 
    data() { 
    		return { 
    				cWidth: '',
    				cHeight: '',
    				pixelRatio: 1,
    				serverData: '',
    			}
    		},
    		onLoad() { 
    			_self = this;
    			this.cWidth = uni.upx2px(750);
    			this.cHeight = uni.upx2px(500);
    			this.getServerData();
    		},
    		getServerData() { 
    				//注册排名请求
    				assessXsReg({ 
    						time: []
    					}).then(res => { 
    						let arr = []
    						console.log(res, "注册排名")
    						this.rank = res.data.rank
    						this.register = res.data
    						this.rank.map(item => { 
    							arr.push({ 
    								name: item.salesman,
    								data: item.reg_num
    							})
    						})
    						let Ring = { 
    							series: arr
    						};
    						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
    						// Ring.series = this.chartData.series;
    						// console.log(this.chartData.series,)
    						_self.showRing("canvasRing", Ring.series);
    					}).catch(err => { 
    						console.log(err)
    					})
    				
    			},
    			showRing(canvasId, chartData) { 
    				canvaRing = new uCharts({ 
    					$this: _self,
    					canvasId: canvasId,
    					type: 'ring',
    					fontSize: 11,
    					legend: true,
    					// title: { 
    					// name: '70%',
    					// color: '#7cb5ec',
    					// fontSize: 25 * _self.pixelRatio,
    					// offsetY: -20 * _self.pixelRatio,
    					// },
    					// subtitle: { 
    					// name: '收益率',
    					// color: '#666666',
    					// fontSize: 15 * _self.pixelRatio,
    					// offsetY: 30 * _self.pixelRatio,
    					// },
    					extra: { 
    						pie: { 
    							offsetAngle: -45,
    							ringWidth: 40 * _self.pixelRatio,
    							labelWidth: 15
    						}
    					},
    					background: '#FFFFFF',
    					pixelRatio: _self.pixelRatio,
    					series: chartData,
    					animation: true,
    					width: _self.cWidth * _self.pixelRatio,
    					height: _self.cHeight * _self.pixelRatio,
    					disablePieStroke: true,
    					dataLabel: true,
    				});
    			},
    			// touchRing(e) { 
    			// canvaRing.showToolTip(e, { 
    			// format: function(item) { 
    			// return item.name + ':' + item.data
    			// }
    			// });
    			// },
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts环形图、饼图径向渐变示例

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第005个 [点击查看专栏目录][Link 1]

蔚落/ 2024年03月27日 11:30/ 0 赞/ 30 阅读

相关小程序绘制环形图

效果图： ![20210420143853843.png][] wxml： <view class='progress_box' wx:for="{

雨点打透心脏的1/2处/ 2023年01月14日 10:53/ 0 赞/ 129 阅读

相关 u-charts环形图

<view class="qiun-charts"> <canvas canvas-id="canvasRing" id="

r囧r小猫/ 2022年12月29日 01:47/ 0 赞/ 196 阅读

相关 uni-app使用ucharts图表 ##uni-app ##uCharts

需求：首页需要放一个圆环图显示数据。查找文档：uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?i

àì夳堔傛蜴生んèń/ 2022年12月23日 09:51/ 0 赞/ 750 阅读

相关 Echarts的饼状图变成环形图

首先实现一个饼状图 <!DOCTYPE html> <html> <head> <met

末蓝、/ 2022年12月23日 00:49/ 0 赞/ 210 阅读

相关 echarts-环形图

![这里写图片描述][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta

我不是女神ヾ/ 2022年06月08日 09:41/ 0 赞/ 222 阅读

相关 Echarts3实例环形图

前言环形图本质上就是饼图，我们把饼图的半径设置成阶段范围内的值域，饼图就变成了环形图。实现效果 ![在这里插入图片描述][watermark_type

╰+哭是因爲堅強的太久メ/ 2021年09月17日 10:00/ 0 赞/ 375 阅读

相关 ucharts，数据交互

<template> <view> <view class="ucharts-tit">kw.h</view> <view class

﹏ヽ暗。殇╰゛Y/ 2021年09月07日 08:02/ 0 赞/ 426 阅读

相关 echart双环形图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIw

àì夳堔傛蜴生んèń/ 2021年07月26日 23:24/ 0 赞/ 1208 阅读

相关 svg 占比环形图

思路: 确定内外圈半径和中心坐标->按照中心坐标水平向右的两个坐标为起点-> 三角函数通过每部分占比计算出每部分扇形的四个角度存进数组里->遍历

柔情只为你懂/ 2021年07月24日 14:43/ 0 赞/ 385 阅读