【D25】基于Vue+Echarts全球疫情實時監(jiān)測可視化系統(tǒng)

2022-05-25 16:41:58 索煒達電子 914

文件編號：D25

文件大?。?/strong>32M

開發(fā)環(huán)境：Node.js v14.5.0、vue.js

猿創(chuàng)承諾：該項目親測正常運行，需遠程調(diào)試部署需另外收費，確保正常使用，不能正常使用全額退款。

簡要概述：基于Vue+Echarts全球疫情實時監(jiān)測可視化系統(tǒng)

## 初始化項目

```javascript

npm run serve 開發(fā)

npm run build 打包

```

## cdn方式引echart

```html

<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>

```

```javascript

//vue.config.js 配置

chainWebpack: config => {

// 用cdn方式引入

config.externals({

"echarts": "echarts",

})

```

## 自適應頁面方式

```javascript

//采用vm的方式實現(xiàn)自適應頁面

npm install postcss-px-to-viewport --save-dev

css: {

loaderOptions: {

postcss: {

plugins: [

require("postcss-px-to-viewport")({

unitToConvert: "px",

viewportWidth: 750,

viewportHeight: 667, // 視窗的高度, 根據(jù)375設(shè)備的寬度來指定，一般是667，也可不配置

unitPrecision: 3,//(Number)指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)，默認是5

propList: [ // 轉(zhuǎn)化為vw的屬性列表

"*"

selectorBlackList: ['.ignore', '.hairlines'], // (Array) 指定不轉(zhuǎn)換為視窗單位的類，保留px，值為string或正則regexp，建議定義一至兩個通用的類名

viewportUnit: "vw",

fontViewportUnit: "vw",

selectorBlackList: [],

minPixelValue: 1,

mediaQuery: false,

replace: true,

exclude: /(\/|\\)(node_modules)(\/|\\)/,

})

]

}

//注意，最外面的包圍殼如果寬度是100vw，但高度上面出現(xiàn)滾動條的時候，寬度100vm的值不會變，會有一部分內(nèi)容出現(xiàn)在垂直滾動條后面，此時，水平方向上也會出現(xiàn)滾動條

//通過下面方式，可以設(shè)置不讓頁面水平方向上出現(xiàn)滾動條，但是，會有一部分內(nèi)容被遮擋在垂直滾動條后面。

/* html {

overflow-y: scroll;

}

body {

overflow: hidden;

}

//本頁面采用的方式是設(shè)置最外面的包圍殼如果寬度是100vw-15px(這個15px不能轉(zhuǎn)化成vw，不同尺寸下的瀏覽器的垂直滾動條都是這個尺寸) 缺點是，但沒有垂直滾動條的時候，頁面最右邊會有15px大小的空白，不過還可以接受

```

## 接口

jsonp的接口，在封裝一個jsonp的函數(shù)

```javascript

export function jsonp({url,params={},success}){

// 根據(jù)時間戳生成一個callback名

let callbackName = `jsonp_${new Date().getTime()}`;

// 創(chuàng)建script

let script = document.createElement('script');

// 字符串拼接生成基本url

let baseUrl = `${url}?callback=${callbackName}`;

// 取出params對象屬性并得到完整url

for(let item in params){

baseUrl += `&${item}=${params[item]}`;

}

// jsonp核心，通過script的跨域特性發(fā)出請求

script.src = baseUrl;

// 把創(chuàng)建的script掛載到DOM

document.body.appendChild(script);

// 給window添加屬性，用于獲取jsonp結(jié)果

window[callbackName] = (res)=>{

// 執(zhí)行success回調(diào)

success(res);

// 刪除window下屬性

delete window[callbackName];

// 得到結(jié)果后刪除創(chuàng)建的script

document.body.removeChild(script);

}

```

```javascript

'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign'

'data':

'foreignList':

{

"name":"美國",

"continent":"北美洲",

"date":"05.27",

"isUpdated":true,

"confirmAdd":19049,

"confirmAddCut":0,

"confirm":1725275,

"suspect":0,

"dead":100579,

"heal":479969,

"nowConfirm":1144727,

"confirmCompare":19049,

"nowConfirmCompare":2976,

"healCompare":15299,

"deadCompare":774,

"children":{}

}

"globalStatis":{

"nowConfirm":2898884,

"confirm":5594262,

"heal":2347956,

"dead":347422,

"nowConfirmAdd":22880,

"confirmAdd":62982,

"healAdd":38283,

"deadAdd":3238,

"lastUpdateTime":"2020-05-27 12:17:36"

"globalDailyHistory":[

{

"date":"01.28",

"all":{

"confirm":57,

"dead":0,

"heal":3,

"newAddConfirm":19,

"deadRate":"0.00",

"healRate":"5.26"

}

]

"importStatis":{

"TopList":[{

"province":"黑龍江",

"importedCase":386

}]

"countryAddConfirmRankList":[

{

"nation":"美國",

"addConfirm":26158

]

```

```java

"https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5"

"chinaTotal":{

"confirm":84544,

"heal":79774,

"dead":4645,

"nowConfirm":125,

"suspect":6,

"nowSevere":5,

"importedCase":1732,

"noInfect":404

"areaTree":{

{

"name":"中國",

"today":{

"confirm":1,

"isUpdated":true

"children":[

{

"name":"內(nèi)蒙古",

"today":{

"confirm":0,

"confirmCuts":0,

"isUpdated":true,

"tip":"內(nèi)蒙古自治區(qū)累計報告境外輸入確診病例155例。"

"total":{

"nowConfirm":26,

"confirm":232,

"suspect":0,

"dead":1,

"deadRate":"0.43",

"showRate":false,

"heal":205,

"healRate":"88.36",

"showHeal":true

"children":[{

"name":"呼倫貝爾",

"today":{

"confirm":0,

"confirmCuts":0,

"isUpdated":false

"total":{

"nowConfirm":0,

"confirm":9,

"suspect":0,

"dead":0,

"deadRate":"0.00",

"showRate":false,

"heal":9,

"healRate":"100.00",

"showHeal":true

}

]

}

```

## export異步數(shù)據(jù)

對于異步獲取到的數(shù)據(jù)，不能直接export，因為會在數(shù)據(jù)還沒獲取的時候，就export出去一個undefined值。

解決方案：export出來一個函數(shù)，函數(shù)里面返回一個promise值，將要返回的數(shù)據(jù)通過resolve返回出去。

## 傳遞數(shù)據(jù)的方式

chart.js中，先異步請求到數(shù)據(jù)，通過調(diào)用options.js里面的函數(shù)，將請求到的數(shù)據(jù)進行加工，形成echarts圖表要用到的option。chart.js export返回值為promise的函數(shù)，該promise在成功后，會把上面形成的option都存到res中，在App.vue中調(diào)用chart.js 的函數(shù)，獲取到所有的圖標配置信息，通過props發(fā)送給所需要的組件。由于上面獲取數(shù)據(jù)的方式是異步的。在App.vue組件給子組件傳遞option信息時，值還是空的，所以子組件里面通過watch監(jiān)聽option，當option有值的時候，就可以渲染echart圖表了。

通過上述方式，減少了對數(shù)據(jù)的請求次數(shù)。

按需寫作：