ECharts動態加載堆疊柱狀圖的實例

一、引入echarts.js文件（下載頁:http://echarts.baidu.com/download.html）

二、HTML代碼：

<div style="width: 100%; height: 400px;" id="main">
</div>

三、js代碼（獲取數據以及對數據的處理方法）：

function loadData(callback){
  $.ajax({
        url: 'test.json',
        dataType: 'json',
        success: function(data){
            if(data == '' || data == null){
                return;
            }
            var nameArr = [];
            var totalGoalArr = [];
            var totalRealArr = [];
            var firstGoalArr = [];
            var firstRealArr = [];
            var secondGoalArr = [];
            var secondRealArr = [];
            var data = data.list;
            for(var i = 0; i < data.length; i++){
                var orgSn = data[i].orgSn;    //獲取列表的orgSn 
                var firstGoal = getTarget1(orgSn);    //根據orgSn獲取一類點規划量
                var secondGoal = getTarget2(orgSn);    //根據orgSn獲取二類點規划量
                var totalGoal = firstGoal + secondGoal;    //總規划量 = 一類點規划量 + 二類點規划量
                allData[data[i].orgName] = {    //將得到的數據全部整合在allData對象中，在設置tooltip時方便使用
                    "totalGoal": totalGoal,
                    "totalReal":data[i].total,
                    "firstGoal ": firstGoal,
                    "firstReal": data[i].count1,
                    "secondGoal": secondGoal,
                    "secondReal": data[i].count2
                }
            
                nameArr.push(data[i].orgName);    //將data列表中的orgName拼接在nameArr數組中，用於x軸數據的展示
                //將通過orgSn獲得的總規划量和data列表中的total值作比較，總規划量數組為totalGoal的集合。
                //若前者大於后者，則未完成，未完成量為totalGoal - data[i].total,柱子顏色為白底紅邊；
                //若后者大於前者，則超額完成，超額完成量為data[i].total - totalGoal，柱子顏色為藍色
                if(data[i].total < totalGoal){    
                    totalGoalArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(255, 0 , 0)'，
                                barBorderColor: 'rgb(255, 0, 0)'
                            }
                        },
                        value: totalGoal
                    });
                    totalRealArr.push({
                        itemStyle: {
                            normal: {
                                color: '#FFF'，
                                barBorderColor: 'rgb(254, 0 , 0)'
                            }
                        },
                        value: totalGoal - data[i].total
                    });
                } else {
                   totalGoalArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(86, 205 , 89)'，
                                barBorderColor: 'rgb(86, 205 , 89)'
                            }
                        },
                        value: totalGoal
                    });
                    totalRealArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(0, 135 , 237)'，
                                barBorderColor: 'rgb(0, 135 , 237)'
                            }
                        },
                        value: data[i].total -  totalGoal
                    }); 
                }
                //將通過orgSn獲得的一類點規划量和data列表中的count1值作比較，一類點規划量數組為firstGoal的集合。
                //若前者大於后者，則未完成，未完成量為firstGoal - data[i].count1；
                 //若后者大於前者，則超額完成，超額完成量為data[i].count1 - firstGoal
                if(data[i].count1 < fistGoal){
                    fistGoalArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(255, 0 , 0)'，
                                barBorderColor: 'rgb(255, 0 , 0)'
                            }
                        },
                        value: data[i].count1
                    });
                    fistRealArr.push({
                        itemStyle: {
                            normal: {
                                color: '#FFF'，
                                barBorderColor: 'rgb(254, 0 , 0)'
                            }
                        },
                        value: fistGoal - data[i].count1
                    });
                } else {
                   fistGoalArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(86, 205 , 89)'，
                                barBorderColor: 'rgb(86, 205 , 89)'
                            }
                        },
                        value: fistGoal
                    });
                    fistRealArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(0, 135 , 237)'，
                                barBorderColor: 'rgb(0, 135 , 237)'
                            }
                        },
                        value: data[i].count1 -  fistGoal
                    }); 
                }
                // 將通過orgSn獲得的一類點規划量和data列表中的count1值作比較，一類點規划量數組為firstGoal的集合。
                //若前者大於后者，則未完成，未完成量為firstGoal - data[i].count1；
                //若后者大於前者，則超額完成，超額完成量為data[i].count1 - firstGoal
                if(data[i].count2 < secondGoal){
                    secondGoalArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(255, 0 , 0)'，
                                barBorderColor: 'rgb(255, 0 , 0)'
                            }
                        },
                        value: data[i].count2
                    });
                    secondRealArr.push({
                        itemStyle: {
                            normal: {
                                color: '#FFF'，
                                barBorderColor: 'rgb(254, 0 , 0)'
                            }
                        },
                        value: fistGoal - data[i].count2
                    });
                } else {
                   fistGoalArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(86, 205 , 89)'，
                                barBorderColor: 'rgb(86, 205 , 89)'
                            }
                        },
                        value: secondGoal
                    });
                    secondRealArr.push({
                        itemStyle: {
                            normal: {
                                color: 'rgb(0, 135 , 237)'，
                                barBorderColor: 'rgb(0, 135 , 237)'
                            }
                        },
                        value: data[i].count2 -  secondGoal
                    }); 
                }
            }
            //回調函數，數據加載成功后再執行代表callback的函數
                if(typeof callback == 'function'){
                    callback();
                }
            }
        });
    } 

