精华内容
下载资源
问答
  • 数据大屏可视化模版(设备状态监控大数据统计展示大屏) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 综合信息展示大屏项目解决方案,提供具体的大屏项目建设方案
  • ECharts+html展示大屏模板30多套,可以根据自己需求修改数据和样式。方便便捷,几乎涵盖目前市面上所有常见模板
  • 使用Echarts做的大数据展示大屏,所有样式设计在CSS中,有需要的可以看看,全部板块设计可进行二次开发。
  • ECharts+html展示大屏模板30多套,可以根据自己需求修改数据和样式。方便便捷,几乎涵盖目前市面上所有常见模板
  • vue+echarts实现数据展示大屏

    千次阅读 2020-12-28 23:18:51
    一个数据展示大屏。适用于中小型项目展示,只做学习交流。 技术栈 前端:vue+echarts+axios+vue-router+less 后台:node+koa2+websocket 开发IDE:IDEA 项目展示 PS:图表使用数据均为自造数据,与任何应用或者数据...

    简单介绍

    一个数据展示大屏。适用于中小型项目展示,只做学习交流。

    技术栈

    前端:vue+echarts+axios+vue-router+less
    后台:node+koa2+websocket
    开发IDE:IDEA

    项目展示

    在这里插入图片描述
    PS:图表使用数据均为自造数据,与任何应用或者数据均无关。
    项目展示效果:
    1、图表自动切换,图表不同类目切换效果
    2、大屏主题切换
    3、单独图表放大缩小效果

    开发准备

    一、前端项目的准备

    1.1. vue-cli 脚手架创建项目

    1.1.1 脚手架环境安装

    node install -g @vue/cli
    

    1.1.2 项目创建

    vue create version
    

    本项目中具体使用的配置:
    在这里插入图片描述
    项目搭建完成,运行项目:

    cd version
    npm run serve
    

    1.2 项目的基本配置

    在项目根目录下创建 vue.config.js 文件
    在文件中增加代码

    // 使用vue-cli创建出来的vue工程, Webpack的配置是被隐藏起来了的// 如果想覆盖Webpack中的默认配置,需要在项目的根路径下增加vue.config.js文件
    module.exports = {
    	devServer: {
    	port: 8999, // 端口号的配置
    	open: true // 自动打开浏览器
    	}
    }	
    

    1.3.全局echarts 对象

    1.3.1.引入 echarts 包
    a、将插件,地图相关数据 static 目录复制到 public 目录之下
    在这里插入图片描述

    b、在 public/index.html 文件中引入 echarts.min.js 文件
    在这里插入图片描述
    1.3.2.挂载到 Vue 原型上
    在 src/main.js 文件中挂载
    由于在 index.html 中已经通过script标签引入了 echarts.js 文件夹, 故在 window 全局对象中是
    存在 echarts 全局对象, 将其挂载到 Vue 的原型对象上

    // 将全局echarts对象挂载到Vue的原型对象上
    // 将全局的echarts对象挂载到Vue的原型对象上
    // 别的组件中 this.$echarts
    Vue.prototype.$echarts = window.echarts
    

    在这里插入图片描述

    1.3.3.使用全局 echarts 对象
    在其他组件中使用

    this.$echarts
    

    PS::echarts API传送门

    1.4. axios 的处理

    1.4.1.安装 axios 包

    npm install axi
    

    1.4.2.封装 axios 对象
    在 src/main.js 文件中配置 axios 并且挂载到Vue的原型对象上

    import axios from 'axios'
    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
    // 将axios挂载到Vue的原型对象上
    Vue.prototype.$http = axios
    ......
    
    

    1.4.3.使用 axios 对象
    在其他组件中使用

    this.$http
    

    2.图表组件的开发

    在项目的初期, 先开发每一个单独的图表,在最后将所有的图表合并到一个界面,目前项目已基本搭建完成,只展示部分项目截图,想要了解的同学可以直接下载学习。
    代码已添加相关注释,大家有不理解的可以一起在评论区探讨。
    前端项目代码:前端代码传送门
    后台代码:后台项目传送门
    代码开发学习笔记:学习笔记
    以下以seller.vue为例:
    2.1、组件结构设计
    在 src/components/ 目录下建立 Seller.vue , 这个组件是真实展示图表的组件
    给外层div增加类样式 com-container
    建立一个显示图表的div元素
    给新增的这个div增加类样式 com-chart

    <!-- 商家销量统计的横向柱状图 -->
    <template>
      <div class="com-container">
    <!--    ref vue绑定DOM元素 -->
        <div class="com-chart" ref="seller_ref"></div>
      </div>
    </template>
    <style lang="less" scoped>
    
    </style>
    

    2.2、图表 Seller.vue 基本功能的实现
    1.在mounted生命周期中初始化 echartsInstance 对象

    mounted () {
        this.initChart()
      },
    

    2.在mounted中获取服务器的数据

    mounted () {
        this.initChart()
        // this.getData()
        this.$socket.send({
          action: 'getData',
          socketType: 'sellerData',
          chartName: 'seller',
          value: ''
        })
        window.addEventListener('resize', this.screenAdapter)
        // 界面加载完成,主动适应屏幕
        this.screenAdapter()
      },
    

    3.将获取到的数据设置到图表上

    //  更新数据
        updateChart () {
          const start = (this.currentPage - 1) * 5 // 0
          const end = this.currentPage * 5
          // slice 包含start 不包含end
          const showData = this.allData.slice(start, end)
    
          const sellerNames = showData.map((item) => {
            return item.name
          })
          const sellerValues = showData.map((item) => {
            return item.value
          })
    
          // 抽离样式option
          const dataOption = {
            yAxis: {
              data: sellerNames
            },
            series: [{
              data: sellerValues
            }]
          }
          this.chartInstance.setOption(dataOption)
        }
    

    4、数据的处理, 每5个元素显示一页

    在这里插入图片描述
    更多项目资料,如果感兴趣,大家可以直接传送门去取资料了解
    前端项目代码:前端代码传送门
    后台代码:后台项目传送门
    代码开发学习笔记:学习笔记

    展开全文
  • 自制展示大屏边框

    2020-11-23 13:57:19
    前段时间做大屏只学习研究了图表相关内容,但是仅仅是图表会显得有点单调,所以参考优秀大屏展示页面对一些好看的边框进行模仿设计实现。

    前段时间做大屏只学习研究了图表相关内容,但是仅仅是图表会显得有点单调,所以参考优秀大屏展示页面对一些好看的边框进行模仿设计实现。

    四角荧光边框

    .border1{
        border: 2px solid #02a6b5;
        width: 100%;
        height: 100%;
        position: relative;
        margin: auto;
        box-sizing: border-box;
    }
    .border1:before{content: '';
        position: absolute;
        width: 88%;
        bottom: -2px;
        top: -2px;
        left: 6%;
        border-bottom: 2px solid #0b3146;
        border-top: 2px solid #0b3146;
    }
    .border1:after{
        content: '';
        position: absolute;
        height: 76%;
        left: -2px;
        right: -2px;
        top: 12%;
        border-left: 2px solid #0b3146;
        border-right: 2px solid #0b3146;
    }
    

    效果图:
    在这里插入图片描述

    内发光边框

    .border2{
        width: 100%;
        height: 100%; color:white; padding: 1rem;
        box-shadow: 0 0 3rem rgba(100,200,255,.5) inset;
        background: rgba(0,0,0,0);
        box-sizing: border-box;
    }
    

    效果图:
    在这里插入图片描述

    半透明边框

    .border3{
        height: 100%; width: 100%; color:rgba(60,240,250,1); font-size: 1.5rem; padding:1rem;
        border-radius: .5rem;
        border: 1px solid rgba(0,180,220,0.5);
        background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));
        box-shadow: 0 0 2rem rgba(0,180,220,.1) inset;
        box-sizing: border-box;
    }
    

    效果图:
    在这里插入图片描述

    角标边框

    .border4{
        height: 100%; width: 100%;
        border: 1px solid rgba(22,78,137,1);
        background: rgba(13,35,61,1);
        position: relative;
        box-sizing: border-box;
    }
    .border4::after{
        content: attr(data-corner);
        display: block; position: absolute; top: 0; right: 0;
        width: 5rem; padding: 0 1rem; overflow: hidden; text-align: right; color: rgba(255,255,255,.9);
        background: linear-gradient(45deg,transparent 0% , transparent 30%,  rgba(22,78,137,1) 30%,  rgba(22,78,137,1) 100%)
    }
    

    效果图:
    在这里插入图片描述

    闪光动画边框

    .border5 {
        position: relative;
        z-index: 0;
        width: 100%;
        height: 100%;
        padding: 1em;
        border-radius: 10px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .border5::after {
        box-sizing: border-box;
        content: '';
        position: absolute;
        z-index: -1;
        left: 3px;
        top: 3px;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        background: rgb(14,28,44);
        border-radius: 8px;
    }
    .border5::before {
        box-sizing: border-box;
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image:
                linear-gradient(#02a6b5, #02a6b5), linear-gradient(transparent, transparent),
                linear-gradient(#02a6b5, #02a6b5), linear-gradient(transparent, transparent);
        -webkit-animation: border5 10s linear infinite;
        animation: border5 10s linear infinite;
    }
    @-webkit-keyframes border5 {
        100% {
            -webkit-transform: rotate(1turn);
        }
    }
    @keyframes border5 {
        100% {
            transform: rotate(1turn);
        }
    }
    

    效果图:
    在这里插入图片描述

    目前只实现了5种边框,以后再有新的边框我会直接更新到这个博客,有需要的小伙伴可以收藏一下。

    展开全文
  • 展示前端大屏代码,效果兼容google浏览器,若有问题,请联系我,会在第一时间帮你解决,若代码不喜欢,也请联系我,给你发送另外的代码,谢谢,请给5星好评
  • HTML 大数据可视化 前端页面 无数据库
  • 展示前端大屏代码,效果兼容google浏览器,若有问题,请联系我,会在第一时间帮你解决,若代码不喜欢,也请联系我,给你发送另外的代码,谢谢,请给5星好评
  • 数据可视化,是关于数据视觉表现形式的科学技术研究。其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来的信息.
  • 基于Echarts的js包和CSS做的大数据分析系统,内部包含五个统计分析数据大屏和一个实时监测数据大屏,代码可在CSS和js中进行二次开发,有需要的可以看看。
  • 1/向上面不间断滚动效果 css: <div class="marquee>我是需要滚动的内容</div> /* 动画 */ @keyframes scroll-top { 0%{} ... transform: translateY(-50%);... animation: scroll-top 15s linear infinite;...

    1/向上面不间断无线滚动效果
    css:

    <div class="mesgBox marquee>我是需要滚动的内容</div>
    /* 动画 */
    @keyframes scroll-top {
        0%{}
        100%{
            transform: translateY(-50%);
        }
    }
    .marquee {
        animation: scroll-top 15s linear infinite;
    }
     .marquee:hover{
        animation-play-state: paused;
    }
    
    // 滚动复制一份;如果内容少不足以滚动,就移除marquee
        $('.marquee').each(function () {
            // 拿到了marquee里面的所有row
           var rows = $(this).children().clone();
            // 追加进去
            $(this).append(rows);
            // 父.append(子)==>子.appendTo(父)
            // $('ul').append($('<li>li</li>'));==>$('<li>li</li>').appendTo('ul');
        });
    

    2/一帧一帧向上无线滚动

    <div class="maquee">
    	<ul>
    		<li>第一行</li>
    		<li>第二行</li>
    		<li>第三行</li>
    		<li>第四行</li>
    	</ul>
    </div>
    <style>
    .maquee{width:100%;height:120px;overflow:hidden;}
    .maquee li{height:38px;}
    </style>
    

    js:

     
    	  function autoScroll(obj){  
    			$(obj).find("ul").animate({  
    				marginTop : "-39px"  //一个li子元素的行高
    			},500,function(){  
    				$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
    			})  
    		}  
    		$(function(){  
    			setInterval('autoScroll(".maquee")',2000);
    		}) 
    

    3/无线滚动向上
    html:

    <div class="showMain" style="position: relative;width: 100%; height: 958px; overflow-y: auto">
     <div class="runDataBox innerbox" id="areaBox" style="height: 956px">
        <!--gm运行参数gm -->
        <div id="nowBox"><p>当前显示内容</p></div>
        <div id="nextBox"><p>复制当前显示内容到这里</p></div>
      </div>
    </div>
    <style>
    .runDataBox {
      height: 715px;
      overflow-y: auto;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    
    #nowBox {
      display: flex;
      flex-direction: column;
    }
    </style>
    

    js:

          var speed1 = 20
          var box = document.getElementById('areaBox')
          var box1 = document.getElementById('nowBox')
          var box2 = document.getElementById('nextBox')
          box2.innerHTML = box1.innerHTML
          // $('#box2').html(box1)
          function Marquee1() {
            if (box2.offsetTop - box.scrollTop <= 0) box.scrollTop -= box1.offsetHeight
            else {
              box.scrollTop++
            }
          }
          var MyMar1 = setInterval(Marquee1, speed1)
          box.onmouseover = function () {
            clearInterval(MyMar1)
          }
          box.onmouseout = function () {
            MyMar1 = setInterval(Marquee1, speed1)
          }
    
    展开全文
  • echarts大屏展示模板BI大屏展示5套,BI大数据大屏展示,百度echarts前端模板,医疗,环境检测,数据大屏展示
  • echarts大屏展示

    2018-11-19 16:02:45
    echarts大屏展示
  • 大屏展示源码

    2018-04-03 14:54:49
    使用echarts实现大屏展示 包括数据源码 可修改无加密 包含地图、饼图、柱形图、折线图、等多种常用图表
  • 大屏展示

    2020-08-25 13:41:22
    前端大屏展示 无形装逼最为致命DataV 官网地址:http://datav.jiaminghi.com 小编建议可以从码云或者github上直接clone一份缝缝补补,省点时间陪女朋友 码云:https://gitee.com/liulili963/vueDatav.git

    前端大屏展示

    无形装逼最为致命DataV

    在这里插入图片描述

    官网地址:http://datav.jiaminghi.com

    小编建议可以从码云或者github上直接clone一份缝缝补补,省点时间陪女朋友
    码云:https://gitee.com/liulili963/vueDatav.git

    展开全文
  • 基于 Echarts 实现可视化数据大屏展示

    万次阅读 多人点赞 2019-09-05 15:28:48
    收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计30个页面,可以在此基础上重新开发。 实现方式:html + Echarts 贴图 有需要的可以联系我 暂时不开源,之后会考虑写教程和开源项目。 ...
  • 大屏展示案例

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,448
精华内容 7,779
关键字:

展示大屏