摘 要

今天，Ofter分享一個(gè)獨(dú)家出品的集動(dòng)態(tài)數(shù)據(jù)，實(shí)用，炫酷的可視化大屏，非常值得學(xué)習(xí)。

1. 動(dòng)態(tài)數(shù)據(jù)：API接口獲取(如天氣、今日熱搜等)；
2. 素材豐富：含動(dòng)圖、裝飾、動(dòng)態(tài)排序、多圖表聯(lián)合共享數(shù)據(jù)集；
3. 全屏及鏈接：點(diǎn)擊標(biāo)題就可全屏，點(diǎn)擊可查看大圖，點(diǎn)擊熱搜可查看具體信息。

Ofter在前幾篇文章中，講解了如何用pyecharts或Vue來(lái)制作可視化大屏，pyecharts和vue各有優(yōu)勢(shì)，就看大家的側(cè)重點(diǎn):

pyecharts：基于python和echarts，數(shù)據(jù)的統(tǒng)計(jì)、分析、處理更便捷；前端頁(yè)面風(fēng)格相對(duì)單一，可能沒(méi)那么好看。

vue：可導(dǎo)入的可視化庫(kù)很多，前端頁(yè)面自由度高，更炫酷；數(shù)據(jù)也可以處理，基于javascript/typescript，相對(duì)來(lái)說(shuō)沒(méi)有python方便。

可視化倉(cāng)庫(kù)

介紹動(dòng)態(tài)、炫酷、實(shí)用的可視化大屏前，Ofter先為大家介紹幾個(gè)我們常用的精選庫(kù)。

1.echarts: 圖表齊全，基本所有你能想到的圖表都有，有非常好的開(kāi)源社區(qū)。

https://echarts.apache.org/examples/zh/index.html

2.viser: ant系列，支持react, vue, angular語(yǔ)言，官方文檔實(shí)在是模糊不清。

https://viserjs.gitee.io/demoHome.html

3.ucharts: 基于echarts，基本都是常用圖表，適合基礎(chǔ)入門學(xué)習(xí)，另外有個(gè)優(yōu)點(diǎn)是配置與數(shù)據(jù)解耦，后端數(shù)據(jù)直接渲染。

https://demo.ucharts.cn/#/

4.dataV: 亮點(diǎn)是有動(dòng)態(tài)裝飾效果，樣式比較科技感，與其他庫(kù)搭配使用。

http://datav.jiaminghi.com/guide/

注：專業(yè)角度上，我們都是使用echarts，其他庫(kù)作為補(bǔ)充使用。

編寫大屏代碼

終于回歸正題了，Ofter以上圖這個(gè)大屏為例，為大家介紹下如何編寫動(dòng)態(tài)的可視化大屏。

一、準(zhǔn)備工作

1. 編寫代碼的工具：pycharm
2. Vue安裝和簡(jiǎn)單示例?：參考?之前?的人文章?《vue完整?教程?-從零開(kāi)始?編寫?可視化?大屏?》
3. 可視化庫(kù)：上圖大屏采用了echarts（圖表部分）和dataV（裝飾部分）兩個(gè)庫(kù)
4. 數(shù)據(jù)：echarts的練習(xí)數(shù)據(jù)，API接口獲取

二、大屏布局

準(zhǔn)備工作做完，我們就完成了50%的工作，我們?cè)僭O(shè)計(jì)一下大屏的排版，主要定一下所用圖表和各圖表的寬高占比，這樣我們就完成了75%的工作，剩下的就編寫代碼。

三、代碼編寫

1.全局引用倉(cāng)庫(kù)

全局引用就不用每個(gè)vue文件再引用了，將src-main.js代碼改成如下：

import Vue from 'vue'import App from './App'import router from './router'import * as echarts from 'echarts' //引入echartsimport dataV from '@jiaminghi/data-view' //引入datavVue.use(dataV) //使用datavVue.prototype.$echarts = echarts //使用echartsVue.config.productionTip = falsenew Vue({ el: '#app', router, components: { App }, template: '<App/>'})

2.項(xiàng)目結(jié)構(gòu)

結(jié)構(gòu)基本上都大同小異，就有一點(diǎn)要注意：數(shù)據(jù)集像json,excel等要存放在與src平級(jí)的static目錄下，放置在src-assets可能會(huì)讀不出數(shù)據(jù)。

3.各圖表代碼編寫

先在src-components目錄下編寫各圖表代碼。

以動(dòng)態(tài)柱狀排序圖（各國(guó)人均收入動(dòng)態(tài)排序）為例，在echarts中的官網(wǎng)示例中可找到代碼，但是這個(gè)代碼不能直接用。

一般，echarts的代碼就分為兩部分（變量定義和圖表定義），也有可能只有圖表定義：

1）變量定義：這個(gè)應(yīng)該可以理解，就是為圖表定義的變量；

2）圖表定義：以"option="或"$"為首的就是圖表定義部分。

Ofter在上圖紅框框出來(lái)的部分是需要自行添加的代碼，然后就可以把echarts官網(wǎng)上的代碼復(fù)制到下圖如下位置。

4.測(cè)試圖表

我們?cè)诼酚蓅rc-router-index.js文件中配置下路由，就可以運(yùn)行項(xiàng)目測(cè)試圖表。

完整資料獲取

一、可視化倉(cāng)庫(kù)：

1. echarts
2. viser
3. ucharts
4. dataV

二、數(shù)據(jù)集：

1. echarts練習(xí)數(shù)據(jù)源；
2. API：天氣、股票等；

三、源代碼

1. Ofter數(shù)據(jù)科學(xué)大屏；
2. 多套大屏模板；
3. 多個(gè)Vue-echarts圖表模板；