带图标柱状图echarts 柱状配置项内容和展示

      let chartData =[
    {"value": 600,"name": "单位1"},
    {"value":500,"name": "单位2"},
    {"value":400,"name": "单位3"},
    {"value": 300,"name": "单位4"},
    {"value": 200,"name": "单位5"},
];

let icon1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAALCAYAAACUPhZAAAAB3ElEQVQokW2SzWsTURTFf2/mzUdGTUMlIY41SzfZ1IULrQu3bkT8C+zKnRs3QtGFFfzCtSCIUHDjzp2iqCVKKn5UalMtSDeSFkFpFUqaZJKRN86rL5McuAznzL3n3nffEyzVbgOTDGIDmAZ6WhXzH3cTLMfHcpxFy/UrZlW/vbPTrT1bSeknGVhiDrgAuJkGy3np3ipIOyGrg//uOqUwOxDt+gv1CYEOcNECPuelO5uXLpm4ClSzBsARJ5w4j2NjRru5Bs3vOmcWWJIVP6fIDeA0cNQw8YAHwHEgiqVA+AEyCJ4Q+KJvrmP7D733C5q+S/2QqRDtd6Ta8YfUVEM1u1R0vGtf/wn3rXJYijNH6Sy8hm432Ux6V5FprtAoOt4V4Gam9jLwGAicysQ01qB1+8sKrK9rquobmsipsTEz9w5wBjhmaOqi5+TB8FAc5IRp3f+9BW/rmtbT+l2Ykyv0iq6njrUI5Ax9cqp6mDc/N/8rcUzv1UuIktfayj5dBYthrI577sy452LGqbDEgT0+fVskETWWYeOHLp4Zfq0g7kW/RvgnTeeBE6bYbLW4/m2NzuYWPHykp64BJ9WWRpmMQr9gy3OBsKOCLdFR3buPs+UyPH2ujbfTdQwZA/wFDzGDEfJxOIQAAAAASUVORK5CYII=';
let icon2='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAALCAYAAACUPhZAAAAB4UlEQVQokW2TzUsVURjGfzNz5qPRe73dmNBr3U3Lu7EiqGzR1k1Ef4Gu2rVpE4gtNOgL10EQgtAfEG1ql0WUVGjWvSXYB5jpQqzM8HqdmRtnnCNnRh94GZ73nPd53/OcOQajc3eBPrJYBoaASGWN91O7G0zDwbTsGVN4Vb0qDpvN7cWpRkpnhe+Yk8AVwMk1+Fh0xZ2SLxIyn127Zxcq+YHYWnwuPxWgBVw1gQ9FV4wVXUEuRoFaXgA4bpeOXEZY6LG1/h3+Lqk9Y8CcqB70JLkFXABOaSIuMAGcBcK2EBiWh/D8JzieEWfs2CBafqvom1QPkSbCQwVbevwuFVWQza4Fvn3j807igdnRfbidO0rr62uIthNn0rsKdXGJeuDb14HbudoR4BHg20F1CNPM+rzyCdZ/Kirr64qI/mNd+t5x4CJwRsvJi54U5d6jbcc39Knj5h/4Ma3oq7R+F/rkElHQ6chjzQAHtHxf/+kaLxurWqpN9OUZRIkDm/lfVyJ7xh3MlwvucLngosfAiQo9QQexsJIIV+rwWz6HBMN7/1Yw7n9LOuchm8pXc05fWFrb5ObjBVobv2D6oZr6BXBeurSfyH6IS6416FtGWHItVNR6Orl0shsaT5Xwv9SOPcIA/wG11YJvCHXpxwAAAABJRU5ErkJggg==';

let colorList  =[
    ['#9ffafa', '#9ffafa', '#9ffafa', '#0093ff'],
    ['#f4ceb9', '#f4ceb9', '#f4ceb9', '#0093ff'],
    ['#b2b4ff', '#b2b4ff', '#b2b4ff', '#0093ff']
]

option = {
    backgroundColor:'#003a82',
    tooltip: {
                    show:false,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
    legend: {
        show: false
    },
    grid: {
        left: '50',
        right:'3%',
        top: '6%',
        bottom:0,
        containLabel:true
    },
    xAxis: {
        show: false,
        type: 'value'

    },
    yAxis: [
        {
            type: 'category',
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisPointer: {
                label: {
                    show: true,
                    margin: 5
                }
            },
            data:chartData.map(item => item.name),
            axisLabel: {
                show: false,
                inside: false,
                fontSize: 14,
                color: '#88caef',
            },
        }, 
        {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            data: chartData.map(item => item.value),
            axisLabel: {
                show:true,
                fontSize: 14,
                color: '#88caef',
                formatter:'{value}'
            }
        }
    ],
    series: [
        {
            z: 2,
            name: 'value',
            type: 'bar',
            barWidth: 5,
            zlevel: 1,
            data: chartData.map((item, i) => {
                let itemStyle = {
                    color: i > 3 ? colorList[0][3] : colorList[0][i]
                }
                return {
                    value: item.value,
                    itemStyle: itemStyle
                };
            }),
            label: {
                normal: {
                    color: '#b3ccf8',
                    show: true,
                    position: [-30, '-15'],
                    textStyle: {
                        fontSize: 12,
                        color: '#88caef',
                    },
                    rich: {
                    a1: {
                        color: '#fff',
                        fontSize: 16,
                        fontWeight:600,
                        backgroundColor: {
                            image: icon1
                        },
                        width: 20,
                        height: 10,
                        align: 'center',
                        borderRadius: 2
                    },
                    a2: {
                        color: '#fff',
                        fontSize: 16,
                        fontWeight:600,
                        backgroundColor: {
                            image: icon1
                        },
                        width: 20,
                        height: 10,
                        align: 'center',
                        borderRadius: 2
                    },
                    a3: {
                        color: '#fff',
                        fontSize: 16,
                        fontWeight:600,
                        backgroundColor: {
                            image: icon1
                        },
                        width: 20,
                        height: 10,
                        align: 'center',
                        borderRadius: 2
                    },
                    b: {
                        color: '#fff',
                        fontSize: 16,
                        fontWeight:600,
                        backgroundColor: {
                            image:icon2
                        },
                        width: 20,
                        height: 10,
                        align: 'center',
                        borderRadius: 2
                    }
                },
                    formatter: (a,b)=> {
                        var index = chartData.map(item => item.name).indexOf(a.name) ;
                        index = index + 1;
                        if (index - 1 < 3) {
                            return [
                                '{a' + index + '|' + index + '}' + '  ' + a.name
                            ].join('\n')
                        } else {
                            return [
                                '{b|' + index + '}' + '  ' + a.name
                            ].join('\n')
                        }
                    }
                }
            },
        },
        {
            name: '总量',
            type: 'bar',
            barWidth: 5,
            barGap: '-100%',
            itemStyle: {
                normal: {
                    color: 'rgba(32, 48, 85, 0.55)'
                }
            },
            data: (new Array(chartData.length)).fill(chartData[0].value+50)
        }

    ]
};