右上echarts 柱状配置项内容和展示

      var data1 = [];
var data2 = [];
var dataYaxis=[];
var data=[
     {id:'xxx3',name:'施工',all:8350,value:8970},
     {id:'xxx2',name:'监理',all:4500,value:5700},
     {id:'xxx1',name:'设计',all:2160,value:1800}
   ];
for (var x=0;x<data.length;x++){
    dataYaxis[x]=data[x].name;
    var obj={};
    obj.id=data[x].id;
    obj.name=data[x].name+'投资额',
    obj.value=data[x].all;
    data1[x]=obj;
    var obj2={};
    obj2.id=data[x].id;
    obj2.name=data[x].name+'总额',
    obj2.value=data[x].value;
    obj2.valueAll=data[x].all;
    data2[x]=obj2;
}
option = {
    tooltip: {
        trigger: 'axis',
         axisPointer: {
            type: 'shadow'
        },
        textStyle:{
            color:'red'
           
            
        },
         backgroundColor:'white',
        formatter:function(params){
            var num=params[0].data.value;
            var num1=params[1].data.value;
            var n = parseFloat(num / num1).toFixed(2) * 100;
             if (n >= 100) {
                  return '禁用！资金使用额度已达招标额的' + n +  '%';
                   
            }
            return null;
        }

    },
    legend: {
        data: ['施工', '监理', '设计'],

    },
    grid: {
        left: '8%',
        right: '4%',
        bottom: '10%',
        containLabel: true,
        height: '70%',
    },
    xAxis: {
        type: 'value',
        axisLine: {
            symbol: ['none', 'arrow'],
            symbolSize: [10, 50],
        },

        axisTick: {
            show: false,
        },
        axisLabel: {
            fontSize: 22,
            borderWidth: 20,
            interval: 10,

        },
    },
    yAxis: {
        type: 'category',
        data: dataYaxis,
        axisLine: {
            lineStyle: {
                type: 'dashed',
            },
        },
        axisLabel: {
            fontSize: 22,
            borderWidth: '20',
        },
        axisTick: {
            show: false,
        },

    },
    series: [{
            type: 'bar',
            itemStyle: {
                color: function(params){
                      var num = parseInt(params.data.value / (data2[params.dataIndex].value) * 100);
                     if (num < 80) {
                        return 'green';
                    } else if (num >= 80 && num < 100) {
                        return 'yellow';

                    } else {
                        return 'red';


                    }
                }
            },
            silent: true,
            barWidth: 20,
            barGap: '0%', // Make series be overlap
            data: data1,

            label: {
                show: true,
                position: 'right',
                offset: [80, 10],
                formatter: function(params, i) {
                    i = params.dataIndex;
                    var s = null;
                    var a = null;
                    var num = parseInt(params.data.value / (data2[i].value) * 100);
                    if (num < 80) {
                        return '{green|' + params.data.value+ '}' + " \n /" + '{green|' + data2[i].value + '}';
                    } else if (num >= 80 && num < 100) {
                        return '{yellow|' + params.data.value + '}' + " \n /" + '{green|' + data2[i].value + '}';

                    } else {
                        return '{red|' + params.data.value + '}' + " \n /" + '{green|' + data2[i].value + '}';


                    }
                },
                rich: {
                    red: {
                        color: 'red',
                        fontSize: 20,
                        align: 'right',
                         /*backgroundColor: {
                        image: 'black'
                         },  */
                         //backgroundColor: 'black'
                          
                    },
                    green: {
                        color: 'green',
                        fontSize: 20,
                        align: 'right'

                    },
                    yellow: {
                        color: 'yellow',
                        fontSize: 20,
                        align: 'right'
                        // backgroundColor: {
                        //image: 'xxx/xxx.jpg'
                        // },设置黄色警告图片
                    }
                }
            }
        },
        {
            type: 'bar',
            itemStyle: {
                color: '#009999',
            },
            barWidth: 20,
            z: 10,
            data: data2,
            label: {
                show: true,
                position: 'center',
                offset: [80, -14],
                formatter: function(params, i) {
                    i = params.dataIndex;
                    return '{a|' + parseInt(params.data.valueAll / params.data.value * 100) + '%' + '}';
                },
                rich: {
                    a: {
                        color: 'black',
                        fontSize: 30,
                        align: 'center'

                    },

                }
            }

        }
    ]
};