大屏使用dv-digital-flop定时刷新显示总人数
Posted 鲸鱼姐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大屏使用dv-digital-flop定时刷新显示总人数相关的知识，希望对你有一定的参考价值。
本文在基础上进行改进，后端使用若依后端IofTV-Screen: 🔥一个基于 vue、datav、Echart 框架的物联网可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、数据滚动配置，内部图表自由替换、Mixins注入等功能，持续更新.... - Gitee.com
1.效果：将系统总人数统计显示到大屏
1. 使用dv-digital-flop组件
<dv-digital-flop :config="config1" style="width:100%;height:100%;" />
number中的元素将被用于替换content内容模版中的nt标记，其替换顺序与模版标记的顺序一一对应：
config1:
number: [],
content: 'nt',
style:
...style,
fill: "#00fdfa",
,
2. 获取数据并显示
//统计人数
countUsers().then(res=>
if (!this.timer)
console.log("统计人数", res);
if (res.code == 200)
this.countUsers = res.countUsers;
this.config1 =
...this.config1,
number: [this.countUsers]
)
3. 使用定时器轮询刷新
//轮询
switper()
if (this.timer)
return
let looper = (a) =>
this.getData()
;
this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
其中this.$store.state.settings.echartsAutoTime可替换成3000
4. user.js增加api
// 查询用户数
export function countUsers()
return request(
url: '/system/user/countUsers',
method: 'get'
)
5. 增加controller后端方法
/**
* 获取用户数
*/
@GetMapping("/countUsers")
public AjaxResult countUsers()
AjaxResult ajax = AjaxResult.success();
Integer count = userService.countUsers();
ajax.put("countUsers", count);
return ajax;
6. mapper.xml
<select id="countUsers" resultType="Integer"> select count(1) from sys_user where del_flag='0' </select>
7. 最终代码
<template>
<ul class="user_Overview flex" v-if="pageflag">
<li class="user_Overview-item" style="color: #00fdfa">
<div class="user_Overview_nums allnum ">
<dv-digital-flop :config="config1" style="width:100%;height:100%;" />
</div>
<p>总人数</p>
</li>
</ul>
<Reacquire v-else @onclick="getData" line-height="200px">
重新获取
</Reacquire>
</template>
<script>
import countUsers from "@/api/system/user";
let style =
fontSize: 24
export default
data()
return
// 人员总数
countUsers: 0,
pageflag: true,
timer: null,
config1:
number: [],
content: 'nt',
style:
...style,
fill: "#00fdfa",
,
;
,
created()
this.getData()
,
mounted() ,
beforeDestroy()
this.clearData()
,
methods:
clearData()
if (this.timer)
clearInterval(this.timer)
this.timer = null
,
getData()
this.pageflag = true;
//统计人数
countUsers().then(res=>
if (!this.timer)
console.log("统计人数", res);
if (res.code == 200)
this.countUsers = res.countUsers;
this.config1 =
...this.config1,
number: [this.countUsers]
)
this.switper()
,
//轮询
switper()
if (this.timer)
return
let looper = (a) =>
this.getData()
;
this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
,
,
;
</script>
<style lang='scss' scoped>
.user_Overview
li
flex: 1;
p
text-align: center;
height: 16px;
font-size: 16px;
.user_Overview_nums
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 22px;
margin: 50px auto 30px;
background-size: cover;
background-position: center center;
position: relative;
&::before
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
&.bgdonghua::before
animation: rotating 14s linear infinite;
.allnum
// background-image: url("../../assets/img/left_top_lan.png");
&::before
background-image: url("../../../assets/bigScreen/img/left_top_lan.png");
</style>
怎么让 echarts 图表动起来？定时器解决它 —— 大屏展示案例（动态仪表盘动态柱状图）
该案例为了实现效果采用的是随机生成数据，比较适用于偏向展示效果的静态页面如门户网站的首页、登录页等等。颜色样式自调。
需要注意在有些项目中仪表盘可能无法正常显示，这是因为你在项目中引入的 echarts 版本太低，需要引入新版本 echarts5。
目录
一、案例效果
做案例之前正常引入 echarts 图表，echarts 依赖包的下载和安装此处省略，详情可参见文章：
https://blog.csdn.net/weixin_53072519/article/details/122087289二、实现步骤
1.创建页面结构
两个带有 id 名的容器，样式自定。
<template>
<div style="width: 100%;">
<!--仪表盘-->
<div id="gauge"></div>
<!--柱图-->
<div id="bar"></div>
</div>
</template>
<style scoped>
#gauge
width: 8rem;
height: 5.5rem;
position: absolute;
top: 2.55rem;
left: 5.7rem;
#bar
width: 8rem;
height: 2.2rem;
position: relative;
top: 2.8rem;
left: 5.7rem;
</style>
2.创建方法绘制图表并调用
methods 中分别创建绘制图表的方法 ，然后在挂载阶段 mounted 中分别调用。
<script>
export default
data()
return ;
,
methods:
//绘制柱状图
draw_bar()
let myEchart = this.$echarts.init(document.getElementById("bar"));
var option = ;
myEchart.setOption(option);
,
//绘制仪表盘
draw_gauge()
let myEchart = this.$echarts.init(document.getElementById("gauge"));
var option = ;
myEchart.setOption(option);
,
,
mounted()
//调用绘制图表的方法
this.draw_bar();
this.draw_gauge();
,
;
</script>
3.在option设置图表及其样式
可直接将官网案例的代码复制到 option 处后自行修改。
三、要点知识总结
实现图表动态变化的原理其实就是基于定时器 setInterval() ，它与 setTimeout() 区别是 setInterval() 是周期性的，按照给定的时间周期反复循环的执行包含在它里面的程序，而setTimeout() 是在给定的时间后执行一次程序就结束。
所以我们的做法就是，设置循环定时器，每隔一定的时间便获取一次图表中的数据且数据完全随机，并重新显示图表，然后在设置合适的动画和间隔时间，这样就实现了图表的动态变化。
比如柱状图的定时器设置如下：
setInterval(() =>
for (let i = 0; i <= 11; i++) //定义i确保柱图的每一项都能被刷新
option.series[0].data[i] = (Math.round(Math.random() * 600) + 1); //数据随机取值1-600,不要为0,如果为0的话该柱就会消失
myEchart.setOption(option, true); //每刷新一次重新显示图表
, 200);每隔200毫秒重新定义一次柱状图中的数据(option.series[0].data[i]) ，此处为1-600的随机数，每次数据更新后重新显示图表(myEchart.setOption(option, true))，这样就达到了数据不停变化的效果。
然后就是动画，在echarts官网中配置项文档中有该类属性，可以设置仪表盘指针的变换速度、柱图中的柱变换速度等。
| animation: true | 是否开启动画 |
| animationDuration: 1020 | 初始动画的时长 |
| animationDurationUpdate: 1020 | 数据更新动画的时长 |
| animationEasingUpdate: "quadraticIn" | 数据更新动画的缓动效果 |
最后将动画时长与定时器间隔时长合理搭配即可实现动态效果。
四、完整代码+详细注释
<template>
<div style="width: 100%;">
<!--仪表盘-->
<div id="gauge"></div>
<!--柱图-->
<div id="bar"></div>
</div>
</template>
<script>
export default
data()
return
,
methods:
// 绘制柱状图
draw_bar()
let myEchart = this.$echarts.init(document.getElementById("bar"));
var option =
xAxis:
type: 'category',
data: ['银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险'],
axisLine:
show: true,
onZero: true,
symbol: "none",
lineStyle:
color: "#e5e5e5"
,
axisTick:
show: false
,
,
yAxis:
show: false,
type: 'value',
axisTick:
show: false
,
axisLine:
show: false
,
axisLabel:
show: false
,
//图表与容器的位置关系
grid:
left: '3%', // 与容器左侧的距离
right: '3%', // 与容器右侧的距离
top: '11%', // 与容器顶部的距离
bottom: '12%', // 与容器底部的距离
,
series: [
data: [520, 600, 450, 380, 370, 510, 120, 200, 150, 620, 600, 450,],
type: 'bar',
backgroundStyle:
color: "rgba(111, 111, 22, 1)"
,
//坐标轴显示器的文本标签
label:
show: true,
position: 'top',
color: '#e5e5e5'
,
//柱条颜色
itemStyle:
color:
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
offset: 0, color: 'rgba(0,234,223,0.9)' // 0% 处的颜色
,
offset: 1, color: 'rgba(0,234,223,0.3)' // 100% 处的颜色
],
global: false // 缺省为 false
,
animationEasing: "linear",
animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
animationDurationUpdate: 300, //数据更新动画的时长
animation: true //开启动画
]
;
//此处使用定时器setInterval循环刷新柱状图的值,每次刷新数据均不同
setInterval(() =>
for (let i = 0; i <= 11; i++) //定义i确保柱图的每一项都能被刷新
option.series[0].data[i] = (Math.round(Math.random() * 600) + 1); //数据随机取值1-600,不要为0,如果为0的话该柱就会消失
myEchart.setOption(option, true); //每刷新一次重新显示图表
, 200);
,
//绘制仪表盘
draw_gauge()
let myEchart = this.$echarts.init(document.getElementById("gauge"));
var option =
series: [
//左侧仪表盘
name: 'gauge 1',
type: 'gauge',
min: 0,
max: 150,
startAngle: 230,
endAngle: -310,
splitNumber: 5,
radius: '35%',
center: ['21%', '55%'],
axisLine:
lineStyle:
color: [[1, '#34FFCA']],
width: 12,
,
splitLine:
distance: -7,
length: 16,
lineStyle:
color: '#fff',
width: 1
,
axisLabel:
distance: 2,
fontSize: 10,
fontWeight: 400,
fontFamily: 'Arial',
color: '#fff'
,
anchor: ,
pointer:
width: 5,
length: '60%',
itemStyle:
color: '#fff'
,
detail:
show: false
,
data: [
value: 20
],
animationEasing: "linear",
animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
animationDurationUpdate: 1000, //数据更新动画的时长
animation: true //开启动画
,
//中间的仪表盘
name: 'gauge 2',
type: 'gauge',
min: 0,
max: 180,
z: 10,
startAngle: 210,
endAngle: -30,
splitNumber: 9,
radius: '50%',
center: ['50%', '50%'],
axisLine:
show: false,
lineStyle:
width: 2,
color: [
[0.825, '#fff'],
]
,
splitLine:
distance: 35,
length: 22,
lineStyle:
color: '#fff',
width: 1
,
axisLabel:
distance: 3,
fontSize: 12,
fontWeight: 400,
fontFamily: 'Arial',
color: '#fff'
,
anchor: ,
pointer:
width: 6,
offsetCenter: [0, '-10%'],
length: '75%',
itemStyle:
color: '#fff'
,
data: [
value: 130
// name: '1/min x 1000'
],
detail:
show: false
,
animationEasing: "linear",
animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
animationDurationUpdate: 1000, //数据更新动画的时长
animation: true //开启动画
,
name: 'gauge 3',
type: 'gauge',
min: 0,
max: 8,
z: 10,
splitNumber: 8,
radius: '50%',
axisLine:
lineStyle:
width: 12,
color: [[1, '#34FFCA']]
,
splitLine:
show: false,
,
axisTick:
show: false
,
axisLabel:
show: false
,
anchor: ,
pointer:
show: false
,
title:
show: false
,
detail:
show: false,
offsetCenter: ['0', '70%'],
color: '#FFF',
fontSize: 18,
formatter: 'value.00'
,
// value is speed
data: [
value: 130,
],
animationEasing: "linear",
animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
animationDurationUpdate: 1000, //数据更新动画的时长
animation: true //开启动画
,
//右侧的仪表盘
name: 'gauge 4',
type: 'gauge',
min: 0,
max: 8,
startAngle: 135,
endAngle: -50,
radius: '37%',
center: ['79%', '55%'],
//右侧表盘颜色
axisLine:
lineStyle:
color: [[1, '#34FFCA']],
width: 12
,
detail:
show: false
,
splitLine:
show: false,
length: 6
,
axisTick:
show: false
,
axisLabel:
show: false
,
anchor: ,
pointer:
show: true,
width: 5,
itemStyle:
color: '#fff'
,
data: [
value: 6,
name: ''
],
animationEasing: "linear",
animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
animationDurationUpdate: 1000, //数据更新动画的时长
animation: true //开启动画
,
name: 'gauge 5',
type: 'gauge',
min: 0,
max: 8,
splitNumber: 4,
startAngle: 132,
endAngle: -45,
radius: '30%',
center: ['79%', '55.3%'],
axisLine:
lineStyle:
width: 0,
color: [
[0.15, '#f00'],
[1, 'rgba(255, 0, 0, 0)']
]
,
axisLabel:
distance: 1,
fontSize: 10,
fontWeight: 400,
fontFamily: 'Arial',
color: '#fff',
,
splitLine:
distance: 35,
length: 12,
lineStyle:
color: '#fff',
width: 1
,
animationEasing: "linear",
animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
animationDurationUpdate: 1000, //数据更新动画的时长
animation: true //开启动画
,
]
;
//使用定时器setInterval循环刷新仪表盘的值
setInterval(() =>
option.series[0].data[0].value = (Math.random() * 150).toFixed(2) - 0; //表盘1
option.series[1].data[0].value = (Math.random() * 180).toFixed(2) - 0; //表盘2
option.series[3].data[0].value = (Math.random() * 8).toFixed(2) - 0; //表盘3
myEchart.setOption(option, true); //每次刷新后重新显示图表
, 500);
,
mounted()
//调用绘制图表的方法
this.draw_bar();
this.draw_gauge()
</script>
<style scoped>
#gauge
width: 8rem;
height: 5.5rem;
position: absolute;
top: 2.55rem;
left: 5.7rem;
#bar
width: 8rem;
height: 2.2rem;
position: relative;
top: 2.8rem;
left: 5.7rem;
</style>
以上是关于大屏使用dv-digital-flop定时刷新显示总人数的主要内容，如果未能解决你的问题，请参考以下文章
怎么让 echarts 图表动起来？定时器解决它 —— 大屏展示案例（动态仪表盘动态柱状图）