柱状覆盖图

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            const arr = [{
        "product_code": "HW1624",
        "line_name": "1F02",
        "wancheng": 1050,
        "jihua": 2800,
        "bili": 0.38,
    },
    {
        "product_code": "HW1626",
        "line_name": "1F02",
        "wancheng": 2473,
        "jihua": 25000,
        "bili": 0.1,
    },
    {
        "product_code": "HW5626",
        "line_name": "1F02",
        "wancheng": 2473,
        "jihua": 25000,
        "bili": 0.1,
    },
    {
        "product_code": "HW1524",
        "line_name": "1F023",
        "wancheng": 2473,
        "jihua": 25000,
        "bili": 0.1,
    },
    {
        "product_code": "HW3524",
        "line_name": "1F023",
        "wancheng": 2473,
        "jihua": 25000,
        "bili": 0.1,
    },
   
]

const ds = dailyoutQueue(arr); //首先队列组合相同的数据
const maxLength = Math.max.apply(null, ds.map(item => item.ids.length)); 
let titlearr=[];
var datass=[];
for(var i=0;i<maxLength;i++){
    titlearr.push('计划',"产出");
    
}

let bs=[];
for (var j =0; j<titlearr.length; j++) {
         let c=[];
         ds.forEach((item, ins) => {
             let name="";
             let val="";
             let lx="";
             item.ids.forEach((ite,index)=>{
                   if(titlearr[j]=='计划' && ite.line_name==item.line_name){
                       name=ite.product_code;
                       val=300;
                       lx=item.line_name
                   }else if(titlearr[j]=='产出'&& ite.line_name==item.line_name){
                       name=ite.product_code
                       val=100;
                        lx=item.line_name
                   }else{
                        name=ite.product_code;
                        val=0
                   }
                 
             })
             c.push({
                 name:name,
                 lx:lx,
                 title:titlearr[j],
                 value:val
             })
         });
         
       bs.push(c)  
    
}

alert(JSON.stringify(bs));
var datass=[
    [{"name":"HW1624","lx":"1F02","title":"计划","value":300},{"name":"HW3524","lx":"1F023","title":"计划","value":300}],
    [{"name":"HW1624","lx":"1F02","title":"产出","value":100},{"name":"HW3524","lx":"1F023","title":"产出","value":100}],
    [{"name":"HW1626","lx":"1F02","title":"计划","value":300},{"name":"HW3524","lx":"1F023","title":"计划","value":0}],
    [{"name":"HW1626","lx":"1F02","title":"产出","value":100},{"name":"HW3524","lx":"1F023","title":"产出","value":0}],
    [{"name":"HW5626","lx":"1F02","title":"计划","value":300},{"name":"HW3524","lx":"1F023","title":"计划","value":0}],
    [{"name":"HW5626","lx":"1F02","title":"产出","value":100},{"name":"HW3524","lx":"1F023","title":"产出","value":0}]
]
// var datass=[
//         [{name:'t1',title:"计划",value:100},{name:'t2',title:"计划",value:100},{name:'t3',title:"计划",value:100}],
//         [{name:'t1',title:"产出",value:10}, {name:'t2',title:"产出",value:30},{name:'t3',title:"产出",value:50}],
//         [{name:'t4',title:"计划",value:70}, {name:'t5',title:"计划",value:90},{name:'t6',title:"计划",value:80}],
//         [{name:'t4',title:"产出",value:60}, {name:'t5',title:"产出",value:60},{name:'t6',title:"产出",value:60}],
//         [{name:'t7',title:"计划",value:70}, {name:'t8',title:"计划",value:90},{name:'t9',title:"计划",value:80}],
//         [{name:'t7',title:"产出",value:60}, {name:'t8',title:"产出",value:60},{name:'t9',title:"产出",value:60}],
//     ];

    var  objs=[];
    for(var i=0;i<titlearr.length;i++){
   
            objs.push({
            name: titlearr[i],
            type: 'bar',
            xAxisIndex: titlearr[i]=='计划' ? 1:0,
            itemStyle: {
                normal: {
                    color: titlearr[i]=='计划'?'#b25d25':"#000",

                },
                formatter(paream) {
                    return '实际产出' + paream.value
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#000'
                    },
                    formatter(v) {
                        return titlearr[i] + v.value

                    }
                }
            },
            barGap: '100%',
            data:datass[i]
        })
    }
      

console.log(objs)

