一個基於 vue、datav、Echart 框架的大數據可視化（大屏展示）模板，最近更新了詳細的介紹說明，實現大數據可視化。通過 vue 組件實現數據動態刷新渲染，內部圖表可自由替換。部分圖表使用 DataV 自帶組件，可自由進行更改，持續更新
地址：https://gitee.com/MTrun/big-screen-vue-datav.git
項目描述
- 一個基於 vue、datav、Echart 框架的 " 數據大屏項目 "，通過 vue 組件實現數據動態刷新渲染，內部圖表可實現自由替換。部分圖表使用 DataV 自帶組件，可進行更改，詳情請點擊下方 DataV 文檔。
- 項目需要全屏展示（按F11）。
- 項目部分區域使用了全局註冊方式，增加了打包體積，在實際運用中請使用按需引入。
- 拉取項目之後，建議按照自己的功能區域重命名文件，現以簡單的位置進行區分。
- 項目環境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
項目展示
二、主要文件介紹
文件作用/功能mian.js主目錄文件，全局引入了引入 vue-awesomeviews/ index.vue項目主結構views/其餘文件界面各個區域組件（按照位置來命名）ajax 接口請求位置assets靜態資源目錄，放置 logo 與背景圖片assets / style.scss通用 CSS 文件，全局項目快捷樣式調節assets / index.scssIndex 界面的 CSS 文件components/echart所有 echart 圖表（按照位置來命名）
三、使用介紹
- 如何請求數據 現在的項目未使用前後端數據請求，建議使用 axios 進行數據請求，在 main.js 位置進行全局配置，在 views/xx.vue 文件裡進行前後端數據請求。
- axios 的 main.js 配置參考範例（因人而異）
<code>import axios from "axios";
//把方法放到vue的原型上，這樣就可以全局使用了
Vue.prototype.$http = axios.create({
//設置20秒超時時間
timeout: 20000,
baseURL: "http://172.0.0.1:80080" //這裡寫後端地址
});/<code>- 在 vue 頁面中調用 axios 方法並通過 props 傳給 echarts 圖表子組件
<code>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;
}
}
}
}/<code>- 如何動態渲染圖表 在components/echart下的文件，比如drawPie()是渲染函數，echartData是需要動態渲染的數據，當外界通過props傳入新數據，我們可以使用watch()方法去監聽，一但數據變化就調用this.drawPie()並觸發內部的.setOption函數，重新渲染一次圖表。
<code>//這裡是子組件內部
props: ["listData"],
watch: {
listData(newValue) {
this.echartData= newValue;
this.drawPie();
},
},
methods: {
drawPie() {
.....
'渲染節點名稱'.setOption(option);
}
}/<code>- 如何更換邊框 邊框是使用了 DataV 自帶的組件，如：
<code>/<code>
只需要去 views 目錄下去尋找對應的位置去查找並替換就可以，具體的種類請去 DavaV 官網查看
- 如何更換圖表 直接進入 components/echart 下的文件修改成你要的 echarts 模樣，可以去echarts 官方社區裡面查看案例。
四、更新情況
如果大家有意見請進行評論，我也會盡力去更新，自己也在前端學習的路上，歡迎交流，非常感謝！
分享到:
