這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)Echarts中怎么實(shí)現(xiàn)數(shù)據(jù)可視化，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司于2013年成立，先為金溪等服務(wù)建站，金溪等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為金溪企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

Echarts這個方案從我接觸到做出一個還算不錯的圖，也就不過幾個小時的時間，其中至少60%的時間是花在數(shù)據(jù)的提取和嵌套環(huán)節(jié)。

Echarts的口碑很不錯，聽到一個中肯但是有比較損的話：Echarts是百度推出的最有良心的產(chǎn)品。總之Echarts的可視化效果做得很不錯，能讓數(shù)據(jù)可視化很快接入，立馬高大上起來。

如果看Echarts的官網(wǎng)會發(fā)現(xiàn)現(xiàn)在是區(qū)分了2個版本，新的版本是2.0的，有了較大的變化。效果做了更多的處理。

假設(shè)每天存在著大量的備份任務(wù)，每天備份了多少，產(chǎn)生了多大備份集，備份花了多少時間，在這個基礎(chǔ)上我又提了一個并行備份的概念，比如40個數(shù)據(jù)庫從1:00開始備份，不管中間是如何調(diào)度的，如果是在5:00結(jié)束，那么就算并行備份時間是4個小時，而如果串行來算，可能備份的時間有10個小時，類似這樣的道理。

如果有了這些數(shù)據(jù)和參考，那么我們做優(yōu)化的時候方向就會更加明確。是接入更多的業(yè)務(wù)，減少備份的存儲容量，還是降低并行備份的時長。有了數(shù)據(jù)，有了概覽，這些都會了然于胸。

如何顯示呢，我們在html中需要一個div來襯托。比如下面的div,我們可以根據(jù)id來在JS中綁定Echarts的代碼。

<div class="panel-body">

<div id="morris-area-chart" ></div>

</div>

如何和div關(guān)聯(lián)起來，我們通過JS里面的document對象來定位。然后使用echarts的對象在這個基礎(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: ['日備份容量', '備份集個數(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: '備份集個數(shù)',

type: 'bar',

data: data2,

animationDelay: function (idx) {

return idx * 10 + 100;

}

}],

animationEasing: 'elasticOut',

animationDelayUpdate: function (idx) {

return idx * 5;

}

};

myChart.setOption(option);

</s>

整體來看這個過程還好啊，也沒多少代碼，那是因?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)換為字典，處理起來會更加方便，所以用了dictfecthall的方法。

def dictfetchall(cursor):

desc = cursor.deion

return [

dict(zip([col[0] for col in desc], row))

for row in cursor.fetchall()

]

然后讓response對象來返回到頁面即可。

前端怎么去處理這個數(shù)據(jù)呢。這里面有個難點(diǎn)就是對于數(shù)據(jù)的方式。

比如查詢結(jié)果有兩列，比如為backup_date,backup_size，簡單模擬一些數(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)

如果在前端初始化的時候，結(jié)果就類似：

18-01-15,200,18-01-16,300,18-01-17,350這樣的方式，簡單來說就是數(shù)據(jù)是在一起的，在一個循環(huán)中統(tǒng)一處理的。怎么區(qū)別開來呢，在這個場景中，我們可以按照2位基數(shù)做奇偶校驗(yàn)。

但是問題來了，前端的標(biāo)簽不支持看起來簡單的邏輯校驗(yàn)和檢查。怎么在前端做奇偶校驗(yàn)?zāi)亍?/p>

有一個特殊的標(biāo)簽，forloop.counter|divisibleby:2，明白了這點(diǎn)之后，我們就可以選擇性的初始化，按照我們的預(yù)期來把數(shù)據(jù)放到不同的地方。所以Echarts中需要的幾個數(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)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：Echarts中怎么實(shí)現(xiàn)數(shù)據(jù)可視化
本文網(wǎng)址：http://jinyejixie.com/article6/pggiig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、定制開發(fā)、建站公司、Google、搜索引擎優(yōu)化、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)