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

实现方式：html + Echarts
贴图








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

有其他问题留言 over~

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

 

 

 

 

 

下面是我自己平时做的一些项目，希望大家批评指教
1、数据可视化

技术栈：fiexible + echarts

网址：https://datavisualization.store/

web展示页面
展示界面

展示界面
1.这个界面用来选择论文集合，在论文集合选择完成之后，分析出论文集合的一些性质，比如平均reference引用数目，平均字数等等论文集合的特征，并用柱状图等形象化表示出来。

2.页面左侧的部分“论文列表”，这里将展示选择好论文集合以后的论文集合的论文的标题，初步设想是点开标题后可以查看论文的更详细的内容的分析。

输入界面：



3.实现点击上图左侧的论文标题，实现查看相关论文的具体内容的界面，并且可以返回到上图所示界面，从而方便查看其他的论文的具体内容。



4.输入相关的论文名，按 详情 按钮，可以看到此篇论文的详细信息，并将其论文引用和被引用的部分用ptecharts的关系图（动态）表示出来





5.实现选择年份和会议进行论文的筛选：



此时简单输出了满足上述条件的论文id号：（为了下一步做准备）


6.在初始界面实现 整个数据集的可视化展示：





7.整体：



上述内容详见：

https://blog.csdn.net/qq_41798302