项目名称：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
