自動化運維中，指令碼化，工具化，平臺化的過程中，有一個環節不可缺少，那就是視覺化。

視覺化這方面的開源產品還是相當的多，總體的方向都是藉助於豐富的前端方案來聯動，如今很大的特點是不光讓資料顯示出來，還讓資料動起來。

Echarts這個方案從我接觸到做出一個還算不錯的圖，也就不過幾個小時的時間，其中至少60%的時間是花在資料的提取和巢狀環節。

Echarts的口碑很不錯，聽到一箇中肯但是有比較損的話：Echarts是百度推出的最有良心的產品。總之Echarts的視覺化效果做得很不錯，能讓資料視覺化很快接入，立馬高大上起來。

如果看Echarts的官網會發現現在是區分了2個版本，新的版本是2.0的，有了較大的變化。效果做了更多的處理。

假設每天存在著大量的備份任務，每天備份了多少，產生了多大備份集，備份花了多少時間，在這個基礎上我又提了一個並行備份的概念，比如40個數據庫從1:00開始備份，不管中間是如何排程的，如果是在5:00結束，那麼就算並行備份時間是4個小時，而如果序列來算，可能備份的時間有10個小時，類似這樣的道理。

如果有了這些資料和參考，那麼我們做優化的時候方向就會更加明確。是接入更多的業務，減少備份的儲存容量，還是降低並行備份的時長。有了資料，有了概覽，這些都會了然於胸。

如何顯示呢，我們在html中需要一個div來襯托。比如下面的div,我們可以根據id來在JS中繫結Echarts的程式碼。

 <div class="panel-body">
                            <div id="morris-area-chart" style="width:100%;height:400px"></div>
   </div>
 

如何和div關聯起來，我們通過JS裡面的document物件來定位。然後使用echarts的物件在這個基礎上初始化,我們可以偽造一些資料。

<script type="text/javascript">
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: '近期備份資料量統計'
    },
    legend: {
        data: ['日備份容量', '備份集個數'],
        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: '備份集個數',
        type: 'bar',
        data: data2,
        animationDelay: function (idx) {
            return idx * 10 + 100;
        }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
        return idx * 5;
    }
};
 myChart.setOption(option);
</scripts>
 

整體來看這個過程還好啊，也沒多少程式碼，那是因為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.counter|divisibleby:2，明白了這點之後，我們就可以選擇性的初始化，按照我們的預期來把資料放到不同的地方。所以Echarts中需要的幾個陣列都可以通過這種方式來初始化。

var xAxisData=[
    {% for ds in backup_pieces_all %}
        {% for k,v in ds.items %}
            {%  if forloop.counter|divisibleby:2 == 1 %}
                '{{ v }}',
            {% endif %}
        {% endfor %}
{% endfor %}
];

所以對於其他的陣列也是如法炮製。很快就能夠搞定了。

看到原來冷冰冰的資料在這種分析中有了新的含義，心裡面是亮堂的。