网站每年的维护费,校园门户网站开发需求,福州营销网站建设团队,查看wordpress密码最近做的项目的主页面需要用到一个仪表盘来动态显示车速#xff0c;同时改变对应的背景色 仪表盘 开始是想着使用echarts#xff0c;修修改改拿来用#xff0c;但是人家客户有规定#xff0c;必须搞个差不多的#xff0c;那没办法#xff0c;自 己动手搞个吧 截图如下同时改变对应的背景色 仪表盘 开始是想着使用echarts修修改改拿来用但是人家客户有规定必须搞个差不多的那没办法自 己动手搞个吧 截图如下 这是人家的 这是我搞出来的 这样看着似乎差不多了哈客户没提啥意见搞定 接下来是代码考虑到代码的复用性封装成了组件及引入的方法因为要适配不同电脑的分辨率所以使用了把px根据比例全部换成了rem这里的1rem80px若是不想使用rem可以把数值乘以80然后把rem换成px就可以了
代码思路 首先是让UI小伙伴扣了两张图 yibiao5.png yibiaoBoot.png 1.然后根据找好最外层的父级根据定位把图片和文字的位置搞个差不多 2.接着就是刻度了可以看到刻度是有两层的外面有一层里面有一层这些刻度我想着前端动态生成然后给这些刻度设置一个默认背景色然后我就可以通过style样式控制背景色我看了原图上面的刻度是64个然后底部有16个是不变色的被遮罩住了所以通过css3的旋转改变下角度然后只控制其余48个刻度即可 3.因为最大的速度是200所以根据200/48即可得出1速度等于多少个刻度 封装仪表盘组件 代码如下
templatediv classdata-left-1div classbox_stylediv classmybox_wrapdiv classyibiao_stylediv classclock_boxdiv classclock_dial/divdiv classclock_dial2/div/divdiv classyibiao_boot/divdiv classyibiao_speed{{ carSpeed }}/divdiv classyibiao_span速度(km/h)/divdiv classyibiao_max200/div/div/div/div/div
/template
script
export default {props: {isShow: {type: Boolean,default: true,},speed: {type: Number,default: 0,},rate: {default: 0,},},data() {return {carSpeed: 0, //列车速度showTabulation: true,}},computed: {},mounted() {let clock_dial document.querySelector(.clock_dial)let clock_dial2 document.querySelector(.clock_dial2)//1 制作表盘for (let i 0; i 64; i) {var div document.createElement(div)div.setAttribute(class, dial)div.innerHTML span/spanclock_dial.appendChild(div)}let dial document.querySelectorAll(.dial)for (let i 0; i dial.length; i) {dial[i].style.position absolutedial[i].style.width 0.125remdial[i].style.height 100%dial[i].style.top 0dial[i].style.left 0.625rem}let dialSpan document.querySelectorAll(.dial span)for (let i 0; i dialSpan.length; i) {dialSpan[i].style.width 0.05remdialSpan[i].style.height 0.125remdialSpan[i].style.background #699B9A;dialSpan[i].style.backgroundImage dialSpan[i].style.display inline-blockdialSpan[i].style.verticalAlign topdialSpan[i].style.borderRadius 0.0125rem}for (let i 0; i 64; i) {var div document.createElement(div)div.setAttribute(class, dial2)div.innerHTML span/spanclock_dial2.appendChild(div)}let dial2 document.querySelectorAll(.dial2)for (let i 0; i dial2.length; i) {dial2[i].style.position absolutedial2[i].style.width 0.125remdial2[i].style.height 100%dial2[i].style.top 0dial2[i].style.left 0.5rem}let dialSpan2 document.querySelectorAll(.dial2 span)for (let i 0; i dialSpan2.length; i) {dialSpan2[i].style.width 0.0375remdialSpan2[i].style.height 0.0625remdialSpan2[i].style.background #699B9AdialSpan2[i].style.backgroundImage dialSpan2[i].style.display inline-blockdialSpan2[i].style.verticalAlign topdialSpan2[i].style.borderRadius 0.0125rem}for (let i 0; i dial.length; i) {var angle (360 / 64) * idial[i].style.transform rotate( angle deg)dial2[i].style.transform rotate( angle deg)}},methods: {},watch: {speed(val) {this.carSpeed vallet basicParam 200 / 48;let dialSpan document.querySelectorAll(.dial span)let dialSpan2 document.querySelectorAll(.dial2 span)let actNum Math.ceil(this.carSpeed / basicParam);for(let m0;m48;m){dialSpan[m].style.background #699B9A;dialSpan2[m].style.background #699B9A;}if (this.carSpeed 0this.carSpeed 100) {for (let i 0; i actNum; i) {dialSpan[i].style.background #43EDEAdialSpan2[i].style.background #43EDEA}}else{for (let i 0; i 24; i) {dialSpan[i].style.backgroundImage linear-gradient(to right,#43EDEA,#359EC7)dialSpan2[i].style.backgroundImage linear-gradient(to right,#43EDEA,#359EC7)}for (let j 24; j actNum; j) {dialSpan[j].style.backgroundImage linear-gradient(to right,#359EC7,#3B87F3)dialSpan2[j].style.backgroundImage linear-gradient(to right,#359EC7,#3B87F3)}}},isShow(val) {console.log(val)this.showTabulation val},},
}
/script
style scoped langless
//字体资源若是没有的话可以去掉这行代码
//font-face {
// font-family: son;
// src: url(~/assets/font/son.ttf) format(truetype);
//}.yibiao_speed {position: absolute;left: 34%;top: 37%;font-size: 0.375rem;width: 0.75rem;height: 0.45rem;text-align: center;
}
.yibiao_span {position: absolute;left: 22%;top: 72%;font-size: 0.175rem;width: 1.3rem;height: 0.45rem;text-align: center;z-index: 1000;
}
.yibiao_max {position: absolute;left: 66%;top: 63%;font-size: 0.225rem;width: 0.75rem;height: 0.45rem;text-align: center;
}.yibiao_style {width: 2.25rem;height: 2.25rem;background-image: url(~/assets/3d2/yibiao5.png);background-size: cover;position: relative;color: #fff;
}
.data-left-1 {width: 100%;height: 2.375rem;// padding: 0.1rem;display: flex;box-sizing: border-box;box-sizing: border-box;justify-content: center;// align-items: center;margin-bottom: 0.0625rem;
}
.mybox_wrap {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}.box_style {width: 2.25rem;height: 2.25rem;
}
.clock_box {width: 1.4375rem;height: 1.4375rem;border-radius: 50%;position: absolute;left: 0.375rem;top: 0.375rem;
}.clock_dial,
.clock_dial2 {width: 100%;height: 100%;position: relative;-moz-transform-origin: center center;-webkit-transform-origin: center center;-o-transform-origin: center center;transform-origin: center center;text-align: center;transform: rotate(-132deg);
}.clock_dial2 {width: 1.0625rem;height: 1.0625rem;top: 0.2375rem;left: 0.2375rem;;transform: rotate(-132deg);position: absolute;
}
.clock_dial div {position: absolute;width: 0.125rem;height: 100%;top: 0;left: 0.625rem;
}.dial,
.dial2 {position: absolute;width: 0.125rem;height: 100%;top: 0;left: 0.625rem;
}.dial2 {width: 0.125rem;left: 0.5rem;
}.dial span,
.dial2 span {width: 0.05rem;height: 0.125rem;background: #699b9a;display: inline-block;vertical-align: top;border-radius: 0.0125rem;
}.dial2 span {width: 0.0375rem;height:0.0625rem;
}.yibiao_boot {width: 1.25rem;height: 0.875rem;background-image: url(~/assets/3d2/yibiaoBoot.png);background-size: contain;color: #fff;position: absolute;z-index: 666;bottom: 0;left: 0.5rem;opacity: 0.9;background-repeat: no-repeat;
}
/style页面中使用
dashboard refdashboardwe :speedcarSpeed :ratecarRate/dashboard
import dashboard from ./modules/dashboard //仪表盘组件data() {return {carSpeed: 0, //列车速度carRate: 0,//百分比}
}let that this;that.carRate 100 / 200 * 100;//测试数据that.carSpeed Math.floor(Math.random()*200);//测试数据
