column

描述:当前是关于Echarts图表中的 象形柱图 示例。
 
            var imgDatUrl = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAADGCAYAAACAXJ1iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjcwRUFBRUFFMjA3QTExRUFBNzU5QTVFNDdGNjlEMEQ0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjcwRUFBRUFGMjA3QTExRUFBNzU5QTVFNDdGNjlEMEQ0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzBFQUFFQUMyMDdBMTFFQUE3NTlBNUU0N0Y2OUQwRDQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzBFQUFFQUQyMDdBMTFFQUE3NTlBNUU0N0Y2OUQwRDQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4uqGcyAAAJKUlEQVR42uzZW2wcVx0G8P85M7MX79peX1qrIaRR1KQhqgCl3AnQVlAQlzdA8AKoT0jlCR54QEUF2oIQEpV4AQkkhIQACdQHJCR4oE1bWjWFQoVEElCb5mo7vq1v673MzOE7s2edyXp3s4ljx2m+I30aez07nvPb/7mMrcyJk3JLt7sPdP2Rv423cQT5GnIceRp5CantZLftwHkn8hjyqeS7iQmR6elH8dUa8iLyjMM6htRvFZz9yHeRzyM6rqxJ7cwFCbI5MbPzEoyP5vH6Ay6yE7G2Amc38gjyUOv61dfPSuXfJ8SEkRT2vFVWn31ZlOeJP16S4LYxCcZGxB8rtWNVkBcc1jMOq3Gz4owj30QeRmxHpXb6vFSOvyZmrSqiJAFRWiVH+304tyjh/CJKBq/5wBodRkUBarQk/sjwAC7xURfbVpG/pbBeRsKdjlNEvo58AxmyL9TPT8nayVMSrdj+QAEdb+rYg04gkqbUpaPFWliSsLyEF84k5wQjwwmYV8KxNFjADx50sW2lrbKuO9ZmcHLIV5FvuaqR+tSMVF87jU4uN/vr+xsRtMXy3beX46wDumOjvCyNRXut80m1eaUhiyT+8KB4Q8ViB6znU1j/2CyWf43v+TLybWSPfaExMy+1N85JY3Yh6WhSGa7jqq3jar1yWpWk3I87QV3+WrS0ItHyitTOTuEaGkCAGiriWBCvWLBYn3CxbRl5LoX1ChJtFY69088i37NbpwRlriz1c5PSmJ5r9sVWRLoCUp1TqcppnrcRQ214bztsG9ZKRaJVLHKo2KSyMPL8YkF0MS/eQH4QZ37SxbYlh3W0XyzV5w7548gTyGH7TbiwKPXJGeTiZZ247Oa7VEP+yLul+sLfN3S8c6V1AewA134fSmsgDYhXyFko0blse58s1rOpyvoXdsvR1eB8APk+8mH7jS3r+sU5VMtU12GgOs0hqXNz77tXai+90uX9LYDuHe/8OzohtlUdKkvns+Llc4DKiM5m2vtadpX1tMN6tduwejvyOPLpBAUbuGReOTPZvLnA7/nJ9ZpH7CcqeL/qMXwuB+iMqNp+36VK7Y4Y10OJG5i3l+x2QomXzSZIKhuIDvwSTvqMTRR4/w1zmRPtOHch30G+kOxqa3UJMclWsbNNOpZCUd0m0HQHOgFovT7n9F6tesxB3YZgX9dIXQsLg8okMMnLkadOh9kgNp4+gLnxoi/PY/wfedcut/rYXW2QLMt2+GBVMHHUewLtY/yn35dsAoOgz2u0ALp/EOoKFdxpxdSZDIZXZh0lVnIh9PVq7On9otKrVSZ4xPzzPw/LWGlQlYYCsXstXCxz+5j4+DpaWcOKUElWBhNFmx//tnKC1P6n2zzVCaDLUFJXqODWh2AxdPZSpcTGzIbKzBqtD6ZRLuHUGw1phBOCLb65gNXH0w0ZyJdlZLigh4sDOnn+GWlerFpP5p8Y50YVnB/FVz/+00t5tzmkE0AP/I3zXFvlYPh4GcC4nbmJ48UwCs/HWr1NPG+8/32OMYFU1m6Tak3i6RlgeXWLpYaLg6pYyAcjeELAlj7BqjUAVpMIMYAzJr7i+FetyumAePVz0Majapv8dYBVChtGh1IJa7XXjZhD6Nch6VQuV7UJNCaDqrrd1AAwt2CxaiqfKwNqSA3k8v5wUWwSLKwGpl4Hml0VLFaHzqwPq87D4IoAPXfUraFrbxMoXvMcVHgjWl09iQ/voPG8ezA6tujxwZisqdYmDEajWUzuYk3lsksAG1LZTD7ZeBXdqWEEJEAlR7u/Mu7B0+86/LrPI9J7x+yOWtu4e43jKFpcPokPap9YlNYD77Y9lRuTR7XkTYiqqSRYFSyPS1gRSkDIeXbj1TrVzlEoc4PdahzHrqi7AKSHiXQfRq3hppO3mRaKiRfKJ+JK9U6AHOq3Urb+j13GDABqIELnjb0prVexOiwp7Y1oT+fsPODnM+5UjP740lF6DCnVpYKwtcM23zRhYiPx3Pz/zPLKBH6vnWx3/N+QC6iSQvJMpoz4yjRiT2a1USNITivTUnGfe/PzN3bi6DGktK28RDbRFTMz/4aZLw8ZrfZvFuVG/Peh1QJsuu6IMVkanVTWkjay4kXxmA6jrIqNo7JzlBbjdtVGe+5hEBhRKCp2KLML583UTIA37W2iqJvqvw9X+kPIEHamQzH2IcZLNoxlHZlVrxaO63ojq+zG0+7S7Z+PLaZFsW12YdqcncQ+zrwlmVOucV7Z2TjtU5ZSpSjjlSI8ORu7YRQ1D6Q1r1of96rAminPm1NnsWWPd0tzTrup/2+1OSytRiOseFEhJwO5kpijx0YBMrqVKK2mhY04xCEOcYhDHOIQhzhsxCEOcYhDHOIQhzjEIQ4bcYhDHOIQhzjEIQ5x2IhDHOIQhzjEIQ5xiEMcNuIQhzjEIQ5xiEMc4rARhzjEIQ5xiEMc4hCHOGzEIQ5xiEMc4hCHOMRhIw5xiEMc4hCHOMQhDnHYiEMc4hCHOMQhDnGIQxw24hCHOMQhDnGIQxzisBGHOMQhDnGIQxziEIc4bMQhDnGIQxziEIc4xGEjDnGIQxziEIc4xCEOcdiIQxziEIc4xCEOcYjDRhziEIc4xCEOcYhDHOKwEYc4xCEOcYhDHOIQh404xCEOcYhzg1sd+QXyFZ8W663qUH6Y27XnjH2BOCKryM+QH+Xu3DeZ/oHF+THyInK/y3uR7C2Asoj8BHkye9eBuU4nWJwactTlUSSPvB95ALkPeQ8SvIlQLMSTDmYxe/fBrid2GlZryF9dbCsgH3RQFuzem3Q4Ttuhg/wUWennDX6fY/IvLrYNIh9yWDaHEW8Ho5yzkyzyc/fB992upQKWkT+52FZyWPc7rHfskC3CKeQHyC/d8nzV7XoMjzLyRxfbRpGPOCgLdg+ithHlOPIE8lsk3MyFtmLumEeecrFtPAV1Xzg9dUi8LSmsV5HHkT8g8fW44HZMrLPI711sm0hN7vZ4YJPXP+ZQbOWa63njN2LVsavG71xs25WaryzYvj6v85xD+fNW3egNX5Jzu/dewOHXLrI2N7knPQyRvet7jJW5pVyzUh5TX/qc3ZeJ+c1T8qbFaW/5sTvsc82vXKSyOr+vtW0wmeCweuiLH9uue/m/AAMAxLG93ue7rHQAAAAASUVORK5CYII='
