$(function(){
    drawPieChart();
    drawLineChart();	
})

function drawPieChart(){
    var pieChart = echarts.init(document.getElementById('pieChart'));
    var option = {
        series: [
            {
                name:'今日步数',
                type:'pie',
                radius: ['90%', '100%'],
                startAngle: 270,
                legendHoverLink: false,
                hoverAnimation: false,
                avoidLabelOverlap: false,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {
                        value:3500,
                        itemStyle:{
                            normal:{
                                color: '#17b3ec'
                            }
                        }
                    },
                    {
                        value:6500,
                        itemStyle:{
                            normal:{
                                color: '#e1e1e1'
                            }
                        }
                    }
                ]
            }
        ]
    };
    pieChart.setOption(option);
}

function drawLineChart(){
    var now = new Date(),
        xData = [],
        yData = [],
        yData2 = [];
    for(var i=0; i<30; i++){
        var dat = new Date();
        dat.setDate(now.getDate() - i);
        xData.push(dat.Format("yyyy-MM-dd"));
        yData.push(Math.random(0, 1) * 10000);
        yData2.push(10000);
    }
    var lastIndex = yData.length % 7;
    if(yData.length >7 ){  
        var dataZoom_end = 100-(6/yData.length)*100;  
    }else{  
        var dataZoom_end = 0;  
    } 
    var lineCharts = echarts.init(document.getElementById('lineChart'));
    var options = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: 'bottom',
                data:['运动步数', '目标值']
            },
            grid: {
                left: '10px',
                right: '10px',
                bottom: '30px',
                top: '10px',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLabel: {
                    interval:0,//横轴信息全部显示  
                    formatter: function (value, index) {
                        if(index == 0){
                            $("#startValue").text(value);
                            return value.substr(5,2)+"月"+value.substr(8,2);
                        }else{
                            if(index == 7){
                                $("#endValue").text(value);
                            }
                            return value.substr(8,2);
                        }
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                }
            },
            dataZoom: [{//给x轴设置滚动条  
                show: false,
                start: dataZoom_end,
                end: 100,
                type: 'slider',
                zoomLock: true,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: true,
            }],
            series: [{
                name: '运动步数',
                type: 'line',
                smooth: true,
                data: yData,
                lineStyle:{
                    normal: {
                        color: '#17b3ec'
                    }
                },
                itemStyle:{
                    normal: {
                        color: '#17b3ec'
                    }
                }
            },{
                name: '目标量',
                type: 'line',
                smooth: true,
                data: yData2,
                lineStyle:{
                    normal: {
                        color: '#D0DD44'
                    }
                },
                itemStyle:{
                    normal: {
                        color: '#D0DD44'
                    }
                }
            }]
        };
        lineCharts.setOption(options);
}