前言
收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码，共计30个页面，可以在此基础上重新开发。

实现方式：html + Echarts
贴图








源码
好了好了，现在开源代码；
求源码的各位，码字不易，千万不要吝啬你们的Star和点赞评论哦~
github项目地址：https://github.com/lijie-1024/echarts
没有github的可去我的资源下载压缩包：echars模板.7z，链接地址：https://download.csdn.net/download/weixin_43216105/11673691
另附近期整理的地图解析的博客：使用echarts完成中国省市区县镇地图展示；
如果本文对你有帮助的话，请不要忘记给我点赞留言打call哦（混个积分）~o(￣▽￣)ｄo

有其他问题留言 over~

数据大屏可视化可更直观更智能的决策场景体验，通过数据大屏实时监测企业数据，洞悉运营增长，助力智能高效决策。

数据大屏可以打破数据隔离，通过数据采集、清洗、分析到直观实时的数据可视化，从而达到高效管理决策升级的作用。

多「业务」的应用场景：

基于观远数据智能BI数据分析平台，借鉴内置数据大屏模板，普通员工也可快速制作出专业美观的管理驾驶舱。



                                                              数据大屏可视化

一个大屏快速整合企业内部ERP、POS、CRM、OA等多IT业务系统数据，真正让企业的数据资产用起来，全面驱动决策升级！



                                                                  全渠道数据整合

支持直连市面上常见的20+种关系型数据库，实现准实时、甚至分钟级实时数据的更新展示及复杂计算与分析，完美满足企业“发现问题-快速反应-解决问题”的刚需。



                                                                 实时数据引擎

数据大屏搭建采用拖拽式操作，支持相对布局，层级嵌套；支持宽度自适应。



                                                             拖拽式操作自由布局

近百种可视化图表类型，涵盖柱形图、双轴图、漏斗图、帕累托图、行政地图、室内地图、迁徙图等。



                                                      海量可视化图标

支持钻取、联动等动态分析操作，一键点击，即可层层剖析数据，发现问题根源。



                                                          数据交换动态分析

观远数据平台系统自带的专业、炫酷的可视化动效组件能满足绝大部分数据展示场景需求。



                                                       可视化动效组件

文章同步公 众  号：数据新商业    专业有深度的实战文章  带你晋升高阶岗位

 

关于数据大屏，大家应该都不陌生，近几年是遍地开花，当然也成为了企业的品牌标配。看过很炫的，看过平平无奇的，看过没有重点的，看过只是充当“门面的”，虽然设计结果五花八门，但从使用功能来看，多数企业设计数据大屏无非是以下几个用途：

 

1、作为对外展示的企业名片，我们常常在大型展览或公司一楼大厅中就可以看到一大块布满各种可视化图表的大屏。主要包含一些企业销售业绩，服务用户的体量、累计解决问题量、成交金额或监测环境的主要指标。因为这类大屏主要是对外的，所以不会将特别核心的考核业务数据以及与问题相关的数据在上面进行展示。同时为了让观众更多地注意到数据，这种大屏一般不会局限于单台屏幕播放，一般会采用4*4块电视甚至更多的屏幕进行轮播。另此类大屏对设计要求也比较高，会采取与企业文化相匹配的设计风格来衬托出企业的愿景、内涵及审美。

 

2、数据监控，企业一般都会为自己各个项目配置大屏看板甚至专门有一个指挥中心负责大屏监控的工作，这类大屏专门挑和kpi息息相关的数据进行展示，一般会围绕kpi的全链路环节进行展示，展示的内容按照层级依次下钻，基本能在异常发生时直接在大屏上实现可追溯。一般服务部门级以上规模的大屏会因为涉及细节较多，屏幕内的数据可能会出现多个并列层级的指标树（如同时出现运营、产品的指标树），所以看板内的图表会更多一点，主要以实用，能够确实反映问题为主，设计上就没那么讲究。

 

3、娱乐大屏，比如我们在一些娱乐或者综艺现场看到的现场选手PK投票统计结果。

 

鉴于数据大屏承载的这么多功能，那如何设计好一个数据大屏且有用是一个需要深度思考的问题，总的来说应该考虑到以下几个层面。

 

1、整体布局要简约大方，指标精简有效。通常我们在看一个数据大屏的时候除非是真的是作为数据研究人员会看得非常细致外，多数人还是以匆忙瞥一眼为主，所以想象下用户在10秒钟内能记住多少信息，所以要展示企业、部门业绩时需要指标精简到位，不需要事无巨细地将所有环节数据都予以展示，我们只取最最核心的那个指标进行展示即可。而从人阅读习惯来说，整体图表从上而下或者从左到右的布局方式是较为合理的。

 

2、内容上要以解决或者展现业务为主。对外以展现业务为主，可以选取比较“高”的指标来进行展示，比如月活和日活哪个高展示哪个，因为对外是企业的价值体现，对内才是真正解决问题，哪个低就要特别突出这样才能促使责任人去追溯原因。

 

数据的源头在于业务，如何反映业务在于指标体系，当然成套的指标体系是不适合都展示在大屏上的，容量也不够，所以合理选取核心组合指标是非常关键的，一般来说一个大屏要讲完一个故事，或者大屏里分块讲小故事，所有小故事要汇聚成为一个大故事，而且整个故事内容别人一眼看明白，无需解释，因为一般数据大屏如果立在企业大厅，看的人会形形色色，也不可能配专业人员进行解释，或者数据大屏会面向不同业务部门负责人或者老板，培训讲解也差不多一次两次，后续还是要让看的人能够快速清楚领悟到数字里面的业务内容。

 

3、注意设计逻辑，首先在内容上的设计是要成故事体系的，那么故事里面就会有主次，有辅助信息，会有故事线，会有开头，会有结尾，当然也有分模块，当这些内容都以可视化图表的方式来实现的话，整个框架逻辑就比较复杂而有难度，所以一块好的数据大屏要考虑的东西是非常多的，正常来说首先符合业务逻辑，然后是数据展现顺序逻辑，然后是正常的阅读逻辑。

 

4、设计美观度。因为整块大屏容量较广，图表不一，内容不一，一般来说会有数字指标，会有图，有的还有注解或者备注，所以协调是一个非常重要的点，协调包括线框的协调、颜色的协调、企业Logo的协调以及图表大小的协调，当然还有字号的协调，如果大家对于这些协调性没有具象的认知，建议大家在PPT的白板上进行测试，效果差距真的不是一点点。以上几个要点都是美观度设计的重点，不能顾此失彼。

 

那为什么要讲究美观度，举个形象的一个帖子，当有人看到天空一群鸟飞过的时候，有人说：“卧槽，天空有一群鸟飞过。”然后还有人说：“落霞与孤鹜齐飞，秋水共长天一色。”用户的体验感真的是阳春白雪和下里巴人，所以是大屏美观读者会有看的欲望，大屏言之有物读者会有价值感。

 

当然设计顺序是先言之有物，物有价，美观度才会锦上添花。

 

颜色上给个小提议，最好以企业LOGO来取色，然后LOGO色就成为大屏的主色调，整体辅助色就从主色附近的邻近色进行搭配，这样绝对是不会出错的。

最后放一块比较常用的大屏设计布局，中规中矩不会出彩但一定不会出错。

 

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