• 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 开发】智能温控开关 (环状图)的更多相关文章

  1. Android开发—智能家居系列】(二):用手机对WIFI模块进行配置

    在实际开发中,我开发的这款APP是用来连接温控器,并对温控器进行控制的.有图为证,哈哈. 上一篇文章[Android开发—智能家居系列](一):智能家居原理的文末总结中写到: 手机APP控制智能温控器 ...

  2. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  3. CozyRSS开发记录1-原型图与Grid

    CozyRSS开发记录1-原型图与Grid 1.使用MockPlus画出最简陋的原型图 这个界面参考了目前我最常使用的RSS阅读-傲游浏览器的内置RSS阅读器.主体框架划分为上.左下.右下三块,分别是 ...

  4. 基于Laravel+Swoole开发智能家居后端

    基于Laravel+Swoole开发智能家居后端 在上一篇<Laravel如何优雅的使用Swoole>中我已经大概谈到了Laravel结合Swoole的用法. 今天,我参与的智能家居项目基 ...

  5. jqPlot图表插件学习之饼状图和环状图

    一.准备工作 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...

  6. 用C#开发的双色球走势图(二)

    昨晚由于时间的原因只写了一部分内容,今天将这一部分内容补充完毕,多谢各位园友的支持. 这是用C#开发的双色球走势图(一)新的园友可以看昨晚写的内容,以免脱节.首先回复园友的评论,有说好的有说不好的,本 ...

  7. [Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览]

    原文:[Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览]  我的文章一定要做到对读者负责,否则就是失败的文章  -- ...

  8. SNF快速开发平台WinForm-CS甘特图

    我们在做项目当中会经常用到按时间进度查看任务,其通过条状图来显示项目,进度,和其他时间相关的系统进展的内在关系随着时间进展的情况. 甘特图包含以下三个含义: 1.以图形或表格的形式显示活动: 2.通用 ...

  9. APP开发项目思维导图

    APP开发项目思维导图 下载思维导图:APP开发项目.xmind.zip --------------------------------------- APP开发项目 app项目标记: 未启动 功能 ...

  10. 用C#开发的双色球走势图(原创)值得园友拥有(二)接上一篇

    昨晚由于时间的原因只写了一部分内容,今天将这一部分内容补充完毕,多谢各位园友的支持. 这是用C#开发的双色球走势图(原创)值得园友拥有 新的园友可以看昨晚写的内容,以免脱节.首先回复园友的评论,有说好 ...

随机推荐

  1. LeetCode-025-K 个一组翻转链表

    K 个一组翻转链表 题目描述:给你一个链表,每 k 个节点一组进行翻转,请你返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度. 如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保 ...

  2. LeetCode-022-括号生成

    括号生成 题目描述:数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且 有效的 括号组合. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https ...

  3. pep9伪代码

    Set sum to 0 Read num 1 Set sum to sum + num1 Read num2 Set sum to sum + num2 Read num3 Set sum to s ...

  4. java中的异常(Exception)

    基本概念 将程序执行中发生的不正常的情况称为"异常".开发中的语法错误和逻辑错误不是异常 执行过程中的异常事件可分为两大类 错误(Error):Java虚拟机无法解决的严重问题.例 ...

  5. table表格的td行利用css显示...

      默认超过指定长度以...显示, 鼠标放到文本上显示全 代码如下 .fh{ max-width:220px; word-wrap:break-word; text-overflow:ellipsis ...

  6. 使用pip安装扩展包

    pip可以对python扩展包进行查找.下载.安装.卸载等

  7. 《前端运维》一、Linux基础--06Shell流程控制

    这章我们来学习下流程控制,简单来说就是逻辑判断和循环的写法.并不复杂,我们来简单地看下. 1.if语句 shell的if语句有两种写法,一种是shell脚本式的,一种是命令式的. if conditi ...

  8. IBM QRadar Advisor 安全限制绕过漏洞

    受影响系统:IBM QRadar Advisor 1.0.0 -2.4.0描述:CVE(CAN) ID: CVE-2019-4556 IBM QRadar Advisor是一套安全威胁分析解决方案. ...

  9. office online在线预览服务与https的tls证书兼容问题

    问题现象:k8s环境配置证书后,无法调用office online 服务,附件无法预览 问题原因:ingress默认启用得是tls1.2,不兼容以下版本 k8s环境解决方法:增加ingress配置,兼 ...

  10. AOP详解之三-创建AOP代理后记,创建AOP代理

    AOP详解之三-创建AOP代理后记,创建AOP代理. 上篇文章已经获取到了AOP的信息,接下来就是拿着这些AOP的信息去创建代理了. 首先我们看下创建AOP代理的入口处. //这个方法将返回代理类 p ...