【uniapp 开发】智能温控开关 (环状图)

【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 开发】智能温控开关 (环状图)

上一篇:Spring 3.2 ClassMetadataReadingVisitor 错误


下一篇:Javascript 事件对象(五)事件捕获