Echarts在线免费图表

 
            var colors = ['#00FFFF', '#02FF67', '#675bba'];

option = {
   backgroundColor: '#081736',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        top: '30%',
        right: '3%',
        left: '4%',
        bottom: '25%'
    },
   dataZoom: [
	    {
	      show: true,
	      realtime: true,
	      start: 0,
	      end:50
	    },
	    {
	      type: 'inside',
	      realtime: true,
	      start: 0,
	      end: 50
	    }
	  ],
    xAxis: [{
        type: 'category',
        axisLabel: {
            color: '#fff',
			interval:0
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#0a3e98'
            }
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#195384',
                type: "dotted",
            }
        },
        data: ['博雅社区','曹家村','大草坝村','大东关社区','杜家漕村','黄家村','栗子园村','莲花池村','廉家庄村','吕家村','马家店村','庙坡村','石家庄村','五郎庙村','小东关社区','小西关村','谢家井社区','湑水村','翟家寺村']
    }],
    yAxis: [
        {
            type: 'value',
            name: "人",
            min: 0,
            position: 'left',
            nameTextStyle: {
                color: "#fff",
                fontSize: 11,
            },
            axisLine: {
                lineStyle: {
                    color: '#0a3e98'
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0a3e98',
                    type: "dotted",
                }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: "#fff",
                }
            },
        }
    ],
	// dataZoom: [
	//     {
	//       show: true,
	//       realtime: true,
	//       start: 0,
	//       end: 30
	//     },
	//     {
	//       type: 'inside',
	//       realtime: true,
	//       start: 0,
	//       end: 30
	//     }
	//   ],
    series: [{
        name: '户数',
        type: 'bar',
        barWidth: 15, //柱子宽度
        barGap: 0.3, //柱子之间间距
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                		offset: 0,
                		color: "#F7E370"
                	},
                	{
                		offset: 1,
                		color: "#425052"
                	}
                ]),
            }
        },
		label:{
			normal: {
				show: true,
				position: "top",
				formatter: "{c}",
				color:'#fff'
			}
		},
        data: ['11','2','2','1','3','2','4','2','2','4','3','6','2','2','3','1','1','2','2'],
        // animationDuration: function (idx) {
        //     return idx * 1500 + 1000;
        // }
    }
    ]
};