您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)Echarts中怎么實(shí)現(xiàn)數(shù)據(jù)可視化,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
Echarts這個(gè)方案從我接觸到做出一個(gè)還算不錯(cuò)的圖,也就不過幾個(gè)小時(shí)的時(shí)間,其中至少60%的時(shí)間是花在數(shù)據(jù)的提取和嵌套環(huán)節(jié)。
Echarts的口碑很不錯(cuò),聽到一個(gè)中肯但是有比較損的話:Echarts是百度推出的最有良心的產(chǎn)品??傊瓻charts的可視化效果做得很不錯(cuò),能讓數(shù)據(jù)可視化很快接入,立馬高大上起來。
如果看Echarts的官網(wǎng)會(huì)發(fā)現(xiàn)現(xiàn)在是區(qū)分了2個(gè)版本,新的版本是2.0的,有了較大的變化。效果做了更多的處理。
假設(shè)每天存在著大量的備份任務(wù),每天備份了多少,產(chǎn)生了多大備份集,備份花了多少時(shí)間,在這個(gè)基礎(chǔ)上我又提了一個(gè)并行備份的概念,比如40個(gè)數(shù)據(jù)庫(kù)從1:00開始備份,不管中間是如何調(diào)度的,如果是在5:00結(jié)束,那么就算并行備份時(shí)間是4個(gè)小時(shí),而如果串行來算,可能備份的時(shí)間有10個(gè)小時(shí),類似這樣的道理。
如果有了這些數(shù)據(jù)和參考,那么我們做優(yōu)化的時(shí)候方向就會(huì)更加明確。是接入更多的業(yè)務(wù),減少備份的存儲(chǔ)容量,還是降低并行備份的時(shí)長(zhǎng)。有了數(shù)據(jù),有了概覽,這些都會(huì)了然于胸。
如何顯示呢,我們?cè)趆tml中需要一個(gè)div來襯托。比如下面的div,我們可以根據(jù)id來在JS中綁定Echarts的代碼。
<div class="panel-body">
<div id="morris-area-chart" ></div>
</div>
如何和div關(guān)聯(lián)起來,我們通過JS里面的document對(duì)象來定位。然后使用echarts的對(duì)象在這個(gè)基礎(chǔ)上初始化,我們可以偽造一些數(shù)據(jù)。
< type="text/java">
var myChart = echarts.init(document.getElementById('morris-area-chart'));
//alert(myChart)
var xAxisData = ['18-01-10','18-01-11','18-01-12','18-01-13','18-01-14','18-01-15','18-01-16'];
var data1 = [4030, 4020, 3600, 3750, 3900, 3740, 3760];
var data2 = [795,804,648,658,656,661,665];
option = {
title: {
text: '近期備份數(shù)據(jù)量統(tǒng)計(jì)'
},
legend: {
data: ['日備份容量', '備份集個(gè)數(shù)'],
align: 'left'
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false
}
},
yAxis: {
},
series: [{
name: '日備份容量',
type: 'bar',
data: data1,
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: '備份集個(gè)數(shù)',
type: 'bar',
data: data2,
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
myChart.setOption(option);
</s>
整體來看這個(gè)過程還好啊,也沒多少代碼,那是因?yàn)镋charts都幫我們做好了。我們來看看后端和前端是如何銜接的,也是做Echarts出圖的難點(diǎn)吧。
從后端來說,我們通過Django API或者raw SQL來得到數(shù)據(jù)結(jié)果。
如果通過raw SQL方式來定制,則類似下面的步驟。
cursor.execute(" xxxxxx")
backup_size_all = dictfetchall(cursor)
cursor.close()
其中cursor處理的結(jié)果默認(rèn)是truple的,我們需要轉(zhuǎn)換為字典,處理起來會(huì)更加方便,所以用了dictfecthall的方法。
def dictfetchall(cursor):
desc = cursor.deion
return [
dict(zip([col[0] for col in desc], row))
for row in cursor.fetchall()
]
然后讓response對(duì)象來返回到頁(yè)面即可。
前端怎么去處理這個(gè)數(shù)據(jù)呢。這里面有個(gè)難點(diǎn)就是對(duì)于數(shù)據(jù)的方式。
比如查詢結(jié)果有兩列,比如為backup_date,backup_size,簡(jiǎn)單模擬一些數(shù)據(jù)。
backup_date backup_size
18-01-15 200
18-01-16 300
18-01-17 350
查詢出來的結(jié)果轉(zhuǎn)換成字典之后,就是類似這樣的形式:
(backup_date:18-01-15,backup_size:200),(backup_date:18-01-16,backup_size:300),(backup_date:18-01-17,backup_size:350)
如果在前端初始化的時(shí)候,結(jié)果就類似:
18-01-15,200,18-01-16,300,18-01-17,350這樣的方式,簡(jiǎn)單來說就是數(shù)據(jù)是在一起的,在一個(gè)循環(huán)中統(tǒng)一處理的。怎么區(qū)別開來呢,在這個(gè)場(chǎng)景中,我們可以按照2位基數(shù)做奇偶校驗(yàn)。
但是問題來了,前端的標(biāo)簽不支持看起來簡(jiǎn)單的邏輯校驗(yàn)和檢查。怎么在前端做奇偶校驗(yàn)?zāi)亍?/p>
有一個(gè)特殊的標(biāo)簽,forloop.counter|divisibleby:2,明白了這點(diǎn)之后,我們就可以選擇性的初始化,按照我們的預(yù)期來把數(shù)據(jù)放到不同的地方。所以Echarts中需要的幾個(gè)數(shù)組都可以通過這種方式來初始化。
var xAxisData=[
{% for ds in backup_pieces_all %}
{% for k,v in ds.items %}
{% if forloop.counter|divisibleby:2 == 1 %}
'{{ v }}',
{% endif %}
{% endfor %}
{% endfor %}
];
上述就是小編為大家分享的Echarts中怎么實(shí)現(xiàn)數(shù)據(jù)可視化了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。