基于VUE + Echarts 实现可视化数据大屏展示效果_vue页面可视化大屏实现

中国(寿光)国际蔬菜科技博览会智慧农业系统 — 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>
 
<sc