ECharts动态加载堆叠柱状图的实例

Posted 2020-10-19 minoz

一、引入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;
}