最近寫了一個基於vue的儀表盤，其中 主要是和 transform 相關的 css 用的比較多。給大家分享一下，喜歡的話點個讚唄？嘿嘿
截圖如下：
實際效果查看地址：https://jhcan333.github.io/can-Share/demos-tips/gaugeDemo.html
github：https://github.com/JHCan333/can-Share/blob/master/demos-tips/gaugeDemo.html。
<!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>