信息展示网站模板源码分享?信息展示台

大家好,关于信息展示网站模板源码分享很多朋友都还不太明白,今天小编就来为大家分享关于信息展示台的知识,希望对各位有所帮助!

介绍

一个基于vue、Echart框架的大数据可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能。

开源地址

https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search

项目展示

项目使用

如何启动项目需要提前安装好nodejs与npm,下载项目后在项目主目录下运行npm/cnpminstall拉取依赖包,然后使用vue-cli或者直接使用命令npmrunserve,就可以启动项目,启动项目后需要手动全屏(按F11)。如何请求数据现在的项目未使用前后端数据请求,建议使用axios进行数据请求,在main.js位置进行全局配置,在views/xx.vue文件里进行前后端数据请求。如何动态渲染图表在components/echart下的文件,比如drawPie()是渲染函数,echartData是需要动态渲染的数据,当外界通过props传入新数据,我们可以使用watch()方法去监听,一旦数据变化就调用this.drawPie()并触发内部的.setOption函数,重新渲染一次图表。如何复用图表组件因为Echart图表是根据id/class去获取Dom节点并进行渲染的,所以我们只要传入唯一的id值与需要的数据就可以进行复用。如中间部分的任务通过率与任务达标率组件就是采用复用的方式。如何更换边框边框是使用了DataV自带的组件,只需要去views目录下去寻找对应的位置去查找并替换就可以,具体的种类请去DavaV官网查看如:如何更换图表直接进入components/echart下的文件修改成你要的echarts模样,可以去echarts官方社区里面查看案例。Mixins注入的问题使用mixins注入解决了图表重复书写响应式适配的代码,如果要更换(新增)图形,需要将echarts.init()函数赋值给this.chart,然后mixins才会自动帮你注入响应式功能。屏幕适配问题本项目借助了flexible插件,通过改变rem的值来进行适配,原设计为1920px。,适配区间为:1366px~2560px,本项目有根据实际情况进行源文件的更改,小屏幕(如:宽为1366px)需要自己舍弃部分动态组件进行适配,如&39;会影响布局,需要手动换成一般节点。

具体使用请移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址参考。

信息展示网站模板源码分享和信息展示台的问题分享结束啦,以上的文章解决了您的问题吗?欢迎您下次再来哦!

Published by

风君子

独自遨游何稽首 揭天掀地慰生平