Echarts在线免费图表

 
            
option = {
    //你的代码

    tooltip: {
        trigger: 'axis',//触发类型 柱状图
        axisPointer: { type: 'shadow' } //触发效果 移动上去 背景效果
    },
    legend: {
        show: true,
        itemWidth: 8,
        itemHeight: 8,
        textStyle: {
            fontSize: 12,
            lineHeight: 12,
            rich: {
                a: {
                    verticalAlign: 'middle',
                },
            },
            padding: [0, 0, -2, 0],  //[上、右、下、左]
        },
    },
    xAxis: [
        {
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(0,0,0,0.5)',
                },
            },
            axisLabel: {
                color: '#979797',
                fontSize: 12
            },
            type: 'category',
            data: ['2018年', '2019年', '2020年', '2021年', '2022年'],

        },
        //背景柱体，不显示数据在图表中，只显示背景色
        {
            type: 'category',
            show: false,
            data: ['2018年', '2019年', '2020年', '2021年', '2022年']
        }
    ],
    yAxis: {
        name: '',
        nameTextStyle: {
            color: 'rgba(0,0,0,0.5)',
        },
        type: 'value',
        min: 0,
        axisLine: {
            show: false,
        },
        axisLabel: {
            color: '#979797',
            fontSize: 12
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#2b2b2b'
            }
        },
        axisTick: {
            show: false
        },
    },
    grid: {
        top: 50,
        left: 10,
        right: 40,
        bottom: 10,
        containLabel: true,
    },
    series: [
        {
            name: '计划性作业量',
            type: 'bar',
            barWidth: 14,
            barGap: 0,
            color: '#247FFF',
            data: [50, 110, 110, 210, 150],
            showBackground: true,
            backgroundStyle: {
                color: '#061A30'
            },
            itemStyle: {
                borderRadius: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#0c5bff' },
                    { offset: 1, color: '#84cdff' },
                ])
            },
        },
        {
            name: '非计划性作业量',
            type: 'bar',
            barWidth: 14,
            // barGap:10,
            color: '#247FFF',
            data: [150, 90, 130, 80, 180],
            showBackground: true,
            backgroundStyle: {
                color: '#141A1C'
            },
            itemStyle: {
                borderRadius: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#ffa000' },
                    { offset: 1, color: '#ffcd00' },
                ])
            },
        }
    ]
};