【uniapp 开发】智能温控开关（环状图）

index.vue

<template>
	<view>
		<view class="qiun-columns">
			<uCharts id="ucharts"
					 :val="opts.val"
					 :min="opts.min"
					 :max="opts.max"
					 :step="opts.step"
					 :width="opts.width"
					 :height="opts.height"
					 :border="opts.border"
					 :title="opts.title"
					 :showUnit="opts.showUnit"
					 :unit="opts.unit"
					 :showDecimal="opts.showDecimal"
					 :colorSatrt="opts.colorSatrt"
					 :colorEnd="opts.colorEnd"
					 :colorButton="opts.colorButton"
					 :pageBg="opts.pageBg"
					 :circleBg="opts.circleBg"
					 :pointBg="opts.pointBg"
					 :setUpUrl="opts.setUpUrl"
					 @change="change"
					 ref="ucharts" />
		</view>
		<button class="qiun-button" @tap="changeData()">更新图表</button>
		<!-- 下面是简单调用的例子，除了id和val其他的都可以不给 -->
		<view class="qiun-columns">
			<uCharts id="ucharts2" :val="simple" title="PM2.5" colorSatrt="#5ACECE" :showUnit="showUnit" colorEnd="#8CCE42"/>
		</view>
	</view>
</template>
<script>
import uCharts from '@/components/u-charts/bar.vue';
var _self;
export default {
	data() {
		return {
			simple:18,
			showUnit:false,
			opts:{
				val:15.8,
				min:10,
				max:40,
				step:1,
				width:220,
				height:220,
				border:35,
				title:'室内温度',//传null为不显示最上面标题
				showUnit:true,//是否显示单位
				unit:'℃',
				showDecimal:true,//是否小数
				colorSatrt:'#FFC2B3',
				colorEnd:'#FF3B1D',
				colorButton:'#565656',//底部按钮颜色
				pageBg:'#F4F5F6',//组件页面背景色，如果父组件像本示例设置了padding,你懂的哈
				circleBg:'#FFFFFF',//中间圆心文字块的背景色
				pointBg:'#FFFFFF'//控制点背景色
				// setUpUrl:'../../page/testurl'//设置那个按钮跳转的地方
			}
		};
	},
	components: {
		uCharts
	},
	onLoad() {
		_self = this;
		this.getServerData();
	},
	methods: {
		change(val){
			console.log(val)
		},
		getServerData() {
		},
		changeData() {
			//作为调用组件内方法的示例，您自由想象发挥哈
			this.$refs.ucharts.changeData(28.35);
		}
	}
};
</script>
<style>
.qiun-columns {
	display: flex;
	flex-direction: column !important;
	padding: 40upx;
}
</style>

bar.vue


<template>
	<view class="progress_box" :style="{'background-color': pageBg}">
		<canvas :canvas-id="id" :style="{'width':width+'px','height':height+'px'}" disable-scroll=true @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
		<view class="progress_txt" :style="{'width':centerRadius+'px','height':centerRadius+'px','background-color': circleBg}">
			<view class="progress_info_top" v-if="title">{{title}}</view>
			<view class="progress_info_center">
				<view class="progress_info_center_a">
					{{ integer }}
				</view>
				<view class="progress_info_center_c">
					<view class="progress_info_center_c1"><text class="c1_text" v-if="showUnit">{{unit}}</text></view>
					<view class="progress_info_center_c2"><text class="c1_text" v-if="showDecimal">.{{ decimal }}</text></view>
				</view>
			</view>
			<view class="progress_info_bottom" @tap="goSetUp">设置</view>
		</view>
	</view>
