注：因為工作需要，繪製了echart的幾張圖表，淺顯的研究了官方的配置檔案，將散點圖、柱形圖、跟南丁格圖設計出來了。
先呈現一下效果圖吧。

散點圖只添加了兩組資料，遇到的難點有兩個。
[1.1]geoCoordMap物件的轉換
當時為了處理這個資料花費了不少時間，google翻了一下，發現json物件可以轉換成geoCoordMap。

var datas = JSON.parse(data);
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var
 
 geoCoord = geoCoordMap[datas[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

當然值得一提的是，ie8是沒有JSON物件的，需要自己匯入json.js來讓ie8支援這個屬性。
這裡提供一下百度雲盤下載連結：json.js檔案下載

tooltip: {
    //資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
    trigger: 'item',
    triggerOn: 'click',
    confine: 'true',
    //背景顏色
    backgroundColor: '#ffffff',
    formatter: function (params) {
        var res = '<div id="tool_dialog_id"><span class="
 
tool_dialog_class">' + params.data.name + '<br>';
        res += '<img class="tool_img_class" src="">' + '正常：' + params.data.value[2] + '<br>';
        res += '<img class="tool_img_class" src="">' + '未播：' + params.data.value[3] + '<br>';
        res += '<img class="tool_img_class" src="">' + '失敗：' + params.data.value[4];
        res += '</span></div>';
        return res;
    }
},

當然也可以加入非同步操作，可以去官網自行查閱。
當然visualMap也是一個不錯的元件。
主要的功能就是：視覺對映元件，用於進行『視覺編碼』，也就是將資料對映到視覺元素（視覺通道）。

visualMap: {
    type: 'piecewise',
    pieces: [
        // lt（小於），gt（大於），lte（小於等於），gte（大於等於）
        {gt: 50, lte: 100, label: '故障（失敗率：51-100%）', color: '#e84e40', symbol: 'circle'},
        {gt: 20, lte: 50, label: '警告（失敗率：21~50%）', color: '#ffed26', symbol: 'circle'},
        {gte: 0, lte: 20, label: '正常（失敗率：0~20%）', color: '#9ccc65', symbol: 'circle'}
/*{value: 123, label: '123（自定義特殊顏色）', color: 'black'},  */
    ]
    /* splitNumber: 3,//平均分段
    color: ['#d94e5d','#eac736','#50a3ba'],
    textStyle: {
    color: '#101010'
    }*/
}