-
基于 Echarts 实现可视化数据大屏展示
2019-09-05 15:28:48收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计30个页面,可以在此基础上重新开发。 实现方式:html + Echarts 贴图 有需要的可以联系我 暂时不开源,之后会考虑写教程和开源项目。 ...前言
收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计30个页面,可以在此基础上重新开发。
实现方式:html + Echarts贴图
源码
好了好了,现在开源代码;
求源码的各位,码字不易,千万不要吝啬你们的Star和点赞评论哦~
github项目地址:基于 Echarts 实现可视化数据大屏展示
没有github的可去我的资源下载压缩包:echars模板.7z
另附近期整理的地图解析的博客:使用echarts完成中国省市区县镇地图展示;
如果本文对你有帮助的话,请不要忘记给我点赞留言打call哦(混个积分)~o( ̄▽ ̄)do
有其他问题留言 over~ -
基于VUE + Echarts 实现可视化数据大屏展示效果
2019-04-28 18:46:37中国(寿光)国际蔬菜科技博览会智慧农业系统 — LED拼接屏展示前端开发文档 上线后呈现效果: 一、开发需求及方案制定 1、确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11全屏后...中国(寿光)国际蔬菜科技博览会智慧农业系统 — 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
/*全局引入*/ import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' //这里注意具体看使用的版本是否需要引入样式,以及具体位置 Vue.use(VueAwesomeSwiper)
- 页面中使用
<swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide v-for="(item,index) in proImgList" :key="index"> <img class="img-cover" :src="item"> </swiper-slide> </swiper>
- js中配置参数,详细请移步:https://www.swiper.com.cn/api/index.html
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控制
- 页面使用:
<div class="growing"> <div class="g-item" v-for="(item,index) in growingList" :key="index" :class="{active: currentIndex==index}"> <div class="left-title"> <div class="title-line"></div> <div class="flex"> <p class="step color-fff">{{item.id}}</p> <div class="color-fff text"> <h3>{{item.period}}</h3> <!-- <p>{{item.dataInfo}}</p> --> </div> </div> </div> <img :src="item.imgSrc" alt=""> </div> </div>
- 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流地址
- 页面使用:
<video id="myPlayer" playsInline webkit-playsinline autoplay> <source src="对应流地址" type="rtmp/flv" /> </video>
- 将EZuikit.js下载本地引入,修改下
import { EZuikit } from '../common/js/EZuikit.js'
mounted(){ var player = new EZUIKit.EZUIPlayer('myPlayer'); }
如有不懂请咨询QQ:1294487763,非相关请勿扰,谢谢!
打个广告:
本人承接微信公众号/微信小程序/可视化大屏/企业官网/管理系统等项目,有需要Q我吧~ (#^.^#)
-
成果展示
2020-08-16 12:35:53下面是我自己的成果展示、希望大家批评指教 1、数据可视化 技术栈:fiexible + echarts 网址:https://datavisualization.store/下面是我自己平时做的一些项目,希望大家批评指教
1、数据可视化
技术栈:fiexible + echarts
网址:https://datavisualization.store/ -
可视化展示——web展示页面
2020-06-25 02:17:31web展示页面展示界面 展示界面 1.这个界面用来选择论文集合,在论文集合选择完成之后,分析出论文集合的一些性质,比如平均reference引用数目,平均字数等等论文集合的特征,并用柱状图等形象化表示出来。 2.页面...web展示页面
展示界面
1.这个界面用来选择论文集合,在论文集合选择完成之后,分析出论文集合的一些性质,比如平均reference引用数目,平均字数等等论文集合的特征,并用柱状图等形象化表示出来。
2.页面左侧的部分“论文列表”,这里将展示选择好论文集合以后的论文集合的论文的标题,初步设想是点开标题后可以查看论文的更详细的内容的分析。
输入界面:
3.实现点击上图左侧的论文标题,实现查看相关论文的具体内容的界面,并且可以返回到上图所示界面,从而方便查看其他的论文的具体内容。
4.输入相关的论文名,按 详情 按钮,可以看到此篇论文的详细信息,并将其论文引用和被引用的部分用ptecharts的关系图(动态)表示出来
5.实现选择年份和会议进行论文的筛选:
此时简单输出了满足上述条件的论文id号:(为了下一步做准备)
6.在初始界面实现 整个数据集的可视化展示:
7.整体:
上述内容详见:https://blog.csdn.net/qq_41798302
-
海康RTSP流转RTMP并推送至Web端展示
2018-07-19 11:01:26最近帮着老师做项目的时候碰到一个难题,将海康摄像头的影像实时传输到前端页面进行展示。Google查了两天,终于有些眉目,记录一下经验。 大致需要经过以下几个步骤: 获取海康摄像头的视频流(基于RTSP协议的... -
3D GIS 展示
2018-07-09 11:39:36基于arcgis开发的3Dgis展示系统;附上github下载地址,如果好用麻烦点下start -
快递接口API:最全快递轨迹展示方式及实现Java版
2020-12-30 14:51:44昨天的文章整体谈了一下轨迹展示的多种用法,特别提到了一点:带图文的地图轨迹展示。不少朋友对这个感兴趣,今天就特地来具体说一下这个。 先上一张图看看目前的主流做法: 如图中所示,主要有3个要点: 1、可视化... -
vue大数据可视化(大屏展示)解决方案
2020-04-21 14:09:10一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板,最近更新了详细的介绍说明,实现大数据可视化。通过 vue 组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用 DataV 自带组件,可自由... -
校园O2O商铺平台-店铺列表展示功能
2020-03-24 16:21:05店铺列表展示之Dao层的实现 正在更新 店铺列表展示之Service层的实现 正在更新 店铺列表展示之Contoller层的实现 正在更新 店铺列表展示前端开发 正在更新 店铺管理页面的前端开发 正在更新 ... -
elementui上传组件,文件展示列表自定义为表格展示
2020-06-08 20:52:50elementui上传组件,文件展示自定义为表格展示 业务需要上传文件列表,所以采用自定义上传,删除为只删除数组数据,不调用接口,不使用elementui自带的文件列表 效果图 uploadFiles.vue(上传子组件) <!-- 费用报销... -
怎么把pycharm中的项目横向展示转为竖向展示
2019-04-29 14:18:28把pycharm中的项目横向目录展示转为竖向展示 -
vue之使用iview插件实现列表展示或table展示
2018-08-23 15:14:271.iview了解; 开发过项目后台管理系统的人都知道,很多...再就是一些用户的消费情况会以曲线图、折线图、柱状图等展示给管理员,用于用户分析,方便推荐。而在开发后台管理系统中,基本上都是很多前端人员参与... -
数据展示方式之树形展示+H5拖动效果
2018-02-26 23:09:39常见的数据展示的方式如用表格可以展示很多数据,或者用z-tree展现上下级节点的数据,又或者用echart插件或者对d3对数据进行一些可视化处理,使得数据展现的更为直观丰富。今天来分享一下类似树结构的数据展示,是一... -
text-shadow好看特效代码展示
2020-03-20 22:25:20文章目录一:全部效果展示:二:代码展示:三:代码说明: 一:全部效果展示: 二:代码展示: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>... -
EasyUI之datagrid展示数据列表
2018-05-04 01:39:48写在最前: 如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统,第一次接触到EasyUI的时候,往往会...博主就是如此:在写完一个增删改查之后,才发现EasyUI越学越有意思,页面都是靠局部刷新来动态展示数据,这... -
关于前端页面展示图片展示时改变方向的解决办法
2019-04-10 09:51:28最近在做项目时发现在手机端上传的照片,后端传给web前端展示时改变了方向, 本来的图片是这样的: 页面中展示的图片是这样的: 后来发现在图片地址中加上这句即可:?x-oss-process=image/auto-orient,1 我这里... -
校园O2O商铺平台-前台展示系统
2020-03-24 17:30:27首页后台的开发 正在更新 首页前端的开发 正在更新 店铺列表页后端的开发 正在更新 店铺列表页前端的开发 正在更新 商品详情页的开发 正在更新 店铺详情页的开发 ...前端展示系统bug修复 正在更新 ... -
IDEA,代码缩略简化展示,点击后才能完整展示
2018-10-23 15:51:29问题: idea的代码例如,set,get等,刚打开的时候都是缩略展示,只有点击的时候才能完整展示。 解决: 把红框里的去掉即可解决。 -
文章展示从数据库到前端页面实现部分展示
2019-03-02 12:13:45前后端交互实现前端页面展示数据库部分文章: <c:forEach items="${userinfo}" varStatus="i" var="item" > <div class="article"> &... -
Qt数据列表展示
2019-04-21 06:24:00Qt数据列表展示 Qt中使用QListWidget,ableWidget,QTreeWidget(只考虑最大3层)自定义子widget来展示数据的时候,通常子widget的个数达到了上千加载展示就会很慢,而且很耗内存。原因是new出来的widget太多了。下面... -
LiveGBS接入LiveQing流媒体服务实现云端录像和大屏展示
2019-03-14 14:32:14LiveGBS接入LiveQing流媒体服务实现云端录像和大屏展示,将能力进一步延伸,支持云端录像,云直播的相关业务及场景。 安装包下载 LiveGBS LiveQing 一步一步操作 1. 启动LiveQing流媒体服务 2. 登录服务默认用户... -
es搜索高亮展示
2019-08-14 21:48:22在某些分类电商网站中,经常遇到这样一种需求,对搜索出来的数据的某些字段进行高亮展示,这样让产品的某些属性和特点更加容易受到关注,也就是突出商品卖点 在电商或分类网站中,由于要加载的数据量大,如果后端... -
ckeditor 展示样式丢失
2017-07-18 07:47:07ckeditor 展示样式丢失   我只想展示,不需要再... -
如何制作你的Web展示方案视频课程
2017-02-24 14:05:51Web gl技术日渐成熟,未来的任何展示方案都会通过web途径实现。对于规划设计行业、方案展示的效果不言而喻。 -
IDEA 去除缩略展示
2017-08-23 14:21:19IDEA 缩略展示 -
Qt 大数据列表展示
2016-08-04 22:59:26Qt中使用QListWidget, QTableWidget,QTreeWidget(只考虑最大3层)自定义子widget来展示数据的时候,通常子widget的个数达到了上千加载展示就会很慢,而且很耗内存。原因是new出来的widget太多了。下面的解决方案希望... -
arcgis for js 展示地图图例
2018-07-14 17:55:31arcgis地图展示过程中,展示图例是很平常的。问题是,要怎么展示。 一般来说,只要给个图例控件就搞定了。 但是,像动态图层(ArcGISDynamicMapServiceLayer)的图层展示,都是整个服务加载,然后指定一些图层是否... -
Kibana展示使用统计图的方式展示es的数据
2019-03-06 14:13:50然后输入你索引的名称 ...我这只是个示例,如果想要知道更多类型的设置和数据展示的类型的话请移步: https://www.elastic.co/guide/cn/kibana/current/createvis.html 统计图样式 https://blog.csdn.net/ju... -
vue element table expand 扩展行点击行展示且保证只展示一行
2019-01-17 18:30:36背景:因为element里面的扩展行支持多行展示扩展行,但接到了需求,只能展示一行,如:第一行扩展,点击第二行的时候,第一行收起,第二行展开。同时改成点击行展示扩展内容 <el-table :data="...
-
使用 Linux 平台充当 Router 路由器
-
天然富硒科技成果转化-李喜贵:成立联合体谋定农业大健康
-
有关高速信号和高速PCB理解误区,你中招了吗?
-
程序员必修基础套餐课
-
商城项目总结技术点
-
DOPOD900_HK_130108_130224_11100_CHT_Ship.exe
-
从算法实现到MiniFlow实现,打造机器学习的基础架构平台
-
SpellChecker.vsix
-
区块链应用开发实战(Go语言方向)
-
Mysql数据库面试直通车
-
深究字符编码的奥秘,与乱码说再见
-
Setup_LightCycler96.msi
-
js 操作location URL对象进行操作
-
NFS 网络文件系统
-
C++11 14 17 20 多线程从原理到线程池实战
-
这个是Google提供的ADB工具包,里面还带有fastboot.exe
-
基于多维图像信息的肺结节良恶性鉴别方法
-
NFS 实现高可用(DRBD + heartbeat)
-
激酶组的高含量siRNA筛选确定了参与Git2诱导的间充质-上皮转化的激酶。
-
hive入门学习:explain执行计划的理解