基于VUE + Echarts 实现可视化数据大屏展示效果[通俗易懂]
大家好,又见面了,我是你们的朋友全栈君。
中国(寿光)国际蔬菜科技博览会智慧农业系统 — LED拼接屏展示前端开发文档
上线后呈现效果:
一、开发需求及方案制定
1、确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11全屏后刚好占满整屏且无滚动条;
2、与产品设计确定页面相关功能:
- 第一屏相关功能:实时时间、当地天气、菜博会基本信息、图表数据统计(近三日人流量、寿光最近价格行情、菜博会新品种/新技术/新模式)、展区监控、产品图展示、中间菜博会宣传视频+场馆分布介绍图切换展示、下一页;
- 第二屏相关功能:实时时间、当地天气、大棚基本信息、彩椒种植模型、传感器数据展示、大棚监控、设备数据展示、报警记录和农事记录数据展示、中间大棚植物生长三维动画、返回;
- 第一屏与第二屏无缝切换且循环;
3、确认拼接屏展示时远程投屏的浏览器,根据页面所要实现的功能,挑选兼容性最好的浏览器,最终选定:360极速浏览器的兼容模式(IE10);
4、页面模块划分,确定两屏切换方案,编写公共样式;
二、功能实现(不局限于此):
- 编码工具:Visual Studio Code
- js框架:vue
- 接口对接:axios
1、两屏循环切换采用单页,v-show来指定显示和隐藏的模块,此处不用v-if是因为我们需要在第一屏数据获取完后就获取到第二屏的接口数据并渲染,给用户视觉体验效果更好;v-if和v-show的区别请移步vue官方:https://cn.vuejs.org/v2/guide/conditional.html
- 第一屏切换至第二屏:监听视频的播放+图片显示,当视频播放完毕后显示图片,停留30s,然后切换第二屏,但是当用户点击下一页切换至第二屏时第一屏的视频停止播放;
- 第二屏切换至第一屏:监听视频的播放,同理;
2、自适应:拼接屏是直接连接电脑投屏上去,不需要考虑自适应的问题,如需考虑自适应请用rem;
3、图表(百度开发的Echarts)曲线图、柱状图,雷达图,散点图;先获取数据然后再绘制,详细请移步echarts官方:https://echarts.baidu.com/option.html#title
- 当前项目安装echarts依赖,npm install echarts -save
- 全局引入/按需引入;
- 全局:main.js
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
- 按需:page1.vue
var echarts = require(‘echarts’);
- 页面使用;
例:寿光最新价格行情曲线图
<template>
<div id="price-quotation" style="width: 6rem; height: 4rem"></div>
<template>
<script>
var echarts = require('echarts');
export default {
data(){
return{
highPriceList: [], //寿光今日价格数据列表 - 高
lowerPriceList: [], //寿光今日价格数据列表 - 低
}
},
created(){
var that = this;
// 先获取接口的价格数据
that.getPrice();
window.setInterval(() => { //每小时请求一次接口
setTimeout(that.getPrice, 0)
}, 360000)
},
mounted(){
//绘制曲线图
that.drawDataTable1();
},
methods:{
drawDataTable1(){
// 基于准备好的dom,初始化echarts实例
let myChart1 = echarts.init(document.getElementById('price-quotation'))
console.log('图表中获取价格列表====')
console.log(this.highPriceList)
// 绘制图表
myChart1.setOption({
title: { text: '' },
grid: {
left: '10%',
right: '8%',
top:'20%',
},
legend: {
top: '3%',
textStyle: {color: '#fff'},
itemGap: 20,
itemHeight: 10,
data:[
{name: '最高价'},
{name: '最低价'}
]
},
color:['#28F2A8','#28D8FF'],
xAxis: [
{
type: 'category',
data: ['大红柿子(精品)','贝贝小柿子','大龙茄子','红彩椒','黄彩椒'],
boundaryGap: false,
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
lineHeight: 24
},
axisLine: { // 坐标轴线
lineStyle: {
color: 'rgba(85,85,85,0.4)'
},
},
axisTick: { //刻度线
show: false,
lineStyle: {
color: 'rgba(85,85,85,0.4)'
}
},
axisPointer: {
type: 'shadow'
},
}
],
yAxis: [
{
type: 'value',
name: '元(斤)',
min: 0,
max: 10,
interval: 2.5,
nameTextStyle: {
color: '#fff',
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#fff'
},
},
axisLine: {
lineStyle: {
color: 'rgba(85,85,85,0.4)'
}
},
axisTick: {
show: false,
lineStyle: {
color: 'rgba(85,85,85,0.4)'
}
},
splitLine:{ //去除网格线
show: true,
lineStyle: {
color: ['rgba(85,85,85,0.4)']
}
},
},
{
type: 'value',
axisLine: {
lineStyle: {
color: 'rgba(85,85,85,0.4)'
}
},
},
],
series: [
{
name: '最高价',
type : 'line',
label : {
show: true,
position: 'top',
color: '#fff',
},
itemStyle: {
normal: {
lineStyle: {
width:2, //调整 线条的宽度
color : '#28F2A8' //线条颜色 - 绿色
}
}
},
// showSymbol: false,
smooth: true,
barWidth : '20%',
data: this.highPriceList,
},
{
name: '最低价',
type : 'line',
label : {
show: true,
position: 'bottom',
color: '#fff',
},
itemStyle: {
normal: {
lineStyle: {
width:2, //调整 线条的宽度
color : '#28D8FF' //线条颜色 - 蓝色
}
}
},
// showSymbol: false,
smooth: true,
barWidth : '20%',
data: this.lowerPriceList,
},
]
});
}
}
}
</script>
4、展区监控,菜博会官方使用的海康的摄像头和录像机,且该监控只能内网访问,我们使用的是最简单的办法,将海康的demo放在他们投屏的电脑上,vue中内嵌iframe页面,然后调样式即可;
<div id="page1-rvm1">
<iframe src="http://127.0.0.1/en/cbhs2.html" frameborder="0" wmode="opaque" scrolling="no"></iframe>
</div>
注意:
- 海康的demoWeb 控件 V3.0 基于 ActiveX 和 NPAPI 开发,接口封装于 javascript 脚本,以 javascript 接口形式提供用户 集成,支持网页上实现预览、回放、云台控制等功能。该控件开发包仅支持 B/S 网页开发,不适用于 C/S 开发。
- 安装activex控件,此处坑较多,我的电脑是windows10的系统,IE浏览器始终安装不成功,后再另一台windows7系统的IE10上成功安装了此控件,附上安装失败时的处理方式:https://www.nhxz.com/fanyi/18102974563ba21a90da13da.html
5、产品图展示,图片自动循环轮播,
npm install vue-awesome-swiper –save
页面中使用
js中配置参数,详细请移步:
data中:
swiperOption: { //绿色果蔬的产品轮播
direction: "horizontal",
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop: true,
loopedSlides: 0,
initialSlide: 0,
slidesPerView: 2,
spaceBetween: '3.33%',
speed: 800,
},
监听:
computed: {
swiper () {
return this.$refs.mySwiper.swiper;
}
},
6、植物的种植模型,当切到第二屏时调用该函数,每一个阶段显示一定时间切换,图片的淡入淡出用css3控制
页面使用:
js数组及函数
data中:
growingList: [ //种植模型
{id: '01', period: '缓苗期管理', dataInfo: '(定植后1周)', imgSrc: 'static/images/growing1.png'},
{id: '02', period: '定植期管理', dataInfo: '(定植后2~4周)', imgSrc: 'static/images/growing2.png'},
{id: '03', period: '开花坐果期管理', dataInfo: '(定植后5~8周)', imgSrc: 'static/images/growing3.png'},
{id: '04', period: '果实膨大期和成熟期管理', dataInfo: '(定植后9~11周)', imgSrc: 'static/images/growing4.png'},
{id: '05', period: '采收期管理', dataInfo: '(雌花开放后37~40天采收第一批瓜)', imgSrc: 'static/images/growing4.png'},
],
监听:
watch: {
currentPage (newValue, oldValue) {
console.log("currentPage: "+newValue, oldValue);
if(newValue == 2){
// 种植模型
this.plantModelAnt()
this.pageSwitch2()
}else{
// console.log(newValue, oldValue)
this.pageSwitch1()
}
},
},
函数:
// 种植模型动画
plantModelAnt(){
var that = this;
setTimeout(() => {
console.log("当前展示屏===" +that.currentPage)
if(that.currentIndex < 4){
that.currentIndex += 1
}else{
that.currentIndex = 0
}
console.log('currentIndex====' + that.currentIndex)
that.plantModelAnt()
},11000)
},
7、大棚监控,使用的萤石云,在萤石的后台拿到对应的Rtmp流地址
页面使用:
- 将EZuikit.js下载本地引入,修改下
import { EZuikit } from '../common/js/EZuikit.js'
mounted(){
var player = new EZUIKit.EZUIPlayer('myPlayer');
}
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/134301.html原文链接:https://javaforall.cn
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- vue-echarts画深度图
- 如何查看Vue项目vue的版本号
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- Vue笔记(11) vue-router
- vue快速入门---高速版
- vue源码分析-从new Vue开始
- Vue组件是怎样挂载的
- Vue整合HighCharts和ECharts实现数据可视化
- 「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误?你有没有思考过?
- vue双向绑定原理面试题_面试可以记笔记吗
- Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- vue+echarts实现疫情(全国新增趋势、境外输入省市TOP5)
- 从 Vue 转换看 Webpack 和 Vite 代码转换机制的差异
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)