var app=app ||{};
var TopView=Backbone.View.extend({
	el:".wrap",
	template:app.tpls["indexTpl"],
	initialize:function(){
		this.render();
	},
	render:function(){
		console.log(this.model);
		var time=this.model.get("time");
		var now=this.model.get("now");
		console.log(time,now)
		this.$el.html(this.template({"time":time,"now":now}));
		var h = $(".index").height();
			$(".barChartWrap").height(h-160);
		var top10=this.model.get("top10");
		this.showBar(top10);
		
		



	},
	showBar:function(data) {
    // 路径配置
    require.config({
        paths: {
            echarts: 'js/lib/echart/dist'
        }
    });
    // 使用
    require(
        ['echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ], function(ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('barChart'));
            
         
            var dataOrder=_.sortBy(data,"value");
            var names=_.pluck(dataOrder,"name");
            	
            	
            var names=_.map(names,function(name){
            	if(name.length<5){
            		return name;
            	}else{
            		return name.substring(0,6)+"...";
            	}
            });
            console.log(names)
            
            var values=_.pluck(dataOrder,"value"); 
            var option = {
                color: ["#00b1f1"],
                grid: {
                    x: 100,
                    y: 20,
                    x2: 50,
                    y2: 0,
                    borderWidth: 0,
                },
                xAxis: [{
                    type: 'value',
                    position: 'top',
                    axisLine: {
                        lineStyle: {
                            color: "#00b1f1",
                            width: 2,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        show: true,
                        inside: true,
                        lineStyle: {
                            color: "#00b1f1",
                            width: 2,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        show: true,
                    },
                    splitLine: {
                        show: false
                    }
                }],
                yAxis: [{
                    type: 'category',
                    data: names,
                    barCategoryGap: "40",
                    axisLine: {
                        lineStyle: {
                            color: "#00b1f1",
                            width: 2,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        show: true,
                        inside: true,
                        lineStyle: {
                            color: "#00b1f1",
                            width: 2,
                            type: 'solid'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                }],
                series: [{
                    name: '2011年',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    color: "#000"
                                }
                            }
                        }
                    },
                    barWidth: 15,
                    data: values
                }]
            };
            // 为echarts对象加载数据 
            myChart.setOption(option);
        });
	}

});