实现水平进度条图表，左侧展示标签名、中间展示该项目前数据值，右侧展示该项总的数据值，从而实现左、中、右三部分展示数据集信息

效果图：

代码：

数据集：

let dataArry = [{
    name: '目标与职责', value: 30, total: 100
}, {
    name: '组织机构和人员', value: 30, total: 100
},
{
    name: '安全生产投入', value: 30, total: 100
}, {
    name: '制度化管理', value: 30, total: 100
}, {
    name: '教育培训', value: 30, total: 100
}];

option配置信息：

option = {
    backgroundColor: '#021334',
    grid: {
        top: '3%',
        left: 15,
        right: 15,
        bottom: -15,
    },
    xAxis: {
        type: 'value',
        show: false,
    },
    yAxis: {
        type: 'category',
        inverse: true,
        axisLabel: {
            show: true,
            margin: 15,
            textStyle: {
                color: '#fff',
                fontSize: 14,
            },
            // 调整左侧文字的3个属性，缺一不可
            verticalAlign: 'bottom',
            align: 'top',
            //调整文字上右下左
            padding: [0, 0, 17, 15],
        },
        axisTick: 'none',
        axisLine: 'none',
        data: dataArry.map(item => item.name),
    },
    series: [
        {
            type: 'bar',
            barWidth: 7,
            z: 2,
            zlevel: 2,
            itemStyle: {
                barBorderRadius: 4,
                color: {
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: '#2B8FFF' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#011E3A' // 100% 处的颜色
                    }],
                },
            },
            label: {
                show: true,
                position: "right",
                fontSize: 16,
                color: "#fff",
                verticalAlign: 'bottom',
                padding: [0, 0, 2, 0],
            },
            data: dataArry.map(item => item.value),
        },
        {
            name: "背景",
            type: "bar",
            barGap: "-100%",
            data: dataArry.map(item => item.total),
            barWidth: 7,
            label: {
                show: true,
                position: "right",
                fontSize: 18,
                color: "#fff",
                verticalAlign: 'bottom',
                padding: [0, 0, 2, -40],
            },
            itemStyle: { color: '#15326C' },
            z: 0,
        }
    ],
};