</template>
<script>
function isInAngleRange(angle, startAngle, endAngle) {
	function adjust(angle) {
		while (angle < 0) {
			angle += 2 * Math.PI;
		}
		while (angle > 2 * Math.PI) {
			angle -= 2 * Math.PI;
		}
		return angle;
	}
	angle = adjust(angle);
	startAngle = adjust(startAngle);
	endAngle = adjust(endAngle);
	if (startAngle > endAngle) {
		endAngle += 2 * Math.PI;
		if (angle < startAngle) {
			angle += 2 * Math.PI;
		}
	}
	return angle >= startAngle && angle <= endAngle;
}
function isInArea(e, r) {
	return Math.pow(e.x - r.x, 2) + Math.pow(e.y - r.y, 2) <= Math.pow(r.r, 2);
}
function isInUp(e,r) {
	if(isInArea(e,r)){
		let angle = Math.atan2(r.y - e.y, e.x - r.x);
		angle = -angle;
		if (isInAngleRange(angle, 0.5*Math.PI, 0.75*Math.PI)) {
			return true;
		}else{
			return false;
		}
	}else{
		return false;
	}
}
function isInDown(e,r) {
	if(isInArea(e,r)){
		let angle = Math.atan2(r.y - e.y, e.x - r.x);
		angle = -angle;
		if (isInAngleRange(angle, 0.25*Math.PI, 0.5*Math.PI)) {
			return true;
		}else{
			return false;
		}
	}else{
		return false;
	}
}
function isInCtrl(e,r) {
	if(isInArea(e,r)){
		return true;
	}else{
		return false;
	}
}
export default {
	props:{
		id:{
			default:'ucharts'
		},
		val:{
			default:0
		},
		min:{
			default:-10
		},
		max:{
			default:30
		},
		step:{
			default:1
		},
		width:{
			default:220
		},
		height:{
			default:220
		},
		border:{
			default:35
		},
		title:{
			default:null
		},
		unit:{
			default:'℃'
		},
		showUnit:{
			default:'true'
		},
		showDecimal:{
			default:'true'
		},
		colorSatrt:{
			default:'#FFC2B3'
		},
		colorEnd:{
			default:'#FF3B1D'
		},
		colorButton:{
			default:'#565656'
		},
		pageBg:{
			default:'#F4F5F6'
		},
		circleBg:{
			default:'#FFFFFF'
		},
		pointBg:{
			default:'#FFFFFF'
		},
		setUpUrl:{
			default:'../../page/initUrl'
		}
	},
	data() {
		return {
			valData:0,
			valPoint:{},
			centerPoint:{},
			insideRadius:{},
			startPoint:{},
			endPoint:{},
			isMove:false
		}
	},
	computed: {
		integer:function() {
			if(this.valData<this.min){ return this.min };
			if(this.valData>this.max){ return this.max };
			return parseInt(this.valData);
		},
		decimal:function() {
			if(this.valData<this.min){ return 0 };
			if(this.valData>this.max){ return 0 };
			return Math.abs(parseInt(this.valData*10)-parseInt(this.valData)*10);
		},
		centerRadius:function() {
			return Math.min(this.width/2-this.border,this.height/2-this.border)*2 * 0.9;
		}
	},
	mounted: function() {
		this.valData=this.val;
		this.drawCircle(this.val,this.min,this.max,this.width,this.height,this.border,this.colorSatrt,this.colorEnd,this.colorButton,this.pointBg);
	},
	methods: {
		drawCircle:function(val,min,max,width,height,border,colorSatrt,colorEnd,colorButton,pointBg) {
			let radius=Math.min(width/2-border/2,height/2-border/2);
			let centerPoint={
				x:width/2,
				y:height/2,
				r:radius+border/2
			};
			this.centerPoint=centerPoint;
			this.insideRadius={
				x:width/2,
				y:height/2,
				r:radius-border/2
			}
			let ctx = uni.createCanvasContext(this.id, this);
			ctx.setLineWidth(border);
			ctx.setStrokeStyle(colorButton);
			ctx.setLineCap('butt');
			//画按钮背景
			ctx.beginPath();
			ctx.arc(centerPoint.x, centerPoint.y, radius , 0.25 * Math.PI, 0.75 * Math.PI, false);
			ctx.stroke();
			//画按钮
			ctx.setLineWidth(1);
			ctx.setStrokeStyle("#FFFFFF");
			ctx.beginPath();
			ctx.moveTo(centerPoint.x, height);
			ctx.lineTo(centerPoint.x, height-border);
			ctx.stroke();
			ctx.setLineWidth(3);
			ctx.beginPath();
			let upPoint={
				x:centerPoint.x+(radius)*Math.cos(0.625* Math.PI),
				y:centerPoint.x+(radius)*Math.sin(0.625* Math.PI)
			};
			let downPoint={
				x:centerPoint.x+(radius)*Math.cos(0.375* Math.PI),
				y:centerPoint.x+(radius)*Math.sin(0.375* Math.PI)
			};
			let xLength=border*0.6/2;
			ctx.moveTo(upPoint.x-xLength, upPoint.y);
			ctx.lineTo(upPoint.x+xLength, upPoint.y);
			ctx.moveTo(upPoint.x, upPoint.y-xLength);
			ctx.lineTo(upPoint.x, upPoint.y+xLength);
			ctx.moveTo(downPoint.x-xLength, downPoint.y);
			ctx.lineTo(downPoint.x+xLength, downPoint.y);
			ctx.stroke();
			//变色背景条
			ctx.setLineWidth(border);
			let gradient = ctx.createLinearGradient(centerPoint.x-radius-border, centerPoint.y, centerPoint.x+radius+border, centerPoint.y);
			gradient.addColorStop('0', colorSatrt);
			gradient.addColorStop('1.0', colorEnd);
			ctx.setStrokeStyle(gradient);
			ctx.beginPath();
			ctx.arc(centerPoint.x, centerPoint.y, radius , 0.75 * Math.PI, 0.25 * Math.PI, false);
			ctx.stroke();
			//画控制点
			ctx.beginPath();
			ctx.setFillStyle(pointBg);
			//控制点阴影效果，不需要可以删掉
			ctx.setShadow(2, 2, 2, '#888888')
			if(val<min) val=min;
			if(val>max) val=max;
			let progress = (val- min) / (max - min) ;
			//控制点半径
			let valRadius=border * 0.45;
			//控制点弧度
			let valRadian= valRadius / (Math.PI * radius);
			progress = (1.5-2*valRadian) * progress + 0.75+valRadian;
			if (progress >= 2) {
				progress = progress % 2;
			}
			let valPoint={
				x:centerPoint.x+(radius)*Math.cos(progress* Math.PI),
				y:centerPoint.x+(radius)*Math.sin(progress* Math.PI),
				r:valRadius,
				v:val,
				s:0.75+valRadian,
				e:2.25-valRadian,
				t:1.5-2*valRadian,
				n:progress,
			};
			this.valPoint=valPoint;
			ctx.arc(valPoint.x, valPoint.y, valPoint.r, 0, 2 * Math.PI, false);
			ctx.closePath();
			ctx.fill();
			ctx.draw();
		},
		touchStart:function(e) {
			let touches = e.mp.changedTouches[0] || e.changedTouches[0];
			if(isInCtrl(touches,this.valPoint)){
				this.isMove=true;
				touches.val=this.valPoint;
				this.startPoint=touches;
			}
		},
		touchMove:function(e) {
			let touches = e.mp.changedTouches[0] || e.changedTouches[0];
			if(this.isMove === true){
				//这两句是判断是否在进度条内，加上体验不好，你可以试一下&& isInArea(touches,this.insideRadius) === false && isInArea(touches,this.centerPoint) === true
				let angle = Math.atan2(this.centerPoint.y - touches.y, touches.x - this.centerPoint.x);
				angle = -angle;
				let newRadian = angle/Math.PI;
				if(newRadian<0){
					newRadian = 2 + newRadian;
				}
				if(newRadian < this.startPoint.val.e - 1.7){
					newRadian += 2;
				}
				let progress = (newRadian - this.startPoint.val.s)/this.startPoint.val.t;
				progress = (this.max - this.min)*progress;
				let nweVal = this.min + progress;
				if(nweVal>this.max) nweVal = this.max;
				if(nweVal<this.min) nweVal = this.min;
				nweVal=(parseInt(nweVal*10)*0.1).toFixed(1);
				this.valData = nweVal;
				this.drawCircle(nweVal,this.min,this.max,this.width,this.height,this.border,this.colorSatrt,this.colorEnd,this.colorButton,this.pointBg);
			}
		},
		touchEnd:function(e) {
			let touches = e.mp.changedTouches[0] || e.changedTouches[0];
			if(isInUp(touches,this.centerPoint) === true && this.isMove === false){
				this.valData+=this.step;
				if(this.valData>this.max) this.valData = this.max;
				this.drawCircle(this.valData,this.min,this.max,this.width,this.height,this.border,this.colorSatrt,this.colorEnd,this.colorButton,this.pointBg);
			}
			if(isInDown(touches,this.centerPoint) === true && this.isMove === false){
				this.valData-=this.step;
				if(this.valData<this.min) this.valData = this.min;
				this.drawCircle(this.valData,this.min,this.max,this.width,this.height,this.border,this.colorSatrt,this.colorEnd,this.colorButton,this.pointBg);
			}
			if(this.isMove){
				this.$emit('change',this.valData)
				// let _this=this;
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 		val:this.valData
				// 	},
				// 	success: function(res) {
				// 		console.log("发送新数据["+_this.valData+"]成功！")
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				// this.isMove = false;
			}
		},
		goSetUp:function() {
			console.log(this.setUpUrl);
			uni.showToast({
				title: '跳转界面',
				duration: 2000
			});
		},
		changeData:function(val) {
			this.valData=val;
			this.drawCircle(val,this.min,this.max,this.width,this.height,this.border,this.colorSatrt,this.colorEnd,this.colorButton,this.pointBg);
		},
	}
};
</script>
<style>
	.progress_box {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.progress_txt {
		position: absolute;
		font-size: 28upx;
		border-radius: 50%;
		flex-direction: column !important;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-shadow:0 0 6upx 4upx #DEDEDE;
	}
	.progress_info_top {
		font-size: 32upx;
		letter-spacing: 2upx;
		color: #000000;
	}
	.progress_info_center {
		display: flex;
		flex-direction: row !important;
		color: #000000;
	}
	.progress_info_center_a {
		font-size: 80upx;
		height: 100upx;
		line-height: 100upx;
		font-weight: bold;
		letter-spacing: 2upx;
	}
	.progress_info_center_c {
		position: relative;
		height: 100upx;
		display: flex;
		flex-direction: column !important;
		align-items: center;
		justify-content: center;
	}
	.progress_info_center_c1 {
		display: flex;
		height: 50upx;
		align-items: center ;
	}
	.c1_text{
		height: 28upx;
		font-size: 28upx;
		letter-spacing: 2upx;
	}
	.progress_info_center_c2 {
		display: flex;
		height: 50upx;
		align-items:flex-start;
	}
	.c2_text{
		height: 50upx;
		font-size: 28upx;
		letter-spacing: 2upx;
	}
	.progress_info_bottom {
		font-size: 32upx;
		letter-spacing: 2upx;
		color: #666666;
	}
</style>

qiun.css


page {
	background: #F4F5F6;
	width: 750upx;
	overflow-x: hidden;
}
.qiun-padding {
	padding: 2%;
	width: 96%;
}
.qiun-wrap {
	display: flex;
	flex-wrap: wrap;
}
.qiun-rows {
	display: flex;
	flex-direction: row !important;
}
.qiun-columns {
	display: flex;
	flex-direction: column !important;
}
.qiun-common-mt {
	margin-top: 10upx;
}
.qiun-common-border-bottom {
	border-bottom: 1px solid #E9E9E9;
}
.qiun-bg-white {
	background: #FFFFFF;
}
.qiun-title-bar {
	width: 96%;
	padding: 10upx 2%;
	flex-wrap: nowrap;
}
.qiun-title-dot-light {
	border-left: 10upx solid #0ea391;
	padding-left: 10upx;
	font-size: 32upx;
	color: #000000
}
.qiun-textarea {
	height: 400upx;
	font-size: 34upx;
	box-sizing: border-box;
	line-height: 50upx;
	width: 100%;
	background-color: #FFFFFF;
}
.qiun-text-tips {
	font-size: 28upx;
	color: #dc2626;
	line-height: 40upx;
	padding: 6upx;
}
.qiun-button {
	background: #2fc25b;
	color: #FFFFFF;
	margin: 20upx;
}
/* 通用样式 */
.qiun-charts {
	width: 750upx;
	height: 500upx;
	background-color: #FFFFFF;
}
.charts {
	width: 750upx;
	height: 500upx;
	background-color: #FFFFFF;
}
/* 横屏样式 */
.qiun-charts-rotate {
	width: 700upx;
	height: 1100upx;
	background-color: #FFFFFF;
	padding: 25upx;
}
.charts-rotate {
	width: 700upx;
	height: 1100upx;
	background-color: #FFFFFF;
}
/* 圆弧进度样式 */
.qiun-charts3 {
	width: 750upx;
	height: 250upx;
	background-color: #FFFFFF;
	position: relative;
}
.charts3 {
	position: absolute;
	width: 250upx;
	height: 250upx;
	background-color: #FFFFFF;
}

【uniapp 开发】智能温控开关（环状图）的更多相关文章

Android开发—智能家居系列】（二）：用手机对WIFI模块进行配置
在实际开发中,我开发的这款APP是用来连接温控器,并对温控器进行控制的.有图为证,哈哈. 上一篇文章[Android开发—智能家居系列](一):智能家居原理的文末总结中写到: 手机APP控制智能温控器 ...
使用uni-app开发微信小程序
uni-app 开发微信小程序前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...
CozyRSS开发记录1-原型图与Grid
CozyRSS开发记录1-原型图与Grid 1.使用MockPlus画出最简陋的原型图这个界面参考了目前我最常使用的RSS阅读-傲游浏览器的内置RSS阅读器.主体框架划分为上.左下.右下三块,分别是 ...
基于Laravel+Swoole开发智能家居后端
基于Laravel+Swoole开发智能家居后端在上一篇<Laravel如何优雅的使用Swoole>中我已经大概谈到了Laravel结合Swoole的用法. 今天,我参与的智能家居项目基 ...
jqPlot图表插件学习之饼状图和环状图
一.准备工作官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...
用C#开发的双色球走势图(二)
昨晚由于时间的原因只写了一部分内容,今天将这一部分内容补充完毕,多谢各位园友的支持. 这是用C#开发的双色球走势图(一)新的园友可以看昨晚写的内容,以免脱节.首先回复园友的评论,有说好的有说不好的,本 ...
[Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图，Ay制作,AyWindow强势预览]
原文:[Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览] 我的文章一定要做到对读者负责,否则就是失败的文章 -- ...
SNF快速开发平台WinForm-CS甘特图
我们在做项目当中会经常用到按时间进度查看任务,其通过条状图来显示项目,进度,和其他时间相关的系统进展的内在关系随着时间进展的情况. 甘特图包含以下三个含义: 1.以图形或表格的形式显示活动: 2.通用 ...
APP开发项目思维导图
APP开发项目思维导图下载思维导图:APP开发项目.xmind.zip --------------------------------------- APP开发项目 app项目标记: 未启动功能 ...
用C#开发的双色球走势图（原创）值得园友拥有（二）接上一篇
昨晚由于时间的原因只写了一部分内容,今天将这一部分内容补充完毕,多谢各位园友的支持. 这是用C#开发的双色球走势图(原创)值得园友拥有新的园友可以看昨晚写的内容,以免脱节.首先回复园友的评论,有说好 ...

随机推荐

矩池云 | 新冠肺炎防控：肺炎CT检测
连日来,新型冠状病毒感染的肺炎疫情,牵动的不仅仅是全武汉.全湖北,更是全国人民的心,大家纷纷以自己独特的方式为武汉加油!我们相信坚持下去,终会春暖花开. 今天让我们以简单实用的神经网络模型,来检测肺炎 ...
教你如何解决JS/TS里特定String进行拆分然后遍历各个元素
摘要:我们需要先判断特定String里是否包含我们需要的元素,针对这个元素对这个字符串进行拆分,遍历各个元素. 本文分享自华为云社区<JavaScript/TypeScript项目里如何对特定S ...
LGP3813题解
这道题是我去年11月份的时候看到的,当时写了一个假的做法没过样例,然后就没管了. 结果今天在模拟赛的时候放到了 T1( 我也不知道他为什么是对的,可是他就是过了样例和大样例.jpg 容易发现 \(n\ ...
从原理学习Java反序列化
1 序列化与反序列化 1.1 概念序列化: 将数据结构或对象转换成二进制串的过程反序列化:将在序列化过程中所生成的二进制串转换成数据结构或者对象的过程 1.2 使用场景当你想把的内存中的对象状态 ...
使用WebService的优点
1.支持跨平台,跨语言,远程调用 WSDL:web service definition language 直译 webservice定义语言对应一种类型的文件.wsdl2.定义了web servi ...
ActiveMQ-模块代码-02
模块模式 p2p模式生产者 ConfigBeanQueue package com.producerp2p.producerp2p; import org.apache.activemq.comma ...
Eclipse阿里云镜像源配置
镜像下载.域名解析.时间同步请点击阿里巴巴开源镜像站一.什么是Eclipse Eclipse 是一个开放源代码的.基于 Java 的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过 ...
linux下查看文件编码及修改编码介绍
1.在Vim中可以直接查看文件编码:set fileencoding即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决用Vim查看文件乱码的问题,那么你可以在~/.vimrc 文件中添 ...
python中文及符号检测工具带GUI界面
import tkinter import webbrowser import re #本程序是一个中文字符和中文检测工具 #中文字符自己添加,我只添加了一点 #输入字符串,点击检查文本即可判断有没有 ...
西门子S210电机位置控制过调问题解决方法
问题描述创建完工艺对象,使用MC_MoveAbsolute工艺指令进行绝对定位,发现在下达指令后,电机会出现先超过目标位置再回调的现象,即过冲. 电机连接的机械结构为旋转轴,而不是线性轴. 解决方法 ...

【uniapp 开发】智能温控开关 （环状图）

【uniapp 开发】智能温控开关 （环状图）的更多相关文章

随机推荐

热门专题

【uniapp 开发】智能温控开关（环状图）

【uniapp 开发】智能温控开关（环状图）的更多相关文章