$(function(){

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('sa_chart1'));

    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '  24小时降雨柱状图',
            textStyle:{
                color:'#333333',
                fontWeight: 'normal',
                fontSize:14
            }
        },
        tooltip: {},
        grid:{

            left : 40,
            right:40,
            bottom:40
        },
       
        xAxis: {
            data: ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]
        },
        yAxis: {},
        series: [{
            name: '降雨量',
            type: 'bar',
            data: [18, 12, 11, 14, 7, 10,13,6,3,4,7,9,17,14,12,5,19,11,10,11,19,14,3,9]
        }],
        color:['#509edc']
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);

    /*$(window).resize(function(){

    	// 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById('sa_chart1'));

	    // 指定图表的配置项和数据
	    var option = {
	        title: {
	            text: 'ECharts 入门示例'
	        },
	        tooltip: {},
	        legend: {
	            data:['销量']
	        },
	        xAxis: {
	            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	        },
	        yAxis: {},
	        series: [{
	            name: '销量',
	            type: 'bar',
	            data: [5, 20, 36, 10, 10, 20]
	        }]
	    };
	    myChart.setOption(option);
    });*/

    var myChart2 = echarts.init(document.getElementById('sa_chart2'));
    option2 = {
        grid:{

            left : 40,
            right:40,
            bottom:40
        },
        title: {
            text: '  3天降雨量折线图',
            textStyle:{
                color:'#333',
                fontWeight: 'normal',
                fontSize:14
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['08/27','08/28','08/29']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'降雨量',
                type:'line',
                data:[12, 9, 16]
            }
        ],
        color:['#10c469']
    };
    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById('sa_chart3'));
    option3 = {
        grid:{

            left : 40,
            right:40,
            bottom:40
        },
        title: {
            text: '  3天降雨量折线图',
            textStyle:{
                color:'#333',
                fontWeight: 'normal',
                fontSize:14
            }
        },
        tooltip: {
            trigger: 'axis'
        },
       
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['08/21','08/22','08/23','08/24','08/25','08/26','08/27']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'降雨量',
                type:'line',
                data:[11, 9, 14,10,7,12,15]
            }
        ],
        color:['#5b69bc']
    };
    myChart3.setOption(option3);
});