Echarts在线免费图表

 
            option = {
   //你的代码
   backgroundColor: "#081A52",
   tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(17,95,182,0.5)',
        textStyle: {
            color: "#fff"
        },
        formatter: function (params) {
            console.log(params,'====')
            let str = '';
            for (let i = 0; i < params.length; i++) {
                str = str + (params[i].axisValue + ' ' + params[i].data + '个') + '<br/>';
            }
            return str;
        },
    },
    legend: {
        show: true,
        top:50,
        right: 50,
        itemGap: 20,
        textStyle: {
            color: '#fff',
        },
    },
    grid: {
        top:'18%',
        left: '5%',
        right: '5%',
        bottom: '15%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            data: ['5000米负重跑', '单杠卷身上', '4楼攀爬绳索', '双杠臂屈伸', '搬运重物折返跑', '400米物资疏散', '100米负重', '10楼负重',
            '60米肩梯'],
            axisTick: {
                alignWithLabel: true,
            },
            axisLine: {
                lineStyle: {
                    color: '#394458',
                },
            },
            axisLabel: {
                interval:0,
                margin: 10,
                color: '#05D5FF',
                textStyle: {
                    fontSize: 14,
                    color:'#fff'
                },
                // rotate: '45',
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                padding: [3, 0, 0, 0],
                formatter: '{value}',
                color: 'rgba(95, 187, 235, 1)',
                textStyle: {
                    fontSize: 14,
                    color:'#fff'
                },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#394458',
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#394458',
                },
            },
        },
    ],
    series: [
        
        {
            name: '优秀',
            type: 'bar',
            barWidth: '12',
            data: [10, 6, 5, 4, 5, 25, 12, 20, 2, 0, 5, 1],
            itemStyle: {
                normal: {
                    color: 'rgba(255, 204, 0,.3)',
                    borderColor: '#ffcc00',
                },
            },
        },
        {
            name: '良好',
            type: 'bar',
            barWidth: '12',
            data: [8, 4, 4, 5, 8, 8, 8, 6, 5, 3, 14, 3],
            itemStyle: {
                normal: {
                    color: 'rgba(0, 255, 255, 0.3)',
                    borderColor: '#00ffff',
                },
            },
        },
        {
            name: '合格',
            type: 'bar',
            barWidth: '12',
            data: [28, 27, 21, 38, 31, 11, 24, 18, 36, 41, 25, 40],
            itemStyle: {
                normal: {
                    color: 'rgba(117, 146, 224, 0.3)',
                    borderColor: '#7592E0',
                },
            },
        },
         {
            name: '不合格',
            type: 'bar',
            barWidth: '12',
            data: [0, 7, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
                normal: {
                    color: 'rgba(26, 152, 246, 0.3)',
                    borderColor: '#1A98F6',
                },
            },
        },
    ],
};