項目名稱：vue-big-screen

項目作者：奔跑的面條

開源許可協議：Apache-2.0

項目簡介一個基于 vue、datav、Echart 框架的 " 數據大屏項目 "，通過 vue 組件實現數據動態刷新渲染，內部圖表可實現自由替換。部分圖表使用 DataV 自帶組件，可進行更改。

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

項目部分區域使用了全局注冊方式，增加了打包體積，在實際運用中請使用按需引入。

拉取項目之后，建議按照自己的功能區域重命名文件，現以簡單的位置進行區分。

項目環境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。

項目展示

主要文件介紹

使用介紹

1.如何啟動項目

需要提前安裝好nodejs與npm,下載項目后在項目主目錄下運行npm/cnpm install拉取依賴包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以啟動項目，啟動項目后需要手動全屏(按 F11)。

2.如何請求數據

現在的項目未使用前后端數據請求，建議使用 axios 進行數據請求，在 main.js 位置進行全局配置，在 views/xx.vue 文件里進行前后端數據請求。axios 的 main.js 配置參考范例(因人而異)

import axios from "axios";

//把方法放到vue的原型上，這樣就可以全局使用了Vue.prototype.$http = axios.create({

//設置20秒超時時間 timeout: 20000,

baseURL: "http://172.0.0.1:80080", //這里寫后端地址});在 vue 頁面中調用 axios 方法并通過 props 傳給 echarts 圖表子組件

export default {

data() {

ListDataSelf:[]

},

mounted() {

this.fetchList(); //獲取數據 },

methods: {

async fetchList(){

const { code,listData }= await this.$http.get("xx/xx/xx"x);

if(code === 200){

this.ListDataSelf= listData;

}

}

}

}

3.如何動態渲染圖表

在components/echart下的文件，比如drawPie()是渲染函數，echartData是需要動態渲染的數據，當外界通過props傳入新數據，我們可以使用watch()方法去監聽，一但數據變化就調用this.drawPie()并觸發內部的.setOption函數，重新渲染一次圖表。

//這里是子組件內部

props: ["listData"],

watch: {

listData(newValue) {

this.echartData= newValue;

this.drawPie();

},

},

methods: {

drawPie() {

.....

'渲染節點名稱'.setOption(option);

}

}

以上就是對這個 Vue 大屏項目的簡單介紹，如果你想看到更詳細的文檔，那就點擊后面的鏈接前往項目主頁看看吧：https://gitee.com/MTrun/big-screen-vue-datav

總結

以上是生活随笔為你收集整理的vue摸板 大数据_Vue和DataV强强联合，这个大数据可视化模板你一定要拥有的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。