Echarts在线免费图表

 
            
let category = [
    {
        name: 'xxx有限责任公司',
        value: 3000
    },
    {
        name: "xxx法院",
        value: 3000
    },
    {
        name: "xxx税务局",
        value: 8000
    },
    {
        name: "xxx人社局",
        value: 9000
    },
    {
        name: "xxx民政局",
        value: 10000
    }
];
let yName = []; // y轴名称
let bgData = []; // 最大值用作背景显示的数据
let maxValue = category[category.length - 1].value; //最大值
category.forEach(element => {
    yName.push(element.name);
    bgData.push({
        name: element.name,
        value: maxValue,
        type: element.type,
    });
});
option = {
    backgroundColor: '#000000',
    xAxis: {
        max: maxValue,
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    grid: {
        left: 80,
        top: 20,
        right: 80,
        bottom: 20
    },
    yAxis: [
        { // 每条图形上面的文字
            inverse: false,
            data: yName,
            axisLabel: {
                padding: [0, 0, 45, 0],
                inside: true,
                textStyle: {
                    fontSize: 20,
                    fontWeight: 400,
                    color: '#B1C3DD',
                    align: 'left',
                },
                formatter: '{value}',
                rich: {
                    a: {
                        color: 'transparent',
                        lineHeight: 20,
                        fontSize: 14,
                        shadowColor: 'rgba(0, 0, 0, 1)',
                        shadowBlur: 10,
                    },
                },
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
        },
        { // y轴最左侧的文字
            axisTick: 'none',
            axisLine: 'none',
            position: 'left',
            axisLabel: {
                padding: [0, 20, 0, 26], // 调整文字位置
                textStyle: {
                    color: 'rgba(255,255,255,.8)',
                    fontSize: '20',
                }
            },
            data: [5, 4, 3, 2, 1]
        },
        { // y轴最右侧的文字
            axisTick: 'none',
            axisLine: 'none',
            type: 'category',
            axisLabel: {
                margin: 10,
                textStyle: {
                    color: '#6DE8FA',
                    fontSize: '14',
                }
            },
            data: category,
        }],
    series: [
        {
            // 背景样式
            name: '背景',
            type: "pictorialBar",
            barWidth: 10,
            // barHeight: 10,
            stack: '总量',
            barGap: '-100%',
            symbol: 'fixed',
            symbolRepeat: 'repeat',
            legendHoverLink: false,
            itemStyle: {
                normal: {
                    color: 'rgba(153, 153, 153, 0.23)'
                }
            },
            data: bgData,
            symbolSize: [8, 20],
            animation: false, //关闭动画
            z: 0
        },
        {
            name: 'info',
            type: "pictorialBar",
            barWidth: 10,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#009cff',
                        },
                        {
                            offset: 1,
                            color: '#00e4ff',
                        },
                    ],
                    global: false // 缺省为 false
                }
            },
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [6, 20],
            symbolPosition: 'start',
            symbolOffset: [0, -1],
            data: category,
            z: 1,
        },
    ]
};