var imgDatUrl1 = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAADGCAYAAACAXJ1iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZDMDIwQUUyMjA3QTExRUFCQzhBRUZDNDcxQTU4NDMzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZDMDIwQUUzMjA3QTExRUFCQzhBRUZDNDcxQTU4NDMzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkMwMjBBRTAyMDdBMTFFQUJDOEFFRkM0NzFBNTg0MzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkMwMjBBRTEyMDdBMTFFQUJDOEFFRkM0NzFBNTg0MzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5qVpX6AAAMeElEQVR42uzZ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'

//图片细节没有特别处理,简单实现下效果

option = {
    backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
        offset: 0,
        color: '#f7f8fa'
    }, {
        offset: 1,
        color: '#cdd0d5'
    }]),
    tooltip: {
        show: false
    },
    grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '15%',
    },
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E'],
        // offset: 15,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#000',
            fontSize: 14
        }
    },
    yAxis: {
        min: 0,
        max: 100,
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    series: [{
        type: 'pictorialBar',
        label: {
            show: false,
            position: 'inside',
            color: '#fff',
            fontSize: 14,
            formatter: '{c}%'
        },
        
        barWidth: '80',
        symbol: imgDatUrl1,
        data: [49, 80, 67, 70, 40],
        z: 10
    }, {
        type: 'pictorialBar',
        barWidth: '80',
        symbol: imgDatUrl,
        data: [100, 100, 100, 100, 100],
        z: 5
    }, {
        type: 'pictorialBar',
        barGap: '-100%',
        itemStyle: {
            opacity: 0,
        },
        barWidth: '80',
        data: [100, 100, 100, 100, 100],
        z: 5
    }],
};