Echarts在线免费图表

 
            // arr：x值，y起始，y结束，横向偏移量，是否显示标记值
// 系列数量n<8：采用柱宽=6%，背景=10%，间隔=6%
// 系列数量8<=n<=12：采用柱宽=4%，背景=6%，间隔=4%
// 系列数量n>12: 采用柱宽=2%，背景=3%，间隔=2%
// 系列数量最多20
// 1：[-0.05]                 --0.01 - 0.06 * 1
// 2：[-1.01, 0.01]            --0.01 - 0.06 * 2
// 3：[-0.17, -0.05, 0.07]      --0.01 - 0.06 * 3
// 4：[-0.23, -0.11, 0.01, 0.13] --0.01 - 0.06 * 4
// 系列宽度 = 柱宽 + 间隔
// 偏移基数 = （系列宽度 - 背景） / 2
// 偏移量起始值 = 偏移基数 - 间隔 * 系列数量
// 横向偏移量 = 偏移量起始值 + 系列宽度 * （下标 - 1）

var data = [
    {
        value: ['202404', 0, 3, -0.23, false],
        itemStyle: {
            color: 'rgba(0,0,0,0.3)'
        },
    },
    {
        value: ['202404', 0, 2, -0.11, false],
        itemStyle: {
            color: 'rgba(0,0,0,0.3)'
        },
    },
    {
        value: ['202404', 0, 3, 0.01, false],
        itemStyle: {
            color: 'rgba(0,0,0,0.3)'
        },
    },
    {
        value: ['202404', 0, 3, 0.13, false],
        itemStyle: {
            color: 'rgba(0,0,0,0.3)'
        },
    }
];
var data2 = [
    {
        value: ['202404', 2, 3, -0.11, true],
        itemStyle: {
            color: 'rgba(0,0,0,0)',
            borderWidth: 1,
            borderColor: '#f00'
        },
    },
];

function renderItem(params, api) {
    var xValue = api.value(0);
    var yValue = api.value(2) - api.value(1);
    var start = api.coord([xValue, api.value(2)]);
    var size = api.size([xValue, yValue]);
    var customItemStyle = api.style();
    if (api.value(4)) {
        customItemStyle['text'] = yValue;
        customItemStyle['fontSize'] = 12;
        customItemStyle['textFill'] = '#f00';
        customItemStyle['textStrokeWidth'] = 0;
        customItemStyle['textPosition'] = 'inside';
    }

    let widthNum = size[0] * 0.10;
    var x = start[0] + api.value(3) * size[0];

    return {
        type: 'rect',
        shape: {
            x: x,
            y: start[1],
            width: widthNum,
            height: size[1]
        },
        style: customItemStyle
    };
}

option = {
    title: {
        show: false
    },
    legend: {
        show: true
    },
    tooltip: {
    },
    xAxis: {
        name: '',
        type: 'category',
        data: ['202404', '202405', '202406']
    },
    yAxis: {
        name: 'Y（元/kWh）'
    },
    series: [{
        type: 'bar',
        name: '工种1',
        z: 2,
        barWidth: '6%',
        barGap: '100%',
        data: [2, 3, 1]
    }, 
    {
        type: 'bar',
        name: '工种2',
        z: 2,
        barWidth: '6%',
        data: [3, 2, 2]
    }, 
    {
        type: 'bar',
        name: '工种3',
        z: 2,
        barWidth: '6%',
        data: [3, 2, 1]
    }, 
    {
        type: 'bar',
        name: '工种4',
        z: 2,
        barWidth: '6%',
        data: [3, 2, 1]
    }, 
    {
        type: 'custom',
        name: '现有人数',
        z: 1,
        renderItem: renderItem,
        encode: {
            x: 0,
            y: [1, 2]
        },
        data: data
    }, {
        type: 'custom',
        name: '欠缺人数',
        z: 3,
        renderItem: renderItem,
        encode: {
            x: 0,
            y: [1, 2]
        },
        data: data2
    }]
};