Examples柱状图

请看下图
链接: https://echarts.apache.org/examples/zh/editor.html?c=pictorialBar-body-fill（根据此进行修改）

完成效果:

看代码

我只修改了我所需的内容如有不明白请联系我。
代码片

var bodyMax = 150;

var labelSetting = {
    show: true,
    position: 'outside',
    offset: [0, -20],
    formatter: function (param) {
        return (param.value / bodyMax * 100).toFixed(0) + '%';
    },
    textStyle: {
        fontSize: 18,
        fontFamily: 'Arial'
    }
};
var markLineSetting = {
    symbol: 'rect',
    lineStyle: {
        opacity: 0.3
    },
    data: [{
        type: 'max',
        label: {
            formatter: 'max: {c}'
        }
    }, {
        type: 'min',
        label: {
            formatter: 'min: {c}'
        }
    }]
};
option = {
    tooltip: {
    },
    legend: {
        data: ['typeA', 'typeB'],
        selectedMode: 'single'
    },
    xAxis: {
        data: ['a', 'b', 'c', 'd', 'e'],
        axisTick: {show: false},//以下这些属性参照官网可以找出特性
        axisLine: {show: false},
        axisLabel: {show: false}
    },
    yAxis: {
        max: bodyMax,
        offset: 20,
        splitLine: {show: false}
    },
    grid: {
        top: 'center',
        height: 230
    },
    markLine: {
        z: -100
    },
    series: [{
        name: 'typeA',
        type: 'pictorialBar',
        symbolClip: true,
        symbolBoundingData: bodyMax,
        label: labelSetting,
        barWidth : 30,//柱图宽度
        data: [{
            value: 123,
            symbol: 'rect'
        }, {
            value: 34,
            symbol: 'rect'
        }, {
            value: 101,
            symbol: 'rect'
        }, {
            value: 89,
            symbol: 'rect'
        }, {
            value: 72,
            symbol: 'rect'
        }],
        markLine: markLineSetting,
        z: 10
    }, {
        name: 'typeB',
        type: 'pictorialBar',//官网有多种类型
        symbolClip: true,
        symbolBoundingData: bodyMax,
        label: labelSetting,
        barWidth : 30,//柱图宽度
        data: [{
            value: 12,
            symbol: 'rect'//修改这个可以改为柱状形状 //circle', 'rect', 'roundRect', 'triangle',    'diamond', 'pin', 'arrow', 'none' 不同的类型
        }, {
            value: 44,
            symbol: 'rect'
        }, {
            value: 131,
            symbol: 'rect'
        }, {
            value: 33,
            symbol: 'rect'
        }, {
            value: 142,
            symbol:'rect'
        }],
        markLine: markLineSetting,
        z: 10
    }, {
        name: 'full',
        type: 'bar',
        symbolBoundingData: bodyMax,
        animationDuration: 0,
        showBackground: true,//为true的时候展示背景色
        backgroundStyle: {//柱状图背景色
            color: 'rgba(110, 193, 244, 0.2)',
          },
        barWidth : 30,//柱图宽度
        data: [{
            value: 1,
            symbol: symbols[0]
        }, {
            value: 1,
            symbol: symbols[1]
        }, {
            value: 1,
            symbol: symbols[2]
        }, {
            value: 1,
            symbol: symbols[3]
        }, {
            value: 1,
            symbol: symbols[4]
        }]
    }]
};;