Echarts在线免费图表

 
            option = {
   backgroundColor: '#081736',
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: []
    },
    grid: {
        left: '8%',
        top: '20%',
        right: '8%',
        bottom: '25%',
    },
    xAxis: {
        type: 'category',
        boundaryGap: true, //坐标轴两边留白
        data: ['城东社区','东环社区','大东关社区','小东关社区','谢家井社区','博雅社区','五郎庙村','湑水村','石家庄村','马家店村','黄家村','曹家村','吕家村','大草坝村','庙坡村','廉家庄村','莲花池村','小西关村','杜家漕村','栗子园村','翟家寺村'],
        axisLabel: { //坐标轴刻度标签的相关设置。
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
                color: '#1B253A',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
            },
            // formatter: function (params) {
            //     var newParamsName = "";
            //     var paramsNameNumber = params.length;
            //     var provideNumber = 4; //一行显示几个字
            //     var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            //     if (paramsNameNumber > provideNumber) {
            //         for (var p = 0; p < rowNumber; p++) {
            //             var tempStr = "";
            //             var start = p * provideNumber;
            //             var end = start + provideNumber;
            //             if (p == rowNumber - 1) {
            //                 tempStr = params.substring(start, paramsNameNumber);
            //             } else {
            //                 tempStr = params.substring(start, end) + "\n";
            //             }
            //             newParamsName += tempStr;
            //         }

            //     } else {
            //         newParamsName = params;
            //     }
            //     return newParamsName
            // },
            //rotate:50,
        },
        axisTick: { //坐标轴刻度相关设置。
            show: false,
        },
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
                color: '#055A95'
            },
        },
        splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {
                color: '#055A95',
                // 	opacity:0.1
            }
        },
        axisLabel: {
            interval: 0,
            rotate: 50,
            textStyle: {
                color: '#fff',
                fontSize: 12
            },
        },
    },
    yAxis: [

        {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
                interval: 0,
                rotate: 0,
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 14,
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#055A95',
                    // 	opacity:0.1
                }
            }

        }
    ],
    series: [{
            name: '',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#03959F',
                    lineStyle: {
                        color: "#03959F",
                        width: 1
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: 'rgba(2,178,179,0.35)'
                        }, {
                            offset: 1,
                            color: '#02B7B7'
                        }]),
                    }
                }
            },
            data: ['1','4','1','2','2','6','1','3','2','1','2','1','1','2','3','2','1','1','3','1','2']
        },

    ]
};