Echarts在线免费图表

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

option = {
   backgroundColor: '#081736',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        top: '25%',
        right: '5%',
        left: '10%',
        bottom: '36%'
    },

    xAxis: [{
        type: 'category',
        axisLabel: {
            color: '#fff'
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#0a3e98'
            }
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#195384',
                type: "dotted",
            }
        },
        data: ['博雅社区','曹家村','大草坝村','杜家漕村','黄家村','栗子园村','廉家庄村','吕家村','马家店村','庙坡村','石家庄村','五郎庙村','小东关社区','小西关村','谢家井社区','胥水村','翟家寺村']
    }],
	dataZoom: [
		    {
		      show: true,
		      realtime: true,
		      start: 0,
		      end: 100
		    },
		    {
		      type: 'inside',
		      realtime: true,
		      start: 0,
		      end: 100
		    }
		  ],
    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",
                }
            },
        }
    ],
    series: [
	{
		name:'发放人数',
		type: 'line',
		// smooth: true, //是否平滑
		showAllSymbol: true,
		// symbol: 'image://./static/images/guang-circle.png',
		symbol: 'circle',
		symbolSize: 10,
		lineStyle: {
			normal: {
				color: "#7F4CEF",
			},
		},
		label: {
			show: true,
			position: 'top',
			textStyle: {
				color: '#7F4CEF',
			}
		},
		itemStyle: {
			color: "#fff",
			borderColor: "#7F4CEF",
			borderWidth: 3,
		},
		areaStyle: {
		    normal: {
		        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                offset: 0,
		                color: 'RGBA(127, 76, 239, 1)'
		            },
		            {
		                offset: 1,
		                color: 'RGBA(127, 76, 239, 0.2)'
		            }
		        ], false),
		        shadowColor: 'RGBA(80, 38, 72, 0.2)',
		        shadowBlur: 20
		    }
		},
		data: [3,7,2,2,3,1,1,4,1,3,5,6,3,1,1,3,2]
	}
    ]
};