使用Echarts來實現數據可視化
自動化運維中,腳本化,工具化,平台化的過程中,有一個環節不可缺少,那就是可視化。
可視化這方面的開源產品還是相當的多,總體的方向都是藉助於豐富的前端方案來聯動,如今很大的特點是不光讓數據顯示出來,還讓數據動起來。
Echarts這個方案從我接觸到做出一個還算不錯的圖,也就不過幾個小時的時間,其中至少60%的時間是花在數據的提取和嵌套環節。
Echarts的口碑很不錯,聽到一個中肯但是有比較損的話:Echarts是百度推出的最有良心的產品。總之Echarts的可視化效果做得很不錯,能讓數據可視化很快接入,立馬高大上起來。
如果看Echarts的官網會發現現在是區分了2個版本,新的版本是2.0的,有了較大的變化。效果做了更多的處理。
假設每天存在著大量的備份任務,每天備份了多少,產生了多大備份集,備份花了多少時間,在這個基礎上我又提了一個並行備份的概念,比如40個資料庫從1:00開始備份,不管中間是如何調度的,如果是在5:00結束,那麼就算並行備份時間是4個小時,而如果串列來算,可能備份的時間有10個小時,類似這樣的道理。
如果有了這些數據和參考,那麼我們做優化的時候方向就會更加明確。是接入更多的業務,減少備份的存儲容量,還是降低並行備份的時長。有了數據,有了概覽,這些都會瞭然於胸。
如何顯示呢,我們在html中需要一個div來襯托。比如下面的div,我們可以根據id來在JS中綁定Echarts的代碼。
如何和div關聯起來,我們通過JS裡面的document對象來定位。然後使用echarts的對象在這個基礎上初始化,我們可以偽造一些數據。
整體來看這個過程還好啊,也沒多少代碼,那是因為Echarts都幫我們做好了。我們來看看後端和前端是如何銜接的,也是做Echarts出圖的難點吧。
從後端來說,我們通過Django API或者raw SQL來得到數據結果。
如果通過raw SQL方式來定製,則類似下面的步驟。
cursor.execute(" xxxxxx")
backup_size_all = dictfetchall(cursor)
cursor.close()
其中cursor處理的結果默認是truple的,我們需要轉換為字典,處理起來會更加方便,所以用了dictfecthall的方法。
def dictfetchall(cursor):
desc = cursor.description
return [
dict(zip([col[0] for col in desc], row))
for row in cursor.fetchall()
]
然後讓response對象來返回到頁面即可。
前端怎麼去處理這個數據呢。這裡面有個難點就是對於數據的方式。
比如查詢結果有兩列,比如為backup_date,backup_size,簡單模擬一些數據。
backup_date backup_size
18-01-15 200
18-01-16 300
18-01-17 350
查詢出來的結果轉換成字典之後,就是類似這樣的形式:
(backup_date:18-01-15,backup_size:200),(backup_date:18-01-16,backup_size:300),(backup_date:18-01-17,backup_size:350)
如果在前端初始化的時候,結果就類似:
18-01-15,200,18-01-16,300,18-01-17,350這樣的方式,簡單來說就是數據是在一起的,在一個循環中統一處理的。怎麼區別開來呢,在這個場景中,我們可以按照2位基數做奇偶校驗。
但是問題來了,前端的標籤不支持看起來簡單的邏輯校驗和檢查。怎麼在前端做奇偶校驗呢。
有一個特殊的標籤,forloop.counterdivisibleby:2,明白了這點之後,我們就可以選擇性的初始化,按照我們的預期來把數據放到不同的地方。所以Echarts中需要的幾個數組都可以通過這種方式來初始化。
var xAxisData=[
{% for ds in backup_pieces_all %}
{% for k,v in ds.items %}
{% if forloop.counterdivisibleby:2 == 1 %}
"{{ v }}",
{% endif %}
{% endfor %}
{% endfor %}
];
所以對於其他的數組也是如法炮製。很快就能夠搞定了。
看到原來冷冰冰的數據在這種分析中有了新的含義,心裏面是亮堂的。
TAG:楊建榮的學習筆記 |