上司都誇的開源資料可視化工具

作者：ssw

來源：Python 技術

echarts官網有很多好看的圖例，怎麼結合起來放到自己的項目中呢？比如這種酷酷的首頁：

這種看起來美觀又大方，自己要是能用上就好了。

其實這是可以的，echarts上有現成的圖例和示例代碼，咱們隻要改改資料源就可以了，至于好看的布局，比如上圖這種，我們直接借鑒過來不就可以了。

以公司網頁為例，簡單介紹一個例子，下圖這麼多網址的巡檢如何用一個圖例來展示。

可以把它們寫到檔案裡：

先建立一個檔案，比如叫config.cfg

[url]
優酷 = http://www.youku.com/
錯誤網址 = http://www.111.cn/
           

安裝configparser子產品

pip install configparser
           

讀取這些網址

import configparser
cfg = configparser.ConfigParser()
cfg.read('config.cfg',encoding='utf-8')
urls = cfg.items('url')
print(urls)
           

結果如下：

[('優酷', 'http://www.youku.com/'), ('錯誤網址', 'http://www.111.cn/')]
           

echarts官網找圖

接下來，怎麼展示網站的狀态碼是否為200呢？

echarts上找了一下，看到一個“極坐标柱狀圖”，很适合這種判斷True or False的場景，

比如網頁狀态碼是否為200，是傳回1，否傳回0，然後将echarts的資料源替換成我們的就是這種效果：

數值為1（代表正常）的條目會顯示藍條，0為異常則用紅色文字列印出來，整體巡檢效果如下：

檢查url

requests子產品判斷狀态碼是否為200

import requests
def check_url(url):
    try:
        r = requests.get(url, timeout=10)
        return r.status_code
    except Exception as e:
        return e
           

把config.cfg讀到的網址，利用check_url函數檢查完放到一個清單中

urls_state = []
for url in urls:
    status_code = check_url(url[1])
    if status_code == 200:
        urls_state.append([0,1])
    else:
        urls_state.append([1, 1,url[0]+' ConnectTimeout'])
           

結果如下：

[
 [0, 1],
 [1, 1, '優酷 ConnectTimeout'],
 [0, 1],
 [1, 1, '錯誤網址 ConnectTimeout']
]
           

把這些資訊傳回給前端

from rest_framework.views import APIView

class get_urls(APIView):
    def get(request,*args,**kwargs):
        urlsState = check_url.main()

        #網頁的名字清單
        cities = ['公司首頁', 'maas', 'maas1', 'maas2', 'maas3', 'maas4', '1小貓咪', '2小貓咪', '3小貓咪', '4小貓咪', '5小貓咪', '6小貓咪', '7小貓咪', '8小貓咪', '9小貓咪','10小貓咪','11小貓咪','12小貓咪', 'maas4','maas5', 'maas6','maas7', 'maas8', 'maas9', 'maas10', 'maas11','maas15', 'maas13', 'maas14', 'maas', '資料可視化系統', 'maas', 'maas', 'x1', 'maas','maas']
        return JsonResponse({'data': {
            'urlsData':{'name':'網頁','urlsState':urlsState,'cities':cities},
        }})
           

這樣前端在判斷的時候，如果某個url資訊的長度為3，說明有錯誤資訊

urlsState.forEach(key => {
    if (key.length == 3) {
    this.echartData.urls.info.push(key[2] + '\n')
    }
})           

小結

這是一個很好的例子：

• 前後端分離
• 動态更新echarts資料
• 用到DjangoRESTframework

更重要的是通過合并第1、2步，從檢查到展示能一步到位，上司見了直誇有想法。