Echarts在线免费图表

 
            
option = {
    //你的代码
    tooltip: {
        trigger: 'axis',//触发类型 柱状图
        axisPointer: { type: 'shadow' } //触发效果 移动上去 背景效果
    },
    legend: {
        show: true,
        right: 30,
        itemWidth: 12,
        itemHeight: 12,
        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: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月',
            ],

        },
    ],
    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: 10,
        bottom: 20,
        containLabel: true,
    },
    series: [
        {
            name: '本地车辆',
            type: 'bar',
            barWidth: 12,
            barGap: 0,
            color: '#247FFF',
            data: [50, 110, 110, 210, 150, 50, 110, 110, 210, 150, 50, 110],
            itemStyle: {
                // borderRadius: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#0EECE4FF' },
                    { offset: 1, color: '#058FE724' },
                ])
            },
        },
        {
            name: '外地车辆',
            type: 'bar',
            barWidth: 12,
            // barGap:10,
            color: '#247FFF',
            data: [150, 90, 130, 80, 180, 150, 90, 130, 80, 180, 150, 90],
            itemStyle: {
                // borderRadius: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#FF8809FF' },
                    { offset: 1, color: '#C04B002B' },
                ])
            },
        }
    ]
};