柱状图echarts image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAAXNSR0IArs4c6QAAAYNJREFUSA211M1Kw0AQB/D/btNPW6z6Dh482Fq9iIIBxR4EfQufI6/hK3hT8BA9VEFBRJT25KFPIPgBxcbaNOtsS6Qfpmna3YHSpGXy29nJDsyKSEFj8FgLm4TkdRkcBpLxNtb3rsS8DoR3Yrj3ODwmsKEDYXLVW2cil0ijZAAG9/Bsl/EBRqSC6AI6kT9AFzIA6ED48DbfHbHGj4Mn+t2l5q+VbSxAiJGFDOcF3QcmHt6KnNNEiRJnanwgIFekAhkLqEBGeiAf2h/n26yRzvR60o6jeHCBfJSehFbgY/u2mGszFOkwpr5d1HYf8GZZzPP/D/oOrcBPvCyzL/GJKr1PrZSB1esdLFqWCM2fuAIfkmOFtqxAgyRJW1Y1b/A+rpLIgISiIFMBUZCpgUmR0CbJBwWFHCuZdK/xNOb/bfxMFfiwPPFNBwWaXQn61PobrwSQUBCiDJCIeSqyfAkrcJGNMbzQa/yqFOgiFUK8HsI56sqBAaSDvBagD1mW19ri+OQx/gvkiMQ+IOnzCgAAAABJRU5ErkJggg==配置项内容和展示

      // 指定图表的配置项和数据
var jinzhan = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 10, 20, 10, 10, 10, 10 ]
var huancheng = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10  ]
var chuzhan = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10  ]
var keliuTotal=[]
var sanjiao = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAmElEQVRYR+2Vyw2AIBBEZwuxMCuxAi8W4dE216CYeFD24wEPw4VAAvN4ybKCzkM654MANEADNEAD/zagqiOAGYDWnnHNZendW0Vkees5poEKsSWb1tQKL3eaAMdTTxNRCDPcDZCAcIWHAAIQ7vAwgAMiFJ4CaECEw9MADxCp8E8AN4jBKrVWCbvKMPkHuI4RgAZogAa6G9gBRz4yIaDh8qEAAAAASUVORK5CYII='
var datacity =  ['浦东', '闵行', '徐汇', '普陀', '宝山', '黄埔', '长宁', '静安', '杨浦', '虹口', '崇明', '松江', '金山', '嘉定', '青浦', '奉贤']
jinzhan.forEach(function(item, i) {
    keliuTotal.push(jinzhan[i]+huancheng[i]+chuzhan[i]);
});
var max = Math.max.apply(null, keliuTotal)
var total =max+10
var option = {
    backgroundColor: '#091534',
    tooltip: {
        show:false,
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    legend: {
        show:false
    },
    grid: { //图表的位置
        top: '0%',
        left: '0%',
        right: '0%',
        bottom: '20%',
        containLabel: true
    },
    yAxis: [{
        type: 'value',
        inverse: true,
        axisLabel: { //坐标轴刻度标签的相关设置。
            show:false,
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            margin: 15,
            textStyle: {
                color: '#6B9DD7',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 14,
            }
        },
        axisLine: {
            show:false,
            lineStyle: {
                color: 'rgba(27,63,129,.4)'
            }
        },
        splitLine: {
            show:false,
            lineStyle: {
                color: 'rgba(27,63,129,.4)'
            },
        },
        axisTick:{
            
            show:false,
        },
        show: true

    }],
    xAxis: [{
        type: 'category',
        position: 'top',
        axisLabel: { //坐标轴刻度标签的相关设置。
            show:false
        },
        axisLine: {
            show:false,
            lineStyle: {
                color: 'rgba(27,63,129,.4)'
            }
        },
        axisTick:{
            
            show:false,
        },
        data: datacity,
    }, {
        type: 'category',
        inverse: true,
        offset: 12,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: '12'
            },
            
        },
        data:keliuTotal
    }],
    series: [{
            type: "pictorialBar",
            itemStyle: {
                normal: {
                    color: "#061348"
                }
            },
            symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAAXNSR0IArs4c6QAAAYNJREFUSA211M1Kw0AQB/D/btNPW6z6Dh482Fq9iIIBxR4EfQufI6/hK3hT8BA9VEFBRJT25KFPIPgBxcbaNOtsS6Qfpmna3YHSpGXy29nJDsyKSEFj8FgLm4TkdRkcBpLxNtb3rsS8DoR3Yrj3ODwmsKEDYXLVW2cil0ijZAAG9/Bsl/EBRqSC6AI6kT9AFzIA6ED48DbfHbHGj4Mn+t2l5q+VbSxAiJGFDOcF3QcmHt6KnNNEiRJnanwgIFekAhkLqEBGeiAf2h/n26yRzvR60o6jeHCBfJSehFbgY/u2mGszFOkwpr5d1HYf8GZZzPP/D/oOrcBPvCyzL/GJKr1PrZSB1esdLFqWCM2fuAIfkmOFtqxAgyRJW1Y1b/A+rpLIgISiIFMBUZCpgUmR0CbJBwWFHCuZdK/xNOb/bfxMFfiwPPFNBwWaXQn61PobrwSQUBCiDJCIeSqyfAkrcJGNMbzQa/yqFOgiFUK8HsI56sqBAaSDvBagD1mW19ri+OQx/gvkiMQ+IOnzCgAAAABJRU5ErkJggg==',
            symbolRepeat: "auto",
            symbolMargin: -2,
            symbolSize: [18, 15],
            symbolPosition: "start",
            symbolBoundingData: 40,
            symbolClip: true,
            z: 2,
            data:keliuTotal,
            animationEasing: "elasticOut"
        },
        {
            name: '0-1年',
            type: 'bar',
            barWidth: '18',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#3d80ff '
                    }, {
                        offset: 1,
                        color: '#082b69'
                    }]),
                },
            },
            stack: 'sum1',
            data: jinzhan,
            z: 1
        },
        {
            name: '1-2年',
            type: 'bar',
            stack: 'sum1',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#3dd1ff '
                    }, {
                        offset: 1,
                        color: '#0d547e'
                    }]),
                },
            },
            barWidth: '18',
            data: huancheng,
            z: 1
        },
        {
            name: '2-3年',
            type: 'bar',
            barWidth: '18',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#ffb53d '
                    }, {
                        offset: 1,
                        color: '#5a562f'
                    }]),
                },
            },
            stack: 'sum1',
            barWidth: '18',
            data: chuzhan,
            z: 1
        },
        {
            name: "外框",
            type: "bar",
            barGap: "-109%", // 设置外框粗细
            data:[total, total, total,total,total,total,total,total,total,total,total,total,total,total,total,total],
            barWidth: '20',
            itemStyle: {
                normal: {
                    color: "#001a3a", // 填充色
                    barBorderColor: "#194c92", // 边框色
                    barBorderWidth: 1, // 边框宽度
                    label: {
                        // 标签显示位置
                        show: false,
                       
                    },
                }
            },
            z: 0
        },
        {
            name: "三角",
            type: "pictorialBar",
            data: [total, total, total,total,total,total,total,total,total,total,total,total,total,total,total,total],
            symbol:'triangle',
            symbolSize: [8, 4],
            symbolOffset: [0, 12],
            color:'#fff',
            symbolPosition: 'end',
            itemStyle: {
                show:false
            },
            z: 0
        }
    ]
};