精华内容
下载资源
问答
  • 2021-05-15 17:39:54

    最近手里有个需求,需要做大屏适配,原本在本地展示正常的页面,放在大屏上展示就无法满屏了,在网上搜集了一点资料最终自己总结了下
    首先在mounted生命周期中,监听window的变化

    window.addEventListener('resize', () => {
        console.log('resize')
        this.resize()
    })
    

    然后在methods中增加resize方法

    resize() {
    	// 记录开发时候的尺寸
        const width = 1550 ,height = 680
        let w = window.innerWidth / width
        let h = window.innerHeight / height
        let scale = w < h ? w : h
        let body = document.body
        // 通过transform 去对body进行等比缩小
        body.style.transform = 'scale(' + scale + ')'
        body.style.transformOrigin = '0 0'
    }
    

    然后正常情况下等比的大屏就可以适配了

    更多相关内容
  • 该源码为Vue前端可视化大屏项目,需要nodejs和npm等环境支持,需提前下载好环境
  • VUE油井物联网监控大屏,运行需要nodejs和npm等环境支持
  • Vue3/ECharts5数据可视化大屏展示)项目案例源码,一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化大屏展示)项目。此项目使用'.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,全局...
  • 主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 适合研究 很有参考价值
  • 数据大屏可视化模版(生产销售监控) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • vue数据可视化驾驶舱20套源码
  • vue实现可视化大屏展示
  • 页面布局在拿到设计图后,通常会先通过设计图的布局来思考代码的设计,这也是开始着手写代码前必须要进行的一步,在项目中,我曾遇到,在一张大屏图开发到一半的时候介入,和另一个前端一起进行开发,结...

    页面布局

    在拿到设计图后,通常会先通过设计图的布局来思考代码的设计,这也是开始着手写代码前必须要进行的一步,在项目中,我曾遇到,在一张大屏图开发到一半的时候介入,和另一个前端一起进行开发,结果由于她将整张图上的所有图表都放到一个vue文件里面,结果导致整个页面的代码数量级达到上千行,并且介入合作后,由于两人在一个文件里面进行开发,常常会导致提交代码时要合并冲突,经过这个教训后,在二期进行重构时,第一步就是对整个页面进行拆分,这样不仅能更好的分工合作,而且也利于后期代码的维护。(其实大多数开发人员都会这样做,写出来只是给自己提个醒)

     1.划分页面 通常情况下,大屏图都是由一个一个的图表组成的,并且在考虑美观的情况下,UI设计师会把图设计成方方正正的模块,这里列举两个布局: 

     

    图1可划分为左中右,图2可划分为上中下,划分完之后,在根据具体的设计图再划分成更小的模块。

    2.模块化开发

    在划分完页面之后,对于具体的模块,应将其列成一个单独的vue页面来进行开发,然后将所有的模块都以组件的形式引入到index页面,形成最终的大屏页面。 

    屏幕适配

    1.使用flexible

    对于PC端的屏幕适配,网上有很多解决方案,这里不展开赘述,感兴趣者可自行百度。我所采用的方式是阿里的flexible.js。具体方案如下

    • 在本地以js文件的方式引入到大屏页面(在这里并未采用全局安装的方式,原因是在项目中,大屏页面仅是其中一部分,其他页面并不需要适配,因此,并未采用在main.js中引用的方式,同样,也不采用全局px转rem的方式,而是在引入页面单独使用rem)

    • 打开flexible.js文件,设置1rem所对应的px数量,以设计稿1920px为例,将其等分成24等份,那么1rem = 80px

    • 由于上述原因,需在大屏页面中,手动将用到的px以80px = 1rem的换算形式换算成rem,为避免每次都需手动计算rem的弊端,如果使用vs code进行开发时,推荐使用px2rem插件

    在应用商店下载后,打开vs code的设置,搜索rootFontSize,将数值改成px转换成rem的数值(以上述为例,flexible.js中80px = 1rem,那么rootFontSize应设置成80),保存后重启,打开大屏页面,在中输入px会自动显示出经过换算后的rem 

    echarts使用

    1.vue引入echarts

    • 安装echarts依赖

    npm install echarts -S

    • 引入echarts 1. 全局引入

    // main.js
     import echarts from 'echarts'
     Vue.prototype.$echarts = echarts
    复制代码
    // echarts.vue
    <template>
      ...
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
      ...
    </template>
    <script>
       ...
      methods:{
          drawEcharts(){
             let myChart = this.$echarts.init(document.getElementById('myChart'))
              ...
          }
     }
    ...
    </script>
    
    
    

    2.页面中引入

    // echarts.vue<template>  ...  <div id="myChart" :style="{width: '300px', height: '300px'}"></div>  ...</template><script> import echarts from 'echarts'   ...  methods:{      drawEcharts(){         let myChart = echarts.init(document.getElementById('myChart'))          ...      } }...</script>
    

    注意:echarts的实例化对象需在mounted中实现,原因是要确保dom元素已经挂载到页面中

    2.echarts使用

    echarts的使用可到官网去查看相关参数,还可到echarts社区去查看相关示例,另外,推荐一下dataV,在这上面可以选一些好看的边框和图表,但是需要注意的是,dataV在低版本浏览器和IE上面并不兼容,在此次项目中又刚好需要兼容IE,因此,我采用的解决方案是:1.安装babel-polyfill npm install --save-dev babel-polyfill 2.引入babel-polyfill

    //main.jsimport 'babel-polyfill'
    
    • vue-cli版本为2

    //webpack.base.conf.js....{  test: /\.js$/,  loader: 'babel-loader',  include: [resolve('node_modules/@jiaminghi/data-view')]},...
    
    • vue-cli版本为3或以上

    //vue.config.js...transpileDependencies: [/[/\\]node_modules[/\\][@\\]jiaminghi[/\\]data-view[/\\]/]...
    

    总结

    大屏可视化是我们在实际项目中经常会遇到的需求,但在做的时候,又需要花费很多心思,本文也仅是介绍一种设配方案,要真的完成一个可视化界面,还是得多花点心思,关注css细节,尽量还原设计图。

    转自:https://juejin.cn/post/6940790455701356552

    3个 Vue 可视化大屏案例展示(vue 2.0 & echarts)

    以下是可视化大屏案例展示,如果你需要此案例源码,请关注“前端达人”公众号,回复“vue大屏”获取

    展开全文
  • 一个基于 vue、datav、Echart 框架的大数据可视化大屏展示)模板,最近更新了详细的介绍说明,实现大数据可视化。通过 vue 组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用 DataV 自带组件,可自由...
  • vue写的可视化大屏

    2019-03-22 15:54:26
    vue、echarts写的可视化大屏,下载之后,运行npm install,加载完之后npm run dev就可以了
  • 来自:爪哇笔记正文大家好,我是GitHub猿。今天,推荐一个数据可视化系统项目。上次是谁要的数据可视化系统项目啊,猿哥帮你找到了。这是我目前见过的最好的数据可视化系统项目。功能完整,代码...

    来自:爪哇笔记

    正文

    大家好,我是GitHub猿。今天,推荐一个数据可视化系统项目。

    上次是谁要的数据可视化系统项目啊,猿哥帮你找到了。

    这是我目前见过的最好的数据可视化系统项目。功能完整,代码结构清晰。值得推荐。

    简介

    一个基于 Vue3.x 的数据可视化项目。

    • Vue 3.0+

    • TypeScript 4.2+

    • ECharts 5.0+

    • 搜索公众号GitHub猿回复“小米”,送你一份惊喜礼包。

    预览

    a75236829cce8964080cf79fd59d1de1.png

    5da048516f50da6f8b20e204f437ba39.png

    65754d743807559dc885ce62c1a686cb.png

    大数据可视化大屏模板

    ffccba3283496aebb363afc8bd62a969.png

    f90431f4882d20fd6ac1cec407e9d7cf.png

    d465f20e5d1206cf0fbd0380a3fae3c6.png

    f397b7615a85f01054a27e15f839d29e.png

    12ccbb8c0cb7b78d08d09e5017bb1855.png

    8a9651f6141a32e5c562a554213f4f6e.png

    7128b9152f10cfaeb331a68e530cc2f4.png

    5268439a5d0830c62c5d131af6e84946.png

    807ccf43c48a39408da9ed676bca4fcb.png

    0c3f826fd7676d56b2ed678f98902af4.png

    安装与使用

    # 初始化项目
    yarn bootstrap
    
    # 跑起来!
    yarn serve
    
    # 构建发布
    yarn build

    创建组件

    yarn gc [component name]

    创建组件 or Store

    yarn new

    小结

    项目还是很潮流的,然而不少功能还在建设中,相信不久的将来,肯定会是一个特别棒的项目,小编也为各位小伙伴准备了上百套开源大屏源码!

    4bf204bf95c9d02d964ad6a0030647ef.png源码获取acd44f69b79c2fb4557b51fc0d30b0d1.png

    扫码下方二维码,后台回复【大屏】即可获取

    额外福利

    冒死曝光一个看片神器,希望不要被封杀!

    c52227de5f90f93e6f976ebb88b7d0b3.png

    前阵子,优酷和爱奇艺发布通告,称接下来或许提高会员服务费用,遭到不少网友疯狂抵制。

    今天,给大家推荐另一款炒鸡好用的看片神器。

    它支持 Android、iOS、可在电脑网页直接使用,最牛逼的是,这款神器开屏、片头、主界面毫无广告!电影片源超级多,分辨率都是蓝光超清!!!

    cacdd1131e512b25b3539b1bf581565d.png

    如果你喜欢在电脑上用更大的屏幕欣赏电影、电视剧、综艺,还可以访问它的网站,直接在线播放,不需要下载即可观看!

    用上之后,不用再去费劲心思找各种电影资源了,无论是高清华语、还是火爆全网的美、日、韩剧,你想看的,它全都有!!!你懂得 7410621b55a2cea35307ca327167cd25.png

    de2449ddd49316cb3c34131aba58fdc2.png

    除此之外,画质、流畅度也会得到很好的保障,试用过程中,发现它有很多超高清影视资源,而且在播放过程中非常流畅,在正常网络环境下,丝毫没有卡顿现象~ 趁现在还能用,建议赶紧下载!

    下载方式

    1.  识别并关注下方公众号👇;
    2. 在下面公众号后台,回复关键字「电影」即可获取:

     

    版权申明:内容来源网络,版权归原创者所有。除非无法确认,我们都会标明作者及出处,如有侵权烦请告知,我们会立即删除并表示歉意。谢谢

    展开全文
  • Vue大数据可视化大屏展示)解决方案

    万次阅读 多人点赞 2020-04-21 14:09:10
    一个基于 vue、datav、Echart 框架的大数据可视化大屏展示)模板,最近更新了详细的介绍说明,实现大数据可视化。通过 vue 组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用 DataV 自带组件,可自由...

    一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板,最近更新了详细的介绍说明,实现大数据可视化。通过 vue 组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用 DataV 自带组件,可自由进行更改,持续更新…

    全新 Vue3 升级方案:采用 Vue3 hook + ts 实现 点击这里查看吧 重构代码,使用全新屏幕适配方案等新内容~

    项目地址: vue-big-screen(点击这里),去码云给个三连吧,求求大家惹(老B站了)
    在这里插入图片描述

    一、项目描述

    • React 版本请点击这里查看,全新界面超级好看!!!(o ゚ v ゚)ノ

    • 一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改,详情请点击下方 DataV 文档。

    • 项目需要全屏展示(按F11)。

    • 项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用按需引入。

    • 拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。

    • 项目环境:vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。

    友情链接:

    1. DataV 官方文档(建议使用之前先浏览)
    2. echarts 实例echarts 官方文档
    3. Vue 官方文档
    4. 项目 gitee 地址(国内速度快)

    二、请大家点击上方的码云地方查看最新的代码与文档!

    希望代码没事🙏🙏🙏

    三、全新的 React 版本已经上线(超级好看)!!!

    1. react 可视化项目点击这里查看
      在这里插入图片描述
      觉得不错的话,两个项目就都去点个星星下⭐⭐⭐支持一下吧,谢谢啦。
    展开全文
  • 视觉数据可视化 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • 基于vue、 echarts、iview 实现大数据可视化大屏模板
  • 基于vue可视化大屏开发

    千次阅读 2020-04-27 10:55:32
    百度的 sugar 可视化解决方案 https://sugar.baidu.com/home 阿里datav https://data.aliyun.com/visual/datav 腾讯云图 https://cloud.tencent.com/product/yuntu 尺寸 现在一般的大屏设计基本都是16:9 或者是 32:9...
  • 1.首先大屏要先解决屏幕适配的问题:这里用viewport的方案,使用postcss-px-to-viewport插件,在vue项目里新建postcss.config.js配置一下postcss-px-to-viewport: module.exports = { plugins: { // ... 'post...
  • Vue 可视化大屏适配方案

    千次阅读 2022-01-04 09:46:57
    Vue 大屏适配 transform 属性缩放
  • 网上有很多比较复杂(需要执行各种各样的命令)还不完整的教程,今天OF将完整地讲解如何用vue做一张好看的可视化大屏。只要大家按照步骤操作下来,你也能实现自己的可视化项目。
  • 大屏可视化,老司机提到vue大家肯定不陌生,什么是Vue呢?Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方...
  • web 大数据可视化 使用的是echarts图表库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,...
  • vue+echarts数据可视化大屏毕业人员分析统计大屏数据可视化,Echarts图表直接进入 ​​components/​​下的文件修改成你想要的 echarts 图表,可以去echars官网里面查看案例。
  • ❤开箱即用❤ vue+echart数据可视化大屏展示
  • vue大屏可视化布局

    2021-11-01 04:29:05
    /* 将屏幕整个宽度设置为24rem,从而自动实现内容按照屏幕的大小进行缩放 */ /* 屏幕大小比例 16:9 */ font-size: calc(100vw / 24); } body { font-size: 0.12rem; width: 100vw;... height: calc(100vw / 16 * 9...
  • 数据可视化大屏-Vue项目

    千次阅读 2021-11-09 15:40:46
    1.vue-cli 搭建项目 npm install @vue/cli -g (一台电脑只执行一次即可) vue create 项目名 选 (下键选择 空格确认) :Manually select features 手动选择 :Router Vuex CSS :2.0 x Use history mode ...
  • 项目运行一段时间,就会显示计算机的内存不足并且页面也会卡着不动
  • 基于vue + echarts 数据可视化大屏展示[附源码]

    万次阅读 多人点赞 2019-06-21 16:35:21
    全局引入main.js中配置(不推荐使用) import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //挂载在原型,组件内使用直接this.$echarts调用 2.组件内按需引入(推荐使用) 这种方式很...
  • 简介一个基于 Vue3.x 的数据可视化项目。Vue 3.0+TypeScript 4.2+ECharts 5.0+预览安装与使用# 初始化项目 yarn bootstrap # 跑起来...

空空如也

空空如也

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

vue数据可视化大屏