Echarts在线免费图表

 
            option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            z: -1,
            label: {
                width: 100
            },
            shadowStyle: {
                color: '#f0f4fa'
            }
        },
        backgroundColor: 'rgba(255, 255, 255, .8)',
        padding: [5, 10],
        textStyle: {
            color: '#666',
            align: 'left'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '20%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['轻微下降', '中等下降', '强烈下降'],
        axisTick: {
            show: false,
            alignWithLabel: true,

            interval: 500
        },
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#666'
            }
        },
    }],
    yAxis: [{
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#666'
            }
        }
    }],
    series: [{
        name: '学生数量',
        type: 'bar',
        data: [10, 52, 200],
        barWidth: 80,
        barGap: '80%',
        /*多个并排柱子设置柱子之间的间距*/
        barCategoryGap: '50%',
        /*多个并排柱子设置柱子之间的间距*/
        itemStyle: {
            color: '#39a1ff'
        }
    }]
};