项目名称:vue-big-screen项目作者:跑面开源许可协议:Apache-2.0项目地址:https://gitee.com/MTrun/big-screen-vue-datav项目介绍一个基于vue、datav、Echart框架的“数据大屏项目”。数据通过vue组件动态刷新渲染,内部图表可自由更换。有些图表使用DataV自己的组件,可以更改。该项目需要全屏显示(按F11)。项目部分区域采用全局注册方式,增加了打包体积。在实践中,请使用按需导入。项目拉取后,建议根据自己的功能区重命名文件,现在以简单的位置区分。项目环境:vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。项目展示主要文件介绍使用介绍1.如何启动项目需要提前安装nodejs和npm,下载项目后在项目主目录下运行npm/cnpminstall拉取依赖包,然后使用vue-cli或者直接使用命令npmrunserve,就可以启动项目了。启动项目后,需要手动全屏(按F11)。2.如何请求数据当前项目没有使用前后端数据请求。推荐使用axios进行数据请求,在main.js位置进行全局配置,在views/xx.vue文件中进行前后端数据请求。axiosmain.js配置参考示例(因人而异)importaxiosfrom"axios";//把方法放在vue的prototype上,这样可以全局使用vue.prototype.$http=axios.create({//设置20秒超时timeout:20000,baseURL:"http://172.0.0.1:80080",//这里写后端地址});在vue页面调用axios方法,通过props传递给echartschartsubcomponentexportdefault{data(){ListDataSelf:\[\]},mounted(){this.fetchList();//获取数据},方法:{asyncfetchList(){const{code,listData}=awaitthis。$http.get("xx/xx/xx"x);如果(代码===200){this.ListDataSelf=listData;}}}}3.components/echart下如何动态渲染图表文件,比如drawPie()就是渲染函数,echartData就是需要动态渲染的数据。当外界通过props传入新的数据时,我们可以使用watch()方法进行监听。一旦数据发生变化,调用this.drawPie()并触发内部的.setOption函数重新渲染图表。//这里是子组件的内部props:\["listData"\],watch:{listData(newValue){this.echartData=newValue;这个.drawPie();},},methods:{drawPie(){.....'渲染节点名称'.setOption(option);}}以上就是对这个Vue大屏项目的简单介绍。如果想看更详细的文档,可以点击下方链接进入项目主页。:https://gitee.com/MTrun/big-screen-vue-datav
