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: "bar",
            barWidth: 18,
            stack: '总量',
            barGap: '-100%',
            symbol: 'fixed',
            symbolRepeat: 'repeat',
            legendHoverLink: false,
            itemStyle: {
                normal: {
                    color: 'rgba(153, 153, 153, 0.23)'
                }
            },
            data: bgData,
            animation:false, //关闭动画
            z: 0
        },
        {
            name:'info',
            // 内（显示的内容）
            type: "bar",
            barGap: '-100%',
            barWidth: 18,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
                normal: {
                    color: function(params) {
                        console.log(params.dataIndex)
                        var color;
                        if(params.dataIndex % 2 != 0){
                             color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                        offset: 0,
                                        color: 'rgba(46,85,185,0.5)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#317fff' // 100% 处的颜色
                                    }
                                ]
                            }
                            }else{
                            color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                        offset: 0,
                                        color: 'rgba(136,68,68,0.5)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#ff7171' // 100% 处的颜色
                                    }
                                ]
                            }
                            }
                            return color;
                    },
                }
            },
            data: category,
            z: 1,
            animationEasing: "elasticOut"
        },
        {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
                normal:{
                    color: 'rgba(0,0,0,1)'
                }
            },
            symbolRepeat: "fixed",
            symbolMargin: 80,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [5, 21],
            symbolPosition: "start",
            symbolOffset: [0, 0],
            symbolBoundingData: maxValue,
            data: bgData,
            animation:false, //关闭动画
            z: 2
        }
    ]
};