項(xiàng)目名稱：vue-big-screen

項(xiàng)目作者：奔跑的面條

開源許可協(xié)議：Apache-2.0

項(xiàng)目簡介一個基于 vue、datav、Echart 框架的 " 數(shù)據(jù)大屏項(xiàng)目 "，通過 vue 組件實(shí)現(xiàn)數(shù)據(jù)動態(tài)刷新渲染，內(nèi)部圖表可實(shí)現(xiàn)自由替換。部分圖表使用 DataV 自帶組件，可進(jìn)行更改。

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

項(xiàng)目部分區(qū)域使用了全局注冊方式，增加了打包體積，在實(shí)際運(yùn)用中請使用按需引入。

拉取項(xiàng)目之后，建議按照自己的功能區(qū)域重命名文件，現(xiàn)以簡單的位置進(jìn)行區(qū)分。

項(xiàng)目環(huán)境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。

項(xiàng)目展示

主要文件介紹

使用介紹

1.如何啟動項(xiàng)目

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

2.如何請求數(shù)據(jù)

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

import axios from "axios";

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

//設(shè)置20秒超時時間 timeout: 20000,

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

export default {

data() {

ListDataSelf:[]

},

mounted() {

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

methods: {

async fetchList(){

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

if(code === 200){

this.ListDataSelf= listData;

}

}

}

}

3.如何動態(tài)渲染圖表

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

//這里是子組件內(nèi)部

props: ["listData"],

watch: {

listData(newValue) {

this.echartData= newValue;

this.drawPie();

},

},

methods: {

drawPie() {

.....

'渲染節(jié)點(diǎn)名稱'.setOption(option);

}

}

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。