Echarts在线免费图表

 
            const data = [
    {
        name: '调度员',
        value: [0, 0, 120, 2, 4],
        itemStyle: {
            normal: {
                color: '#41AEEB',
            },
        },
    },
    {
        name: '安全员',
        value: [1, 0, 280, 2, 4],
        itemStyle: {
            normal: {
                color: '#72F7FF',
            },
        },
    },
    {
        name: '驾驶员',
        value: [2, 0, 330, 1, 4],
        itemStyle: {
            normal: {
                color: '#FFE49B',
            },
        },
    },
    {
        name: '驾驶员',
        value: [2, 0, 380, 2.5, 4],
        itemStyle: {
            normal: {
                color: '#FFE49B',
            },
        },
    },
    // 其中value 分为五个维度，分别为{系列项}（从0开始）、y轴起始值(均为0)、实际值、同系列中索引值（从1开始）、同系列数据项总数
]
const renderItem = (params, api) => {
    let categoryIndex = api.value(0)
    let start = api.coord([categoryIndex, api.value(1)])
    let end = api.coord([categoryIndex, api.value(2)])
    let width = api.size([0, api.value(2)])[0] * 0.8
    const num = api.value(4) // 每个系列柱子数
    const currentIndex = api.value(3)
    const isOdd = num % 2 === 0
    const midN = isOdd ? num / 2 : (num + 1) / 2

    var rect = ''

    width = width / num

    let rectX = start[0] - width / 2

    const FIXED_WIDTH = 0 // 柱子间距

    // 数据处理，结构为 { itemStyle: { normal: { color: 'lightgreen' } }, name: '2011', value: [0, 0, 150, 2, 5] }
    // 其中value 分为五个维度，分别为{系列项}（从0开始）、y轴起始值(均为0)、实际值、同系列中索引值（从1开始）、同系列数据项总数

    if (num > 1) {
        if (isOdd) {
            if (currentIndex <= midN) {
                // 中位数左侧
                rectX = start[0] - width / 2 - width / 2 + (currentIndex - midN) * width - FIXED_WIDTH * (midN + 1 - currentIndex)
            } else {
                // 中位数右侧
                rectX = start[0] - width / 2 + width / 2 + (currentIndex - midN - 1) * width + FIXED_WIDTH * (currentIndex - midN)
            }
        } else {
            rectX = start[0] - width / 2 + (currentIndex - midN) * (width + FIXED_WIDTH)
        }
    }

    rect = {
        type: 'rect',
        shape: echarts.graphic.clipRectByRect(
            { x: rectX, y: end[1], width: width, height: start[1] - end[1] },
            {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height,
            }
        ),
        style: api.style(),
    }

    return rect
}

option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            extraCssText: 'width:150px;height:auto;background-color:rgba(27, 90, 135, 0.95);color:#fff;border:none',
            formatter: (params) => {
                console.log(params)
                let arr = params.map((item) => {
                    return `  <P style="font-style: normal;font-weight: 400;font-size: 12px;line-height: 16px;color: #E3FFFF;margin:0">
                                    ${item.data.name}：${item.data.value[2]}
                                </P>
                                `
                })
                let reg1 = new RegExp(',', 'g')
                var a1 = arr.join().replace(reg1, '')
                return a1
            },
        },
        color: ['#41AEEB', '#72F7FF', '#FFE49B'],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '30%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: ['调度员', '安全员', '驾驶员'],
            splitArea: {},
            splitLine: { show: false },
            axisLabel: {
                interval: 0,
                color: '#D7D8DD',
                fontSize: 14,
            },
            axisLine: {
                lineStyle: {
                    color: '#697f98',
                    fontSize: 12,
                },
            },
        },
        yAxis: {
            axisTick: {
                show: false,
            },
            type: 'value',
            boundaryGap: [0, '50%'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.8)',
                fontSize: 14,
            },
            nameTextStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 14,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#697f97',
                },
            },
        },
        series: [
            {
                type: 'custom',
                renderItem: renderItem,
                itemStyle: { normal: { opacity: 0.8 } },
                encode: { y: [1, 2], x: 0 },
                data: data,
            },
        ],
    }