Vue和DataV強強聯合，這個大數據可視化模板你一定要擁有

項目名稱：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/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