四、js方法（加載圖表的方法）：

function initBarChart(){
    var myChart = echarts.init(document.elementById('main'));
    var option = {
        title: {
            text: '視頻點位分類統計圖',
            x: 'center',
            y: 'top'
    
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { 
                type: 'shadow'    //默認為直線，可選'line | shadow'
            },
            position: 'top',
            formatter: function(params){
                return param[0].name
                    +"<br/>監控總指標量：" + allData[params[0].name]["totalGoal"]
                    +"<br/>監控總完成量：" + allData[params[0].name]["totalReal"]
                    +"<br/><br/>一類點規划量：" + allData[params[0].name]["firstGoal"]
                    +"<br/>一類點完成量：" + allData[params[0].name]["firstReal"]
                    +"<br/><br/>二類點規划量：" + allData[params[0].name]["secondGoal"]
                    +"<br/>二類點完成量：" + allData[params[0].name]["secondReal"]
            }
        },
        legend: {
            show: false
        },
        xAxis: [{
            type: 'category',
            top: 20,
            axisTick: false,    //
            data: nameArr
        }],
        yAxis: [{
            type: 'value',
            axisTick: false,    //不顯示刻度
            splitLine: false    //不顯示分割線
        }],
        series: [{
            name: '監控總指標量',
            type: 'bar',
            barWidth: 10,
            stack: 'total',    //stack相同的柱子則堆疊在一起
            data: totalGoalArr
        }, {
            name: '監控總完成量',
            type: 'bar',
            barWidth: 10,
            stack: 'total',
            data: totalRealArr
        }, {
            name: '一類點規划量',
            type: 'bar',
            barWidth: 10,
            stack: 'first',
            data: firstGoalArr
        },  {
            name: '一類點完成量',
            type: 'bar',
            barWidth: 10,
            stack: 'first',
            data: fiestRealArr
        }, {
            name: '二類點規划量',
            type: 'bar',
            barWidth: 10,
            stack: 'second',
            data: secondGoalArr
        }, {
            name: '二類點完成量',
            type: 'bar',
            barWidth: 10,
            stack: 'second',
            data: secondRealArr
        }]
    };
    
    myChart.setOption(option);
}

五、js方法（調用這兩個方法）：

loadData(initBarChart);

六、json文件：

{
    list: [{
        "orgName": "海曙",
        "orgSn": "330203",
        "total": 304,
        "count1": 222,
        "count2": 50
    }, {
        "orgName": "青州",
        "orgSn": "3302000",
        "total": 304,
        "count1": 222,
        "count2": 50
    }, {
        "orgName": "安徽",
        "orgSn": "330205",
        "total": 304,
        "count1": 222,
        "count2": 50
    }, {
        "orgName": "貴州",
        "orgSn": "330206",
        "total": 304,
        "count1": 222,
        "count2": 50
    }, {
        "orgName": "海曙",
        "orgSn": "330207",
        "total": 304,
        "count1": 222,
        "count2": 50
    }, {
        "orgName": "杭州",
        "orgSn": "330208",
        "total": 304,
        "count1": 222,
        "count2": 50
    }, {
        "orgName": "雙基",
        "orgSn": "330209",
        "total": 304,
        "count1": 222,
        "count2": 50
    }, {
        "orgName": "余姚",
        "orgSn": "330201",
        "total": 304,
        "count1": 222,
        "count2": 50
    }, {
        "orgName": "江干",
        "orgSn": "330210",
        "total": 304,
        "count1": 222,
        "count2": 50
    }]
}

七、js方法（根據orgSn獲取一類指標量的方法）：

function getTarget1(orgSn){ 
    var target = 0; 
    switch(orgSn){ 
        case "330203": 
            target = 100; 
            break; 
        case "3302000": 
            target = 139; 
            break;
        case "330205": 
            target = 145; 
            break;
        case "330206": 
            target = 56; 
            break;
        case "330207": 
            target = 189; 
            break;
        case "330208": 
            target = 166; 
            break;
        case "330209": 
            target = 122; 
            break;
        case "330201": 
            target = 339; 
            break;
        case "330210": 
            target = 554; 
            break;
        default:
            break;
    }
    return target;
}

八、js方法（根據orgSn獲取二類指標量的方法）：

function getTarget2(orgSn){ 
    var target = 0; 
    switch(orgSn){ 
        case "330203": 
            target = 300; 
            break; 
        case "3302000": 
            target = 239; 
            break;
        case "330205": 
            target = 45; 
            break;
        case "330206": 
            target = 156; 
            break;
        case "330207": 
            target = 89; 
            break;
        case "330208": 
            target = 66; 
            break;
        case "330209": 
            target = 222; 
            break;
        case "330201": 
            target = 239; 
            break;
        case "330210": 
            target = 154; 
            break;
        default:
            break;
    }
    return target;
}