一个基于vue的仪表盘demo
最近写了一个基于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>
最近在搞一个和前端程序员相关的公号，除了技术分享之外，也增加了对于职业发展、生活记录之类的文章，欢迎大家关注，一起聊天、吐槽，一起努力工作，认真生活！
一个基于vue的仪表盘demo的更多相关文章
- 一个基于vue的时钟
前两天写了一个基于vue的小钟表,给大家分享一下. 其中时针和分针使用的是图片,结合transform制作:表盘刻度是通过transform和transformOrigin配合画的:外面的弧形框框,啊 ...
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- 一个基于node 的小demo
首先我们新建一个文件夹 demo-test-node-1 目录目录如下 -- blog_recents.js --template.html --titles.jspn 首先我们新建一个 templ ...
- 一个基于Vue.js+Mongodb+Node.js的博客内容管理系统
这个项目最初其实是fork别人的项目.当初想接触下mongodb数据库,找个例子学习下,后来改着改着就面目全非了.后台和数据库重构,前端增加了登录注册功能,仅保留了博客设置页面,但是也优化了. 一.功 ...
- Vue3教程：一个基于 Vue 3 + Vant 3 的商城项目开源啦！
之前发布过一篇文章,告诉大家我要开发一个 Vue3 的商城项目并开源到 GitHub 上,供大家练手和学习,随后也一直有收到留言和反馈,问我开发到哪里了,什么时候开源之类的问题,今天终于可以通知大家, ...
- 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- vue拼图动画Demo
这是一个基于vue的Demo,可以实现拼图动画,但是具体的没有写拼图成功的逻辑,鼠标悬停移动.周期刷新 我把它放到的我的博客园界面上了.刷新界面可以看到. 演示地址 :https://liruilon ...
随机推荐
- File Compression and Archiving in linux (linux 中文件的归档)
1. Compressing Files at the Shell Prompt Red Hat Enterprise Linux provides the bzip2, gzip, and zip ...
- js中toFixed精度问题的解决办法
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规 ...
- Mina各组件介绍
Mina各组件介绍 上一篇文章已经系统的介绍了Mina的运行流程,Apache推出的Mina性能上很是高效,上章节我们知道内部有很多的类,各个类之间的依赖也是很多,他们之家都是相互依赖. 下面主要看看 ...
- IntelliJ IDEA 从入门到上瘾教程，2019图文版！
前言:IntelliJ IDEA 如果说IntelliJ IDEA是一款现代化智能开发工具的话,Eclipse则称得上是石器时代的东西了. 其实笔者也是一枚从Eclipse转IDEA的探索者,随着近期 ...
- JS基础-该如何理解原型、原型链？
JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...
- NuGet的安装和使用
好久没有用NuGet了.今天项目中正好有需要.因长时间不用,所以还要去网上看攻略,索性记录下来免得再出现类似情况.(我是一个比较懒得人,不喜欢写博客园,平时都随手整理到本地PC上.以后要努力改掉这个坏 ...
- Linux的基本操作（一）
一.Linux的常用命令 1.ls[参数] 目录或文件 参数 -a :显示指定目录下的所有子目录与文件,包括隐藏文件: -l 以长格式显示文件的详细信息 如图: 文件类型:“-“表示常规文件:”d&q ...
- Commons组件实现文件上传与下载
一.文件上传 所需jar包 首先是commons-fileupload.jar包 其次是commons-IO.jar包 前者的使用依赖后者,两者缺一不可 实现 前台要求 在前台提交的form表单请求方 ...
- P4570 [BJWC2011]元素 线性基 + 贪心
题意 给定n个物品,每个物品有一个编号和价值,问如何取使得拿到的物品价值总和最大,并且取得物品的编号的子集异或和不能为0. 思路 这是个贪心,我们先按照价值从大到小排序,然后贪心地取,如果当前要取的物 ...
- 洛谷P1217回文质数-Prime Palindrome回溯
P1217 [USACO1.5]回文质数 Prime Palindromes 题意:给定一个区间,输出其中的回文质数: 学习了洛谷大佬的回溯写法,感觉自己写回溯的能力不是很强: #include &l ...