var option = {
    color: ["red", "#4CCEFE"],
    title: {
        text: "统计总量",
        textStyle: {
            fontSize: 16,
            padding: "10px"
        }
    },
    legend: {
        data: ["计划", "产出"],
    },
    tooltip: {},
    yAxis: {
        type: 'value',
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: '#000',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#aaa',
            }
        },
    },
    xAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#000',
                }
            },
            data: ['1F02', '1F023']
        }, {
            type: 'category',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            },
            data: ['会', '不会', '看情况']
        }

    ],

    series:objs
    // [
    //     {
    //         name: '计划',
    //         type: 'bar',
    //         xAxisIndex: 1,
    //         itemStyle: {
    //             normal: {
    //                 color: '#b25d25',

    //             },
    //             formatter(paream) {
    //                 return '实际产出' + paream.value
    //             }
    //         },
    //         label: {
    //             normal: {
    //                 show: true,
    //                 position: 'top',
    //                 textStyle: {
    //                     color: '#000'
    //                 },
    //                 formatter(v) {
    //                     return '计划' + v.value

    //                 }
    //             }
    //         },
    //         barGap: '100%',
    //         data: [{name:'t1',value:90}, {name:'t2',value:90},{name:'t3',value:90}]
    //     },
    //     {
    //         name: '计划',
    //         type: 'bar',
    //         xAxisIndex: 1,
    //         itemStyle: {
    //             normal: {
    //                 color: '#b25d25',
    //             }
    //         },
    //         label: {
    //             normal: {
    //                 show: true,
    //                 position: 'top',
    //                 textStyle: {
    //                     color: '#fff'
    //                 },
    //                 formatter(v) {
    //                     if (v.value == 60) {
    //                         return ''
    //                     } else {
    //                         return '计划' + v.value
    //                     }

    //                 },

    //             }
    //         },
    //         barWidth: '20%',
    //         barGap: '100%',
    //         data: [{name:'t4',value:60}, {name:'t5',value:60},{name:'t6',value:60}]
    //     },
    //     {
    //         name: '实际产出',
    //         type: 'bar',
    //         xAxisIndex: 0,
    //         barWidth: '20%',
    //         itemStyle: {
    //             normal: {
    //                 color: "#003472",
    //             }
    //         },
    //         label: {
    //             normal: {
    //                 show: true,
    //                 position: 'top',
    //                 textStyle: {
    //                     color: '#fff'
    //                 },
    //                 formatter(v) {
    //                     return '产出' + v.value

    //                 }
    //             }
    //         },
    //         barGap: '100%',
    //          data: [{name:'t1',value:10}, {name:'t2',value:30},{name:'t3',value:50}]
    //     },
    //     {
    //         name: '实际产出',
    //         type: 'bar',
    //         xAxisIndex: 0,
    //         barWidth: '20%',
    //         itemStyle: {
    //             normal: {
    //                 // color:"#003472",
    //                 color: function(v) {
    //                     debugger
    //                     if (v.data == 60) {
    //                         return "green"
    //                     } else {
    //                         return "#003472"
    //                     }

    //                 }

    //             }
    //         },
    //         label: {
    //             normal: {
    //                 show: true,
    //                 position: 'top',
    //                 textStyle: {
    //                     color: '#fff'
    //                 },
    //                 formatter(v) {
    //                     if (v.value == 60) {
    //                         return '{a|完成}'
    //                     } else {
    //                         return '产出' + v.value
    //                     }


    //                 },
    //                 rich: {
    //                     a: {
    //                         color: '#000',

    //                     },
    //                 },
    //             }
    //         },
    //         barGap: '100%',
    //       data: [{name:'t4',value:10}, {name:'t5',value:30},{name:'t6',value:50}]
    //     }

    // ]
};


function dailyoutQueue(objs) {
        var map = {},
            destArray = [];
        for (var v = 0; v < objs.length; v++) {
            var line_name = objs[v].line_name;
            var product_code = objs[v].product_code;
            if (!map[line_name]) {
                destArray.push({
                    line_name: line_name,
                    product_code: product_code,
                    ids: [objs[v]],
                });
                map[line_name] = [objs[v]];
            } else {
                for (var j = 0; j < destArray.length; j++) {
                    var dj = destArray[j];
                    if (dj.line_name == line_name) {
                        dj.ids.push(objs[v]);
                        break;
                    }
                }
            }
        }

        return destArray;
    }