精华内容
下载资源
问答
  • h5+echarts大屏数据展示经验总结

    千次阅读 2020-01-20 15:23:05
    布局,一般情况下大屏都是恰好铺满整个屏幕,当我们f11切换全屏时候经常会导致空出一节或者有部分内容超出屏幕,导致观赏效果不佳。这时候我们只需要用100vh设置一个总容器再利用flex布局填充总容器就可以确保任何...
    1. 布局,一般情况下大屏都是恰好铺满整个屏幕,当我们f11切换全屏时候经常会导致空出一节或者有部分内容超出屏幕,导致观赏效果不佳。这时候我们只需要用100vh设置一个总容器再利用flex布局填充总容器就可以确保任何情况都是铺满全屏。
    2. 大屏资源实例:https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi该项目总结了很多大屏样式,可以模仿设计出适合自己的方案。智慧社区智慧社区
    3. echarts实例,图表可以很直观的表示数据特征,同事又很具有观赏性,因此大屏制作中常用到许多图表,https://gallery.echartsjs.com/explore.html提供了很多漂亮的echarts图例子,通常我们只需在该网站上找到适合自己的图表,copy下来加上自己的数据稍作修改就可以达到意想不到的效果。
    4. 优秀的配色和图表间的间隔设计可以让大屏给人一种眼前一亮的感觉,大大提升大屏的感染力(这是对比了自己和同事做的大屏后的感想),然而配色是个很难很费时间得活,能交给美工最好,如果没有美工只能自己慢慢调整,https://color.adobe.com/zh/create这个工具可以自由搭配颜色,通过一定得颜色搭配原理找到适合放一起得颜色。
    5. 仅仅一个静态的大屏难免让人觉得枯燥,我们可以让图表产生轮播的效果让图表动起来,echarts-auto-tooltip.js这个插件可以很方便的用一行代码让图表动起来。用法:https://www.cnblogs.com/chengwb/p/5833454.html
    展开全文
  • echarts大屏展示

    2018-11-19 16:02:45
    echarts大屏展示
  • 1. 可视化适配方案 设计稿是1920px ...在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。 注意必须要有高度和宽度。 3. Echarts-基础配置 需要了解的主要配置:series xAxis yAxis grid tooltip titl

    1. 可视化适配方案

    设计稿是1920px

    1. 手动修改 flexible.js 文件,将屏幕划分为24等份
      在这里插入图片描述
    2. 将 cssrem 插件的基准值设置为 80 px

    插件 > 配置按钮 > 配置拓展设置 > Root Font Size 里面设置。
    在这里插入图片描述

    2. 注意事项

    在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

    注意必须要有高度和宽度。

    3. Echarts-基础配置

    需要了解的主要配置:series xAxis yAxis grid tooltip title legend color

    • series

      • 系列列表。每个系列通过 type 决定自己的图表类型
      • 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
    • xAxis:直角坐标系 grid 中的 x 轴

      • boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。(是否让线条和坐标轴之间有缝隙)。
    • yAxis:直角坐标系 grid 中的 y 轴

    • grid:直角坐标系内绘图网格。 网格配置,可以控制图表大小

    • title:标题组件

    • tooltip:提示框组件

    • legend:图例组件(series 里面有了 name 值则 legend 里面的 data 可以删掉)

    • color:调色盘颜色列表

    • toolbox:工具箱组件,可以另存为图片等功能

      数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

    展开全文
  • echarts大屏展示模板BI大屏展示5套,BI大数据大屏展示,百度echarts前端模板,医疗,环境检测,数据大屏展示
  • 最新echarts大屏展示demo
  • echarts大屏展示源码

    热门讨论 2018-04-28 09:26:46
    车联网大数据大屏展示,使用echarts做的各种图形 简单易懂,更改数据即可使用,需要自行下载。
  • 数据浏览,不哔哔,直接上图和代码 不要问我代码出处,反正是我自己项目需要,找了一大堆没有满足需求的,这些都是一堆里面比骄傲满意的几个,源码是我自己搞的,不要举报...某物流类数据大屏展示源码,只给看图 ...

    数据浏览,不哔哔,直接上图和代码在这里插入图片描述

    • 不要问我代码出处,反正是我自己项目需要,找了一大堆没有满足需求的,这些都是一堆里面比骄傲满意的几个,源码是我自己搞的,不要举报,因为这是人家某宝销售的货物。下面直接给源码。我这么辛苦,要5个积分不过分吧,实在不行我退你们积分。download.csdn.net/download/qq_28322959/12244121

    某物流类数据大屏展示源码,只给看图

    在这里插入图片描述

    某宝128RMB的科技炫耀大屏展示模板

    下面给图
    在这里插入图片描述
    下载地址https://download.csdn.net/download/qq_28322959/12244253
    暂时搞这三个上来试试能不能赚点积分吧,毕竟我也需要积分来下东西,有其他需要的私我,我还有很多噢

    展开全文
  • jquery+echarts数据大屏展示DEMO(十几个)
  • 某物流的数据大屏展示模板,解压直接使用,登录不用输信息,直接点击登录进去。解压后的源码代码可直接使用。大家懂的。话不多说,不能用的私我退你积分
  • 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个元素显示一页

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

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

    万次阅读 多人点赞 2019-09-05 15:28:48
    收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码,共计30个页面,可以在此基础上重新开发。 实现方式:html + Echarts 贴图 有需要的可以联系我 暂时不开源,之后会考虑写教程和开源项目。 ...
  • echarts 实现大屏自适应展示
  • 1.vue中如何使用echarts完成大屏展示:移步到这里 2.原生js项目中如何使用echarts完成大屏展示:移步到这里 3.炫酷js+echarts数据可视化模板(科技感十足):移步到这里 ...
  • 基于echarts数据大屏

    2019-03-12 10:16:49
    echarts大屏展示,一个用于项目的初步完成的前端大屏展示界面
  • 基于js+echarts实现数据可视化大屏展示

    万次阅读 多人点赞 2019-12-27 17:53:57
    vue+echarts大屏数据可视化展示参见点击进入 需求原因,做了一套数据可视化页面的展示效果demo。主要使用了echarts里面的纵向和横向柱状图,区域地图,以及环状图和折线图。基本满足部分场景的需求。下面看效果...
  • echarts-bigScreen echarts学习之数据大屏展示 大屏数据展示 中间地图背景酷炫效果实现 中间地图点位的移动 右侧最后一栏的地图添加可控组件 柱状图数据背景设为数据对应的图片 主题更换
  • echarts大屏示例1

    2020-09-24 17:36:55
    基于echarts的部分案例,各种图标,交通,医疗,物流,物联网及其他各行业数据统计展示表格,小图标下载

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,563
精华内容 625
关键字:

echarts大屏数据展示