一個基於Vue的儀表盤demo

時間 2019-12-30
標籤一個基於 vue 儀表盤 demo 简体版
原文原文鏈接
最近寫了一個基於vue的儀表盤，其中主要是和 transform 相關的 css 用的比較多。給你們分享一下，喜歡的話點個讚唄？嘿嘿css
截圖以下：html
實際效果查看地址：https://jhcan333.github.io/can-Share/demos-tips/gaugeDemo.html前端
github：https://github.com/JHCan333/can-Share/blob/master/demos-tips/gaugeDemo.html。vue
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一個基於vue的儀表盤demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        /**儀表盤的css開始**/
        /* 儀表盤區域 */
        .jhc-gauge-area {
            width: 500px;
            height: 500px;
            position: relative;
            background: #050842;
        }

        /* 儀表盤中圓形的環 */
        .jhc-gauge-circle {
            width: 88%;
            height: 88%;
            border: 2px solid #509fef;
            border-radius: 50%;
            position: absolute;
            top: 5%;
            left: 6%;
        }

        /* 儀表盤的圓心 */
        .jhc-gauge-center {
            width: 8%;
            height: 8%;
            border-radius: 50%;
            position: absolute;
            background-color: #509fef;
            z-index: 20;
            left: 46%;
            top: 46%;
            box-shadow: 0px 0px 10px 1px #000;
        }

        /* 儀表盤的背景圖片 */
        .jhc-gauge-back {
            width: 66%;
            height: 66%;
            border-radius: 50%;
            position: absolute;
            top: 4%;
            left: -33%;
            background: url(https://jhcan333.github.io/can-Share/image/clock/gaugeBack.png) no-repeat;
            background-size: 95% 95%;
            background-position: center center;
        }

        /* 儀表盤的指針 */
        .jhc-gauge-needle {
            z-index: 5;
            width: 8%;
            height: 26%;
            position: absolute;
            left: 46%;
            bottom: 50%;
            transition:all 0.5s ease-in-out;
            transform-origin: center bottom;
            background: url(https://jhcan333.github.io/can-Share/image/clock/hourPoint.png) no-repeat;
            background-size: 100% 100%;
        }

        /* 儀表盤的標題 */
        .jhc-gauge-title {
            color: #fff;
            position: absolute;
            width: 100%;
            text-align: center;
            font-weight: bold;
            bottom: 3px;
        }

        /* 儀表盤的刻度 */
        .jhc-gauge-scale {
            color: #fff;
            z-index: 2;
            text-align: center;
            width: 10%;
            height: 43%;
            position: absolute;
            left: 45%;
            bottom: 50%;
            transform-origin: center bottom;
        }

        /**儀表盤的css結束**/
    </style>
</head>

<body>
<!-- 儀表盤所掛載的 dom 節點 -->
<div id="app"></div>
<script>
    var app = new Vue({
        el: '#app',
        template:
            `<div :class="gaugeArea" ref="area">
                <div :style="cssGauge">
                    <div :style="cssDotWrap">
                        <div :style="Object.assign({},{
                                                transform: 'rotateZ('+i*4+'deg)',
                                            },cssDot)"
                             v-for="(dot,i) in 90"
                        ></div>
                    </div>
                    <div :style="cssDotWrap2">
                        <div :class="gaugeBack"></div>
                        <div :style="Object.assign({},{
                                                transform: 'rotateZ('+i*3+'deg)',
                                                background:setScaleColor(i)
                                            },cssDot2)"
                             v-for="(dot,i) in 120"
                        ></div>
                    </div>
                    <div :style="Object.assign({},{
                                                transform: 'rotateZ('+i*360 /12+'deg)',
                                            })"
                         v-for="(dot,i) in 12"
                         :class="gaugeScaleVal"
                    >
                        {{getScaleValue(i)}}
                    </div>
                    <div :style="Object.assign({},{
                                                transform: 'rotateZ('+getGaugeRotate+'deg)'
                                            })"
                         :class="gaugeNeedle"
                    ></div>
                    <div :class="gaugeCircle"></div>
                    <div :class="gaugeDot"></div>
                </div>
                <div :class="gaugeTitle">儀表盤：{{value}}</div>
            </div>`,
        data () {
            return {
                prefixCss: 'jhc-', // 全部 CSS 的前綴
                value: 33, //當前默認value
                max: 100, //當前刻度最大值
                outerScale: 0.85, // 錶盤總體佔整個 div 元素的比例
                innerScale: 0.75,// 內層刻度佔外層的百分比
                cssGauge: {//整個儀表盤的盒子
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                    borderRadius: '50%'
                },
                cssDotWrap: {//裝外層裝飾刻度的盒子
                    width: '100%',
                    height: '100%',
                    position: 'absolute',
                    transform: 'translateX(250px)'
                },
                cssDotWrap2: {//裝內層指示刻度的盒子
                    width: '100%',
                    height: '100%',
                    position: 'absolute',
                    transform: 'translateX(120px)'
                },
                cssDot: {//外層裝飾刻度們
                    position: 'absolute',
                    backgroundColor: '#509fef',
                    transformOrigin: '0px 165px'
                },
                cssDot2: {//內層指示刻度們
                    position: 'absolute',
                    backgroundColor: '#509fef',
                    transformOrigin: '0px 165px'
                },
                colorList: [],//內層刻度的顏色
                timer: null,//刷新圖表的timer
                style: {bottom: '1px'},//儀表盤標題的style
            }
        },
        mounted () {
            // 定時修改 value 值
            this.timer = setInterval(() => {
                this.value = Math.ceil((Math.random() * 100))
            }, 2 * 1000)
            //獲取內層指示刻度的顏色
            this.getColorList()
            //設置儀表盤圖的 size
            this.setSize()
        },
        beforeDestroy () {
            clearInterval(this.timer)
        },
        methods: {
            //設置內環刻度顏色
            setScaleColor (i) {
                if (i < 50) {
                    return this.colorList[i + 70]
                } else {
                    return this.colorList[i - 50]
                }
            },
            //獲取顏色列表：由藍色逐漸變紅
            getColorList () {
                var colorList = []
                var red = {
                    max: 173,
                    min: 20
                }
                var green = {
                    max: 146,
                    min: 25
                }
                var blue = {
                    max: 216,
                    min: 45
                }
                var lth = 120
                for (var i = 0; i < lth; i++) {
                    var color = `rgb(${red.max - (red.max - red.min) / lth * i},${green.min + (green.max - green.min) / lth * i},${blue.min + (blue.max - blue.min) / lth * i})`
                    colorList.unshift(color)
                }
                this.colorList = colorList
            },
            //設置儀表盤圖的大小
            setSize () {
                let width = this.getWidth() // 獲取 div 的寬度
                let height = this.getHeight() // 獲取 div 的高度
                let shortLth = width > height ? height : width //獲取較短邊
                let length = shortLth * this.outerScale // 根據較短邊 以及 外層比例，計算實際使用的長度
                let paddingW = (width - length) / 2 //獲取距離左部的距離
                let paddingH = (height - length) / 2 //獲取距離頂部的距離
                //設置儀表盤總體的大小形狀
                this.setStates('cssGauge', {
                    height: length + 'px',
                    width: length + 'px',
                    top: paddingH + 'px',
                    left: paddingW + 'px',
                })
                let dotRadius = length * 0.5 //設置外層刻度的半徑
                let innerScale = this.innerScale //內層刻度佔外層的比例
                // 刻度的高度和寬度
                let dotHeight = length * 0.03 + 'px'
                let dotWidth = length * 0.01 + 'px'
                // 外層刻度的樣式
                this.setStates('cssDot', {
                    transformOrigin: `${0}px ${dotRadius}px`,
                    height: dotHeight,
                    width: dotWidth,
                })
                // 內層刻度的樣式
                this.setStates('cssDot2', {
                    transformOrigin: `${0}px ${dotRadius * innerScale}px`,
                    height: dotHeight,
                    width: dotWidth,
                })
                //設置外層刻度所在區域的位置
                this.setStates('cssDotWrap', {
                    transform: `translateX(${length * 0.5}px)`
                })
                //設置內刻度所在區域的位置
                this.setStates('cssDotWrap2', {
                    transform: `translate(${length * 0.5}px,${length * (1 - innerScale) / 2}px)`
                })
            },
            //獲取錶盤的刻度值
            getScaleValue (i) {
                if (i != 6) {
                    return (i >= 7 ? ((i - 7) / 10) : ((i + 5) / 10)) * this.max
                } else {
                    return ''
                }
            },
            getWidth () { //獲取指定容器的寬度
                return this.getRef('area').offsetWidth || 200
            },
            getHeight () { //獲取指定容器的高度
                return this.getRef('area').offsetHeight || 200
            },
            getRef (ref) { // 獲取指定 ref 對象
                return this.$refs && this.$refs[ref] || {}
            },
            //模仿 react 的states
            setStates (prop, data) {
                let cache = this[prop]
                this[prop] = Object.assign({}, cache, JSON.parse(JSON.stringify(data)))
            },
        },
        computed: {
            gaugeArea () {// 儀表盤的區域的class
                return `${this.prefixCss}gauge-area`
            },
            gaugeCircle () {// 儀表盤的圓環的class
                return `${this.prefixCss}gauge-circle`
            },
            gaugeDot () {// 儀表盤的中心點的class
                return `${this.prefixCss}gauge-center`
            },
            gaugeBack () {// 儀表盤的背景圖的class
                return `${this.prefixCss}gauge-back`
            },
            gaugeNeedle () {// 儀表盤的指針的class
                return `${this.prefixCss}gauge-needle`
            },
            gaugeScaleVal () {// 儀表盤刻度的讀數的class
                return `${this.prefixCss}gauge-scale`
            },
            getGaugeRotate () {// 獲取儀表盤的角度
                return (this.value / this.max * 100) * (360 / 120) - 150
            },
            gaugeTitle () {// 儀表盤的title的class
                return `${this.prefixCss}gauge-title`
            }
        },
    })
</script>
</body>
</html>
最近在搞一個和前端程序員相關的公號，除了技術分享以外，也增長了對於職業發展、生活記錄之類的文章，歡迎你們關注，一塊兒聊天、吐槽，一塊兒努力工做，認真生活！
react
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。