家好，今天給大家介紹一款， 一組12個文字動畫特效html頁面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。
每款都有獨立的動畫（圖2）
每個動畫都可以按重播按鈕重復播放（圖3）
源碼完整，需要的朋友可以下載學習（圖4）
本源碼編碼：10177，需要的朋友，點擊下面的鏈接后，搜索10177，即可獲取。
「鏈接」
介紹
一個基于 vue、Echart 框架的大數(shù)據(jù)可視化（大屏展示）模板，提供數(shù)據(jù)動態(tài)刷新渲染、屏幕適應、內(nèi)部圖表自由替換、Mixins注入等功能。
開源地址
https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search
項目展示
項目使用
- 如何啟動項目需要提前安裝好nodejs與npm,下載項目后在項目主目錄下運行npm/cnpm install拉取依賴包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以啟動項目，啟動項目后需要手動全屏（按 F11）。
- 如何請求數(shù)據(jù)現(xiàn)在的項目未使用前后端數(shù)據(jù)請求，建議使用 axios 進行數(shù)據(jù)請求，在 main.js 位置進行全局配置，在 views/xx.vue 文件里進行前后端數(shù)據(jù)請求。
- 如何動態(tài)渲染圖表在components/echart下的文件，比如drawPie()是渲染函數(shù)，echartData是需要動態(tài)渲染的數(shù)據(jù)，當外界通過props傳入新數(shù)據(jù)，我們可以使用watch()方法去監(jiān)聽，一旦數(shù)據(jù)變化就調(diào)用this.drawPie()并觸發(fā)內(nèi)部的.setOption函數(shù)，重新渲染一次圖表。
- 如何復用圖表組件因為 Echart 圖表是根據(jù)id/class去獲取 Dom 節(jié)點并進行渲染的，所以我們只要傳入唯一的 id 值與需要的數(shù)據(jù)就可以進行復用。如中間部分的任務通過率與任務達標率組件就是采用復用的方式。
- 如何更換邊框邊框是使用了 DataV 自帶的組件，只需要去 views 目錄下去尋找對應的位置去查找并替換就可以，具體的種類請去 DavaV 官網(wǎng)查看 如：
- 如何更換圖表直接進入 components/echart 下的文件修改成你要的 echarts 模樣，可以去echarts 官方社區(qū)里面查看案例。
- Mixins 注入的問題使用 mixins 注入解決了圖表重復書寫響應式適配的代碼，如果要更換(新增)圖形，需要將echarts.init()函數(shù)賦值給this.chart，然后 mixins 才會自動幫你注入響應式功能。
- 屏幕適配問題本項目借助了 flexible 插件，通過改變 rem 的值來進行適配，原設計為 1920px。 ，適配區(qū)間為：1366px ~ 2560px，本項目有根據(jù)實際情況進行源文件的更改，小屏幕（如:寬為 1366px）需要自己舍棄部分動態(tài)組件進行適配，如'動態(tài)文字變換組件'會影響布局，需要手動換成一般節(jié)點。
具體使用請移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址參考。
